CSS+DIV-旅遊觀光

20.css

body{
  background-color:#2286c6;
  margin: 0px;
  padding:0px;
  text-align:center;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
}
#container{
  position:relative;
  margin:0px auto 0px auto;
  width:780px;
  text-align:left;
}
div br{
  display:none;
}
#globallink{
  margin:0px; padding:0px;
}
#globallink ul{
        list-style:none;
  padding:0px; margin:0px;
}
#globallink li{
  float:left;
  text-align:center;
  width:78px;  
}
#globallink a{
  display:block;
  padding:9px 6px 11px 6px;
  background:url(button1.jpg) no-repeat;
  margin:0px;
}
#globallink a:link, #globallink a:visited{
  color:#004a87;
  text-decoration:underline;
}
#globallink a:hover{
  color:#FFFFFF;
  text-decoration:underline;
  background:url(button1_bg.jpg) no-repeat;
}

#left{
  float:left;
  width:200px;
  background-color:#FFFFFF;
  margin:0px;
  padding:0px 0px 5px 0px;
  color:#d8ecff;
}
#left div{
  background-color:#5ea6eb;
  margin:0px 5px 0px 5px;
}
#weather{
  background:url(weather.jpg) no-repeat -5px 0px;
  margin:0px 5px 0px 5px;
  background-color:#5ea6eb;
}
div#left #weather h3{
  font-size:12px;
  padding:24px 0px 0px 74px;
  color:#FFFFFF;
  background:none;
  margin:0px;
}
div#weather ul{
  margin:8px 5px 0px 5px;
  padding:10px 0px 8px 5px;  
  list-style:none;
}
#weather ul li{
  background:url(icon1.gif) no-repeat 0px 6px;
  padding:1px 0px 0px 10px;
}
#left div h3{
  font-size:12px;
  padding:4px 0px 2px 15px;
  color:#003973;
  margin:0px 0px 5px 0px;
  background:#bbddff url(icon2.gif) no-repeat 5px 7px;
}
#today{
  padding:0px 0px 10px 0px;
}
#today ul{
  list-style:none;
  margin:-5px 0px 0px 0px;
  padding:0px;
}
#today ul li{
  text-align:center;
}
#today ul li img{
  border:1px solid #FFFFFF;
  margin:8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited{
  color:#d8ecff;
  text-decoration:none;
}
#today ul li a:hover{
  color:#FFFF00;
  text-decoration:underline;
}

#middle{
  background-color:#FFFFFF;
  margin:0px 0px 0px 2px;
  padding:5px 0px 0px 0px;
  width:400px; float:left;
}
#middle div{
  margin-left:5px;
  margin-right:5px;
  position:relative;
}
#middle h3{
  margin:0px; padding:0px;
  height:41px;
}
#middle h3 span{
  display:none;    /* 文字去掉，換成圖片 */
}
#beauty{
  margin:15px 0px 0px 0px;
  padding:0px;
}
#beauty h3{
  background:url(picture_h1.gif) no-repeat;
}
#beauty ul, #route ul{
  list-style:none;
  margin:8px 1px 0px 1px;
  padding:0px;
}
#beauty ul li{
  float:left;
  width:97px;
  text-align:center;
}
#beauty ul li img{
  border:1px solid #4ab0ff;
}
#route{
  clear:both; margin:0px;
  padding:5px 0px 15px 0px;
}
#route h3{
  background:url(route_h1.gif) no-repeat;
}
#route ul li{
  padding:3px 0px 0px 30px;
  background:url(icon1.gif) no-repeat 20px 7px;
}
#route ul li a:link, #route ul li a:visited{
  color:#004e8a;
  text-decoration:none;
}
#route ul li a:hover{
  color:#000000;
  text-decoration:underline;
}

#right{
  float:left;
  margin:0px 0px 1px 2px;
  width:176px;
  background-color:#FFFFFF;
  color:#d8ecff;
}
#right div{
  position:relative;
  margin-left:5px;
  margin-right:5px;
  background-color:#5ea6eb;
}
#right div h3{
  font-size:12px;
  padding:4px 0px 2px 15px;
  color:#003973;
  margin:0px 0px 5px 0px;
  background:#bbddff url(icon2.gif) no-repeat 5px 7px;
}
#map{
  margin-top:5px;  
}
#map p{
  text-align:center;
  margin:0px;
  padding:2px 0px 5px 0px;
}
#map p img{
  border:1px solid #FFFFFF;
}
#food{
  padding-top:10px;
}
#food ul, #life ul{
  list-style:none;
  padding:0px 0px 10px 0px;
  margin:10px 10px 0px 10px;
}
#food ul li, #life ul li{
  background:url(icon1.gif) no-repeat 3px 9px;
  padding:3px 0px 3px 12px;
  border-bottom:1px dashed #EEEEEE;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
  color:#d8ecff;
  text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
  color:#000000;
  text-decoration:none;
}
#life{
  padding-top:10px;
  padding-bottom:5px;
  margin-bottom:5px;
}

