Saturday, 24 April 2021

LAB CSS 4

LAB CSS 4

 

1.      Mở  file dulich.html

2.      Đặt tên cho table chứa chữ Danh làm các thắng cảnhlà  danhlam

3.      Tuần tự tạo các style sau :

#danhlam { width: 500px;    border: 5px solid #C60; }

#danhlam caption {

   color: #9F9;  text-transform: capitalize;  font-size: 18px;

   background-color: #C60;  padding-top: 5px;  padding-bottom: 5px;}

#danhlam  a {

   color: #036; text-decoration: none;  padding-left: 25px;

   background-image: url(forward1.gif); background-repeat: no-repeat; }

#danhlam td { border-bottom: dotted 1px #C60;}

4.      Tạo class sau:

#danhlam .vien {

   border-left: dotted 1px #C60;

border-right: dotted 1px #C60; }

    Xong thì set class cho các td ở cột giữa

 

   Kết quả như sau:

 

 

 

5.      Chèn div có tên là weblinkbao quanh các chữ  từ chữ Website du lịch đến chữ quan tâm đến du lịch việt nam

6.      Tuần tự tạo các style sau:

#weblink { width: 658px;  border: 1px solid #039;}

#weblink h3 {

background-color: #990; margin: 0px;

padding-top: 5px;  padding-bottom: 5px;}

#weblink a { color: #903; text-decoration: none; }

#weblink p { color: #036; text-align: justify; margin-left: 50px; }

  

Kết quả như sau:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Website du lịch</title>


<style>

#danhlam{ width: 500px; border: 5px solid #C60;}

#danhlam caption{ color:#9F9; text-transform: capitalize; font-size: 18px; background-color:#C60; padding-top:5px; padding-bottom:5px;}

#danhlam  a { color:#036; text-decoration:none; padding-left:25px; background-image:url(forward1.gif); background-repeat:no-repeat;}

#danhlam td{ border-bottom:dotted 1px #C60;}

#danhlam .vien{ border-left:dotted 1px #C60; border-right:dotted 1px #C60;}

#weblink { width:658px; border:1px solid #039;}

#weblink h3{ background-color:#990; margin:0px; padding-top:5px; padding-bottom:5px;}

#weblink a { color: #903; text-decoration: none; }

#weblink p { color: #036; text-align: justify; margin-left: 50px; }

        


</style>


</head>


<body>

<table width="400" border="0" cellpadding="4" cellspacing="0" id="danhlam">

  <caption>

    Danh lam thắng cảnh các địa phương

  </caption>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichbackan.htm">Du lịch Bắc Kạn</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichbinhphuoc.htm">Du lịch Bình Phước</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichdalat.htm">Du lịch Đà Lạt</a></td>

  </tr>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichhungyen.htm"> Du lịch Hưng Yên</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichtiengiang.htm">Du lịch Tiền Giang</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichphanthiet.htm"> Du lịch Phan Thiết</a></td>

  </tr>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichtuyenquang.htm"> Du lịch Tuyên Quang</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichcaobang.htm"> Du lịch Cao Bằng</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichnhatrang.htm"> Du lịch Nha Trang</a></td>

  </tr>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichdaknong.htm"> Du lịch Đắk Nông</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichgialai.htm"> Du lịch Gia Lai</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichhanoi.htm"> Du lịch Hà Nội</a></td>

  </tr>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichninhthuan.htm"> Du lịch Ninh Thuận</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichyenbai.htm">Du lịch Yên Bái</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichsonla.htm"> Du lịch Sơn La</a></td>

  </tr>

  <tr>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichdongthap.htm"> Du lịch Đồng Tháp</a></td>

    <td class="vien"><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichhanam.htm"> Du lịch Hà Nam</a></td>

    <td><a target="_blank" href="http://www.vietnamtravelco.com/dulich/dulichhoian.htm"> Du lịch Hội An</a></td>

  </tr>

</table>

<p>&nbsp;</p>

