div + css案例

<html>
<head>
<title>网页设计</title>
<style type="text/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;
    margin:0px; padding: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;
    text-align:center;
   }
   #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;
}

-->
</style>
</head>

<body>
<div id="container">
<div id="banner"><img src="banner.jpg"></div>
<div id="globallink">
  <ul>
   <li id="aa"><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>乌鲁木齐   雷阵雨 21℃-31℃</li>
    <li>吐鲁番   多云转阴 21℃-31℃</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:demo@demo.com">demo@demo.com</a></p>
</div>
</div>

</body>
</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。