#footer{
  background-color:#FFFFFF;
  margin:1px 0px 0px 0px;
  clear:both;
  position:relative;
  padding:1px 0px 1px 0px;
}
#footer p{
  text-align:center;
  padding:0px;
  margin:4px 5px 4px 5px;
  background-color:#5ea6eb;
}
#footer p a{
  color:#FFFFFF;
  text-decoration:none;
}

20.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>新疆行知書</title>
<link href="20.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
  <div id="banner"><img src="banner.jpg"></div>
  <div id="globallink">
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">新疆簡介</a></li>
      <li><a href="#">風土人情</a></li>
      <li><a href="#">吃在新疆</a></li>
      <li><a href="#">路線選擇</a></li>
      <li><a href="#">自助行</a></li>
      <li><a href="#">攝影攝像</a></li>
      <li><a href="#">遊記精選</a></li>
      <li><a href="#">資源下載</a></li>
      <li><a href="#">雁過留聲</a></li>
    </ul>
    <br>
  </div>
  <div id="left">
    <div id="weather">
      <h3><span>天氣查詢</span></h3>
      <ul>
        <li>烏魯木齊   雷陣雨 20℃-31℃</li>
        <li>吐魯番   多雲轉陰 20℃-28℃</li>
        <li>喀什   陣雨轉多雲 25℃-32℃</li>
        <li>庫爾勒   陣雨轉陰 21℃-28℃</li>
        <li>克拉馬依   雷陣雨 26℃-30℃</li>
      </ul>
      <br>
    </div>  
    <div id="today">
      <h3><span>今日推薦</span></h3>
      <ul>
        <li><a href="#"><img src="tuijian1.jpg"></a></li>
        <li><a href="#">喀納斯河</a></li>
        <li><a href="#"><img src="tuijian2.jpg"></a></li>
        <li><a href="#">布爾津</a></li>
        <li><a href="#"><img src="tuijian3.jpg"></a></li>
        <li><a href="#">天山之路</a></li>
      </ul>
      <br>
    </div>
  </div>
  <div id="middle">
    <div id="ghost"><a href="#" title="魔鬼城探祕"><img src="ghost.jpg" border="0"></a></div>
    <div id="beauty">
      <h3><span>美景尋蹤</span></h3>
      <ul>
        <li><a href="#"><img src="beauty1.jpg"></a></li>
        <li><a href="#"><img src="beauty2.jpg"></a></li>
        <li><a href="#"><img src="beauty3.jpg"></a></li>
        <li><a href="#"><img src="beauty4.jpg"></a></li>
      </ul>
      <br>
    </div>
    <div id="route">
      <h3><span>線路精選</span></h3>
      <ul>
        <li><a href="#">吐魯番——庫爾勒——庫車——塔中——和田——喀什</a></li>
        <li><a href="#">烏魯木齊——天池——克拉馬依——烏倫古湖——喀納斯</a></li>
        <li><a href="#">烏魯木齊——奎屯——喬爾瑪——那拉提——巴音布魯克</a></li>
        <li><a href="#">烏魯木齊——五彩城——將軍隔壁——吉木薩爾</a></li>
      </ul>
      <br>
    </div>
  </div>
  <div id="right">
    <div id="map">
      <h3><span>新疆風光</span></h3>
      <p><a href="#" title="點擊看大圖"><img src="map1.jpg"></a></p>
      <p><a href="#" title="點擊看大圖"><img src="map2.jpg"></a></p>
    </div>
    <div id="food">
      <h3><span>小吃推薦</span></h3>
      <ul>
        <li><a href="#">17號抓飯</a></li>
        <li><a href="#">大盤雞</a></li>
        <li><a href="#">五一夜市</a></li>
        <li><a href="#">水果</a></li>
      </ul>
      <br>
    </div>
    <div id="life">
      <h3><span>賓館酒店</span></h3>
      <ul>
        <li><a href="#">美麗華大飯店</a></li>
        <li><a href="#">海德大飯店</a></li>
        <li><a href="#">銀都大飯店</a></li>
        <li><a href="#">鴻福大飯店</a></li>
        <li><a href="#">友好大酒店</a></li>
        <li><a href="#">棉麻賓館</a></li>
        <li><a href="#">電信賓館</a></li>
      </ul>
      <br>
    </div>
  </div>
  <div id="footer">
    <p>艾薩克 ©版權所有 <a href="mailto:[email protected]">[email protected]</a></p>
  </div>
</div>
</body>
</html>

來源：《精通CSS+DIV網頁樣式與佈局》