<div id="weblink">

    <h3>Website du lịch </h3>

    <h4><a title="du lịch sapa" target="_blank" href="http://www.disapa.com/">Du lịch Sapa</a></h4>

    <p> Giới thiệu các thông tin du lịch Khám phá thị trấn Sapa, Quý khách có thể tìm hiểu đầy đủ thông tin trên web điSAPA.com với nhiều các tour du lịch sapa hấp dẫn, giá rẻ cho người Việt Nam</p>

    <h4><a title="du lịch nước ngoài" target="_blank" href="http://www.vietnamtravelco.com/dulichnuocngoai/"> Du lịch Nước ngoài, Khám phá thế giới</a></h4>

    <p align="justify"> Khám phá các tour du lịch cho du khách Việt Nam, các chương trình tour trọn gói hấp dẫn, Các điểm đến du lịch trên cả nước. Giới thiệu các chương trình tour các nước trên thế giới được tổ chức bởi các công ty lữ hành có uy tín ở Việt Nam. Cung cấp thông tin dịch vụ du lịch bằng tiếng Anh, là website du lịch lớn nhất Việt Nam</p>

    <h4 align="justify"><a href="http://www.webdulich.com">Cẩm nang Du lịch trực tuyến</a></h4>

    <p align="justify"> Là nơi quảng bá đạt &quot;Hiệu quả cao, chi phí thấp&quot; của các doanh nghiệp trong lĩnh vực: Khách sạn, nhà hàng, dịch vụ du lịch. Hơn thế nữa, http://www.webdulich.com còn là web site đáng tin cậy của tất cả những ai quan tâm đến Du lịch Việt Nam</p>

</div>

<p>&nbsp;</p>

<p>Di sản thế giới tại việt nam</p>

<p>Đô thị cổ Hội An - Di sản Văn hóa thế giới</p>

<p>Vườn Quốc gia Phong Nha - Di sản Thiên nhiên thế giới</p>

<p>Bia tiến sĩ Văn Miếu - Di sản tư liệu thế giới</p>

<p>Quan họ Bắc Ninh - Di sản văn hóa phi vật thể</p>

<p>Hoàng thành Thăng Long - Di sản Văn hóa thế giới </p>

<p>Mộc bản triều Nguyễn - Di sản tư liệu thế giới</p>

<p>Nhã Nhạc - Di sản văn hóa phi vật thể </p>

<p>Vịnh Hạ Long - Di sản Thiên nhiên thế giới

</p>

<p>&nbsp;</p>

<table cellspacing="0" cellpadding="0">

 <tr>

  <th bgcolor="#bdddfd"><p align="center"> Thông tin  cần biết</p></th>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://www.hotels84.com.vn">  Khách sạn Việt Nam</a></td>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://cho.vietnamtradefair.com/"> Chợ Việt Nam</a></td>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://www.wunderground.com/global/VS.html"> Dự báo thời tiết</a></td>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://www.worldtimeserver.com/"> Giờ quốc tế</a></td>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://www.calendarone.com/"> Lịch</a></td>

 </tr>

 <tr>

  <td> <a target="_blank" href="http://world.altavista.com/"> Dịch các ngôn ngữ</a></td>

 </tr>

 <tr>

  <td><a target="_blank" href="http://www.oanda.com/converter/classic"> Tỷ giá tiền tệ</a></td>

 </tr>

</table>

</body>

</html>

Website du lịch
Danh lam thắng cảnh các địa phương
Du lịch Bắc Kạn Du lịch Bình Phước Du lịch Đà Lạt
Du lịch Hưng Yên Du lịch Tiền Giang Du lịch Phan Thiết
Du lịch Tuyên Quang Du lịch Cao Bằng Du lịch Nha Trang
Du lịch Đắk Nông Du lịch Gia Lai Du lịch Hà Nội
Du lịch Ninh Thuận Du lịch Yên Bái Du lịch Sơn La
Du lịch Đồng Tháp Du lịch Hà Nam Du lịch Hội An

 

 

Di sản thế giới tại việt nam

Đô thị cổ Hội An - Di sản Văn hóa thế giới

Vườn Quốc gia Phong Nha - Di sản Thiên nhiên thế giới

Bia tiến sĩ Văn Miếu - Di sản tư liệu thế giới

Quan họ Bắc Ninh - Di sản văn hóa phi vật thể

Hoàng thành Thăng Long - Di sản Văn hóa thế giới

Mộc bản triều Nguyễn - Di sản tư liệu thế giới

Nhã Nhạc - Di sản văn hóa phi vật thể

Vịnh Hạ Long - Di sản Thiên nhiên thế giới

 

Thông tin cần biết
Khách sạn Việt Nam
Chợ Việt Nam
Dự báo thời tiết
Giờ quốc tế
Lịch
Dịch các ngôn ngữ
Tỷ giá tiền tệ

0 comments:

Post a Comment