web技术_css+div完成网页设计
2013-08-23 15:08
751 查看
素材下载（包含源码）
图一是给出欲完成的效果图：
图1
图2为自己完成的效果图：
图2
【源码】
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="style.css" rel="stylesheet"
type="text/css"/>
</head>
<!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>例2</title>
<link href="style.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div id="div0">
<div
id="div1">
<img
src="web/images/banner.jpg" />
</div>
<div id="div2">
<a
href="#">首页</a>
<a
href="#">新疆简介</a>
<a
href="#">风土人情</a>
<a
href="#">吃在新疆</a>
<a
href="#">路线选择</a>
<a
href="#">自助行</a>
<a
href="#">摄影摄像</a>
<a
href="#">游记精选</a>
<a
href="#">资源下载</a>
<a
href="#">雁过留声</a>
</div>
<div id="div3">
<div
id="div4">
天气预报
</div>
<div id="div5">
<div
id="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 />
<a
href="#"><a
href="#"><img
src="web/images/tuijian1.jpg"
/></a><br
/>
<a
href="#">喀纳斯河</a>
<a
href="#"><img
src="web/images/tuijian2.jpg"
/></a><br
/>
<a
href="#">布尔津</a>
<a href="#"><img
src="web/images/tuijian3.jpg"
/></a><br
/>
<a
href="#">天山之路</a>
</div>
</div>
</div>
<div id="div10">
<div
id="div11"><a
href="#"><img
src="web/images/ghost.jpg" alt="魔鬼城探秘"
/></a></div>
<div id="div12"><img
src="web/images/picture_h1.gif"
/></div>
<div id="div13">
<a
href="#"><img
src="web/images/beauty1.jpg"
/></a>
<a href="#"><img
src="web/images/beauty2.jpg"
/></a>
<a href="#"><img
src="web/images/beauty3.jpg"
/></a>
<a href="#"><img
src="web/images/beauty4.jpg"
/></a>
</div>
<div id="div12"><img
src="web/images/route_h1.gif"
/></div>
<div id="div14">
<img src="web/images/icon1.gif"
/><a
href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a><br
/>
</div>
</div>
<div
id="div15">
<div
id="div16">
<img src="web/images/icon2.gif"
/><span>新疆风光</span>
</div>
<div id="div17">
<a href="#"><img
src="web/images/tuijian1.jpg"
alt="点击查看大图"/></a><br
/>
<a href="#"><img
src="web/images/tuijian2.jpg"
alt="点击查看大图"/></a>
</div>
<div id="div16">
<img src="web/images/icon2.gif"
/><span>小吃推荐</span>
</div>
<div
id="div17"> </div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">17号抓饭</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">大盘鸡</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">五一夜市</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">水果</a></div>
<div
id="div17"> </div>
<div id="div16">
<img src="web/images/icon2.gif"
/><span>宾馆酒店</span>
</div>
<div
id="div17"> </div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">美丽华大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">海德大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">银都大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">鸿福大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">友好大酒店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">棉麻宾馆</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">电信宾馆</a></div>
</div>
</div>
<div
id="div19">
<div
id="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 #09F
solid;
}
#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 #0CF
dashed;
}
#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 #09F
solid;
}
#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;
}
图一是给出欲完成的效果图：
图1
图2为自己完成的效果图：
图2
【源码】
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="style.css" rel="stylesheet"
type="text/css"/>
</head>
<!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>例2</title>
<link href="style.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div id="div0">
<div
id="div1">
<img
src="web/images/banner.jpg" />
</div>
<div id="div2">
<a
href="#">首页</a>
<a
href="#">新疆简介</a>
<a
href="#">风土人情</a>
<a
href="#">吃在新疆</a>
<a
href="#">路线选择</a>
<a
href="#">自助行</a>
<a
href="#">摄影摄像</a>
<a
href="#">游记精选</a>
<a
href="#">资源下载</a>
<a
href="#">雁过留声</a>
</div>
<div id="div3">
<div
id="div4">
天气预报
</div>
<div id="div5">
<div
id="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 />
<a
href="#"><a
href="#"><img
src="web/images/tuijian1.jpg"
/></a><br
/>
<a
href="#">喀纳斯河</a>
<a
href="#"><img
src="web/images/tuijian2.jpg"
/></a><br
/>
<a
href="#">布尔津</a>
<a href="#"><img
src="web/images/tuijian3.jpg"
/></a><br
/>
<a
href="#">天山之路</a>
</div>
</div>
</div>
<div id="div10">
<div
id="div11"><a
href="#"><img
src="web/images/ghost.jpg" alt="魔鬼城探秘"
/></a></div>
<div id="div12"><img
src="web/images/picture_h1.gif"
/></div>
<div id="div13">
<a
href="#"><img
src="web/images/beauty1.jpg"
/></a>
<a href="#"><img
src="web/images/beauty2.jpg"
/></a>
<a href="#"><img
src="web/images/beauty3.jpg"
/></a>
<a href="#"><img
src="web/images/beauty4.jpg"
/></a>
</div>
<div id="div12"><img
src="web/images/route_h1.gif"
/></div>
<div id="div14">
<img src="web/images/icon1.gif"
/><a
href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a><br
/>
<img src="web/images/icon1.gif"
/><a
href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a><br
/>
</div>
</div>
<div
id="div15">
<div
id="div16">
<img src="web/images/icon2.gif"
/><span>新疆风光</span>
</div>
<div id="div17">
<a href="#"><img
src="web/images/tuijian1.jpg"
alt="点击查看大图"/></a><br
/>
<a href="#"><img
src="web/images/tuijian2.jpg"
alt="点击查看大图"/></a>
</div>
<div id="div16">
<img src="web/images/icon2.gif"
/><span>小吃推荐</span>
</div>
<div
id="div17"> </div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">17号抓饭</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">大盘鸡</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">五一夜市</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">水果</a></div>
<div
id="div17"> </div>
<div id="div16">
<img src="web/images/icon2.gif"
/><span>宾馆酒店</span>
</div>
<div
id="div17"> </div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">美丽华大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">海德大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">银都大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">鸿福大饭店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">友好大酒店</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">棉麻宾馆</a></div>
<div id="div18"><img
src="web/images/icon1.gif" /><a
href="#">电信宾馆</a></div>
</div>
</div>
<div
id="div19">
<div
id="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 #09F
solid;
}
#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 #0CF
dashed;
}
#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 #09F
solid;
}
#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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【网上收藏】Web 2.0网页设计DIV+CSS必备资源
- Web 2.0网页设计DIV+CSS必备资源
- css+div网页设计（三）--与多种技术的混合应用
- Think & Design in CSS, 再谈web 2.0时代的网页设计
- 基于CSS的DIV网页设计 - 使用固定层方法设计网页
- div+css - 工具 - Microsoft Typography微软印刷技术 - WEFT 3网页嵌入字体3 - Wizard向导 - Fonts to embed待嵌入字体
- 利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
- 手机web——自适应网页设计（html/css控制）http://mobile.51cto.com/ahot-409516.htm
- css+div网页设计（二）--布局与定位
- 网页设计应该熟知的CSS 3.0技术
- 【转】手机web——自适应网页设计（html/css控制）
- 手机web——自适应网页设计（html/css控制） - 51CTO.COM
- Web设计之网页布局CSS技巧
- 手机web——自适应网页设计（html/css控制）
- div+css - 工具 - 微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 向导
- 网页设计-[CSS+DIV设计实例：超酷的竖排导航栏 ]
- 手机web——自适应网页设计（html/css控制）
- 手机web——自适应网页设计（html/css控制）
- css+div网页设计（一）--基础知识
- CSS技术在网页设计中的运用