DIV+CSS布局实战---海南旅游网

来源：互联网发布：数组和链表有什么区别编辑：程序博客网时间：2024/05/04 08:23

代码：

liyouwang.html

<!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>海南旅游网</title><link href="CSS.css" rel="stylesheet" type="text/css"></head><body>    <!--整体外层容器-->    <div id="container">      <!--banner条-->      <div id="banner">         <img src="Top.jpg" width="100%" height="100%" alt="海南风光">      </div>            <!--全局导航条-->      <div id="globllink">         <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>      </div>            <!--左侧栏-->      <div id="left">        <div id="weather">         <h3><span>天气查询</span></h3>         <ul>           <li>海口   雷阵雨 25C-31C</li>           <li>琼海   多云转晴 28C-32C</li>           <li>临高   阵雨转多云 27C-30C</li>           <li>万宁   晴天 32C-35C</li>         </ul>        </div>                <div id="Today">         <h3><span>今日推荐</span></h3>         <ul>           <li><a href="#"><img src="fengjing1.jpg" width="100%" height="100%"></a></li>           <li><a href="#">南海观音</a></li>           <li><a href="#"><img src="fengjing2.jpg" width="100%" height="100%"></a></li>           <li><a href="#">解放公园</a></li>           <li><a href="#"><img src="sanya.jpg" width="100%" height="100%"></a></li>           <li><a href="#">假日海滩</a></li>         </ul>        </div>      </div>            <!--中间内容栏-->      <div id="middle">         <div id="ghost">         <a href="#" title="海南美景尽览"><img src="lingaojiao.jpg"border="0" width="100%" height="100%"></a>         </div>                  <div id="beauty">            <h3><span>美景寻踪</span></h3>              <ul>              <li><a href="#"><img src="fengjing2 (1).jpg" width="100%" height="100%"></a></li>              <li><a href="#"><img src="jia (1).jpg" width="100%" height="100%"></a></li>              <li><a href="#"><img src="jia5.jpg" width="100%" height="100%"></a></li>              <li><a href="#"><img src="hai.jpg" width="100%" height="100%"></a></li>              </ul>         </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>         </div>      </div>            <!--右侧栏-->      <div id="right">         <div id="map">           <h3><span>海南风光</span></h3>           <p><a href="#" title="点击查看大图"><img src="fengguang1.jpg" width="100%" height="100%"></a></p>           <p><a href="#" title="点击查看大图"><img src="fengguang2.jpg" width="100%" height="100%"></a></p>         </div>                  <div id="food">           <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>             </ul>         </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>             </ul>         </div>      </div>            <!--脚注-->      <div id="footer">       </div>         <p>海哥工作室 &copy;版权所有<a href="#">demo@163.com</a></p>       </div>       </div></body></html>

CSS.css

@charset "utf-8";/* CSS Document */body{background:#FFF;margin:0px;padding:0px;font-size:12px;font-family:Arial, Helvetica, sans-serif;}#container{margin:0px auto;width:780px;height:860px;text-align:left;background:#FFF;}#banner {margin:0px;padding:0px;background:#3F6;height:150px;width:100%;}#globllink{background:#0CF;margin:0px;padding:0px;width:100%;height:25px;list-style-type:none;}#globllink ul{list-style-type:none;margin:0px;padding:0px;}#globllink ul li {float:left;text-align:center;width:78px;}#globllink ul li a{display:block;padding:9px 6px 11px 6px;margin:0px;}#left {width: 200px;height:635px;background:#09F;margin:0px;padding:0px 0px 5px 0px;color:#d8ceff;float:left;}#weather{margin:0px 5px;background-color:#03F;}#weather h3{text-align:center;font-size:15px;color:#000;}#weather ul{margin:8px 5px 0px 5px;padding:10px 0px 8px 5px;list-style-type:none;}#Today h3{text-align:centercolor:#000;font-size:15px;}#Today {background:#09F;}#Today ul{list-style-type:none;padding:0px;margin:2px 0px 0px 0px;}#Today ul li{text-align:center;}#Today ul li ima{border:1px solid #FFF;margin:8px 0px 0px 0px;}#Today ul li a:link,#Today ul li a:visited{color:#000;text-decoration:none;}#Today ul li a:hover{color:#F06;text-decoration:underline;}#middle {width:400px;height:639px;background:#09F;margin:0px,2px;padding:5px 0px 5px 0px;float:left;}#middle div{margin:0px 5px;}#middle h3{text-align:center;margin:0px;padding:0px;background:url(changtu.jpg);}#beauty{margin:15px 0px 0px 0px;padding:0px;}#beauty ul,#route ul{list-style-type:none;margin:18px 1px 0px 1px;padding:0px;}#beauty ul li{float:left;width:97px;text-align:center;}#beauty ul li img{border:1px solid #9F9;width:100px;height:200px;}#route{clear:both;margin:0px;padding:5px 0px 15px 0px;}#route ul li{padding:3px 0px 0px 30px;}#route h3{text-align:center;}#route ul li a:link,#route ul li a:visited{text-decoration:none;color:#F00;}#route ul li a:hover{text-decoration:underline;color:#000;}#right {width: 176px;height:639px;background:#09F;margin:0px;padding:5px 0px 5px 0px;float:left;}#right div{margin:0px 5px;background:#09F;}#right div h3{font-size:12px;padding:4px 0px 2px 15px;color:#9F6;margin:0px 0px 5px 0px;text-align:center;}#map p{text-align:center;margin:0px;padding:2px 0px 5px 0px;}#map p img{border:1px solid #FFF;}#food ul,#life ul{list-style-type:none;padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;}#food ul li,#life ul li{padding:3px 0px 3px 12px;border-bottom:1px dashed #FFF;}#food ul li a:link,#food ul li a:visited,#life ul li a:link,#life ul li a:visited{color:#FFF;text-decoration:none;}#food ul li a:hover,#life ul li a:hover{color:#F00;text-decoration:underline;}#food,#life{padding-top:13px;}#footer {background:#FFF;margin:1px 0px 0px 0px;padding:1px 0px;clear:both;}#footer p{text-align:center;padding:0px;margin:4px 5px 4px 5px;background:#36F;}#footer p a{color:#FFF;text-decoration:none;}

制作截图：

0 0