web技术_css+div完成网页设计

来源：互联网发布：唯一网络洛阳编辑：程序博客网时间：2024/05/12 08:54

素材下载（包含源码）

图一是给出欲完成的效果图：

web技术_css+div完成网页设计

图1

图2为自己完成的效果图：

web技术_css+div完成网页设计

图2

【源码】

html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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="style.css" rel="stylesheet"type="text/css"/>
</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>例2</title>
<link href="style.css" rel="stylesheet"type="text/css"/>
</head>

<body>
<div id="div0">
<divid="div1">
  <imgsrc="web/images/banner.jpg" />
</div>
   <div id="div2">
     <ahref="#">首页</a>
     <ahref="#">新疆简介</a>
     <ahref="#">风土人情</a>
     <ahref="#">吃在新疆</a>
     <ahref="#">路线选择</a>
     <ahref="#">自助行</a>
     <ahref="#">摄影摄像</a>
     <ahref="#">游记精选</a>
     <ahref="#">资源下载</a>
     <ahref="#">雁过留声</a>
   </div>
   <div id="div3">
    <divid="div4">
          天气预报
       </div>
       <div id="div5">
        <divid="div6">
            <img src="web/images/icon1.gif"/>
               <span>乌鲁木齐雷阵雨20℃-31℃</span></div>
           <div id="div6">
            <img src="web/images/icon1.gif"/>
               <span>吐鲁番多云转阴20℃-28℃</span></div>
           <div id="div6">
            <img src="web/images/icon1.gif"/>
               <span>喀什阵雨转多云25℃-32℃</span></div>
           <div id="div6">
            <img src="web/images/icon1.gif"/>
               <span>库尔勒阵雨转阴21℃-28℃</span></div>
           <div id="div6">
            <img src="web/images/icon1.gif"/>
               <span>克拉马依雷阵雨26℃-30℃</span></div>
           </div>
     <div id="div7">
       <div id="div8">
        
          <img src="web/images/icon2.gif"/>
        <span>今日推荐</span>
       </div>
       <div id="div9">
        <br />
        <ahref="#"><ahref="#"><imgsrc="web/images/tuijian1.jpg"/></a><br/>
           <ahref="#">喀纳斯河</a>
        <ahref="#"><imgsrc="web/images/tuijian2.jpg"/></a><br/>
           <ahref="#">布尔津</a>
           <a href="#"><imgsrc="web/images/tuijian3.jpg"/></a><br/>
           <ahref="#">天山之路</a>
       </div>
     </div>
   </div>
   <div id="div10">
    <divid="div11"><ahref="#"><imgsrc="web/images/ghost.jpg" alt="魔鬼城探秘"/></a></div>
       <div id="div12"><imgsrc="web/images/picture_h1.gif"/></div>
       <div id="div13">
        <ahref="#"><imgsrc="web/images/beauty1.jpg"/></a>
           <a href="#"><imgsrc="web/images/beauty2.jpg"/></a>
           <a href="#"><imgsrc="web/images/beauty3.jpg"/></a>
           <a href="#"><imgsrc="web/images/beauty4.jpg"/></a>
       </div>
       <div id="div12"><imgsrc="web/images/route_h1.gif"/></div>
       <div id="div14">
        <img src="web/images/icon1.gif"/><ahref="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a><br/>
           <img src="web/images/icon1.gif"/><ahref="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a><br/>
           <img src="web/images/icon1.gif"/><ahref="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a><br/>
           <img src="web/images/icon1.gif"/><ahref="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a><br/>
       </div>
   </div>
   <divid="div15">
    <divid="div16">
        <img src="web/images/icon2.gif"/><span>新疆风光</span>
       </div>
       <div id="div17">
       <a href="#"><imgsrc="web/images/tuijian1.jpg"alt="点击查看大图"/></a><br/>
       <a href="#"><imgsrc="web/images/tuijian2.jpg"alt="点击查看大图"/></a>
       </div>
       <div id="div16">
        <img src="web/images/icon2.gif"/><span>小吃推荐</span>
       </div>
       <divid="div17"> </div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">17号抓饭</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">大盘鸡</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">五一夜市</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">水果</a></div>
       <divid="div17"> </div>
       <div id="div16">
        <img src="web/images/icon2.gif"/><span>宾馆酒店</span>
       </div>
       <divid="div17"> </div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">美丽华大饭店</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">海德大饭店</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">银都大饭店</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">鸿福大饭店</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">友好大酒店</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">棉麻宾馆</a></div>
       <div id="div18"><imgsrc="web/images/icon1.gif" /><ahref="#">电信宾馆</a></div>
  </div>
</div>
<divid="div19">
   <divid="div20">艾萨克版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</div>
</body>
</html>
css文件：

@charset "utf-8";

body{
   width:auto;
   margin:0 auto;
   background-color:#06F;
}
#div0{
   width:790px;
   margin:0 auto;
   background-color:#FFF;
}
#div1{
   width:783px;
   height:150px;
   margin-bottom:-3px;
   margin:0 auto;
}
#div2{
   width:783px;
   height:33px;
   margin:0 auto;
   margin-top:-4px;
   text-align:center;
  background-image:url(web/images/button1.jpg);
  background-repeat:repeat-x;
  border-bottom-style:solid;
  border-bottom-color:#0CF;
   border-bottom-width:2px;
}
#div2 a{
   display:block;
   width:78px;
   height:33px;
   float:left;
   font-size:12px;
   margin:0px auto;
   line-height:30px;
}
#div2 a:link{
   color:#06C;
}
#div2 a:visited{
   color:#06C;
}
#div2 a:hover{
  background-image:url(web/images/button1_bg.jpg);
   background-color:#F00;
}
#div2 a:active{
   color:#06C;
}
#div3{
   width:200px;
   margin:0px auto;
   float:left;
   padding:0px;
   border-right-color:#09F;
  border-right-style:solid;
   border-right-width:3px;
}
#div3 #div4{
   height:47px;
   text-align:center;
  background-image:url(web/images/weather.jpg);
   line-height:47px;
   font-size:14px;
   color:#FFF;
}
#div3 #div5{
   width:200px;
   background-color:#03F;
   text-align:center;
   background-color:#FFF;
}
#div5 #div6{
   width:190px;
   text-align:center;
   font-size:12px;
   background-color:#09F;
}
#div3 #div7{
   background-color:#FFF;
   text-align:center;
}
#div7 #div8{
   width:190px;
   text-align:left;
   font-size:12px;
   color:#00F;
   background-color:#06C;
}
#div7 #div9{
   width:190px;
   background-color:#09F;
   text-align:center;
   color:#FFF;
   font-size:12px;
}
#div9 img{
   border:1px #FFF solid;
}
#div9 a{
   color:#FFF;
   text-decoration:none;
}
#div9 a:hover{
   color:#CF0;
  text-decoration:underline;
}
#div10{
   float:left;
   width:400px;
   margin:0 auto;
   background-color:#FFF;
   text-align:center;
}
#div10 #div11{
   margin:5px auto;
   width:390px;
}
#div11 a:visited{
   border-style:none;
}
#div11 img{
   border-style:none;
}
#div10 #div12{
   text-align:left;
   margin-left:0em;
}
#div13 a img{
   margin-left:0.5em;
   border:1px #0CF solid;
}
#div14 img{
   margin-left:1em;
}
#div14{
   font-size:12px;
   text-align:left;
}
#div14 a{
   margin-left:1em;
   text-decoration:none;
   color:#06F;
}
#div14 a:hover{
  text-decoration:underline;
   color:#000;
}
#div15{
   float:left;
   width:180px;
   margin:0 auto;
   border-left:3px #09Fsolid;
}
#div16{
   color:#00F;
   background-color:#099;
}
#div16 img{
   margin-left:0.5em;
   margin-right:0.5em;
}
#div16 span{
   font-size:12px;
}
#div17{
   background-color:#09F;
}
#div17 a img{
   margin-top:0.2em;
   margin-left:0.2em;
   border:1px #FFF solid;
}
#div18{
   background-color:#09F;
   border-bottom:1px #0CFdashed;
}
#div18 img{
   margin-left:1em;
}
#div18 a{
   margin-left:1em;
   text-decoration:none;
   font-size:14px;
   color:#fff;
}
#div18 a:hover{
   text-decoration:none;
   color:#000;
}
#div19{
   width:790px;
   height:20px;
   background-color:#FFF;
   margin:0 auto;
   border-top:2px #09Fsolid;
}
#div19 #div20{
   text-align:center;
   font-size:12px;
   background-color:#09F;
   height:15px;
   margin:5px 5px;
}
#div20 a{
   color:#FFF;
   text-decoration:none;
}
#div20 a:hover{
  text-decoration:underline;
}