div+css实战演练---优酷盒子模型和搜狐首页面布局效果

来源：互联网发布：中国历年石油进口数据编辑：程序博客网时间：2024/04/29 21:35

div+css实战演练---优酷盒子模型和新浪首页面布局效果

说明:为了加强div+css的训练，这里列举了两个实例(未涉及asp、php内容)，优酷盒子模型和搜狐首页面的布局。实现方式因人而异，各有不同。

如果对div+css概念和盒子模型觉得理解起来困难，请参见另一篇关于这部分理论的实例讲解部分：《div+css入门与实战演练》。

1.优酷盒子模型实现

优酷盒子模型对应的原图如下:

(1)实现方式一:

盒子模型分析如下图所示:

实现代码如下:

//youkubox.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 优酷盒子模型(体验版) </title> </head><link rel="stylesheet" type="text/css" href="youkubox.css"> <body> <!--最外层div-->  <div class="divout">  <!--这是第一个单元-->  <div class="divmid">  <!--span标题框-->  <span>优酷牛人<span><a href="#">更多牛人</a></span></span>   <!--图片和信息列表-->  <ul class="faceul">  <li><div class="divinner"><img class="imgbig" src="images/p1.jpg"/><br/><a href="#">michaelni..</a><!--最内层div-->  <img class="imgsmall" src="images/s1.jpg"/></div></li>  <li><div class="divinner"><img class="imgbig" src="images/p2.jpg"/><br/><a href="#">小演矿</a>  <img class="imgsmall" src="images/s1.jpg"/></div></li>  <li><div class="divinner"><img  class="imgbig" src="images/p3.jpg"/><br/><a href="#">道聴途説</a>  <img class="imgsmall" src="images/s1.jpg"/></div></li>  </ul>  </div>  <!--这是第二个单元-->  <div class="divmid">  <!--span标题框-->  <span>明星空间<span><a href="#">更多空间</a></span></span>    <!--图片和信息列表-->  <ul class="faceul">  <li><div class="divinner"><img class="imgbig" src="images/p4.jpg"/><br/><a href="#">爱心月</a>  <img class="imgsmall" src="images/s3.jpg"/></div></li>  <li><div class="divinner"><img class="imgbig" src="images/p5.jpg"/><br/><a href="#">【城堡】</a>  <img class="imgsmall" src="images/s3.jpg"/></div></li>  <li><div class="divinner"><img class="imgbig" src="images/p6.jpg"/><br/><a href="#">卢正雨</a>  <img class="imgsmall" src="images/s2.jpg"/></div></li>  </ul>  </div>  <!--这是第三个单元-->  <div class="divmid">  <!--span标题框-->  <span>优酷公益<span><a href="#">更多公益网站</a></span></span>   <!--图片和信息列表-->  <ul class="faceul">  <li><div class="divinner"><img class="imgbig" src="images/p7.jpg"/><br/><a href="#">扶贫基金会</a></div></li>  <li><div class="divinner"><img class="imgbig" src="images/p8.jpg"/><br/><a href="#">李冰冰LOVE</a></div></li>  <li><div class="divinner"><img class="imgbig" src="images/p9.jpg"/><br/><a href="#">生态中国</a></div></li>  </ul>  </div>  </div> </body></html>

//youkubox.css

/*html页面*/ a{color:#0829AD;font-size:15px;text-decoration:none;}/*最外层div*/.divout{width:410px;height:300px;/*border:2px solid red;*/}/*内层div*/.divmid {width:390px;height:90px;margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;border:1px solid pink;}.divmid  span{height:15px;font-size:15px;font-weight:bold;color:black;margin-top:2px;margin-right:5px;/*border:1px solid pink;*/}.divmid  span span{font-size:15px;height:15px;font-weight:normal;margin-top:2px;padding-right:2px;float:right;text-align:right;/*border:1px solid pink;*/}/*内层列表 横向排列*/.faceul{height:60px;width:390px;margin-left:3px;padding-left:5px;margin-top:5px;}.faceul li{list-style-type:none;float:left;width:120px;margin-left:5px;margin-top:5px;padding-left:3px;}/*最内层div*/.divinner{height:50px;width:115px;margin-left:0px;padding-left:0px;margin-top:2px;margin-bottom:5px;/*border:1px solid blue;*/}/*最内层大图片*/.imgbig{height:30px;width:45px;margin-left:10px;margin-bottom:2px;}/*最内层小图片*/.imgsmall{height:13px;width:15px;margin-left:0px;margin-right:0px;margin-bottom:2px;}

对应的运行效果图(含边框的)如下所示:

对应的运行效果图(无边框的)如下所示:

(2)实现方式二

优酷盒子模型图解如下:

实现代码如下:

//youkubox2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 优酷盒子模型(简洁版) </title> </head><link rel="stylesheet" type="text/css" href="youkubox2.css"> <body> <!--外层div-->  <div class="divout">  <!--这是第一个单元-->  <div class="divmid">  <!--span标题框-->  <span>优酷牛人<a href="#">更多牛人</a></span>   <!--图片和信息列表-->  <ul class="faceul">  <li><img class="imgbig" src="images/p1.jpg"/><br/><a href="#">michaelni..</a><!--内层div-->  <img class="imgsmall" src="images/s1.jpg"/></li>  <li><img class="imgbig" src="images/p2.jpg"/><br/><a href="#">小演矿</a>  <img class="imgsmall" src="images/s1.jpg"/></li>  <li><img  class="imgbig" src="images/p3.jpg"/><br/><a href="#">道聴途説</a>  <img class="imgsmall" src="images/s1.jpg"/></li>  </ul>  </div>  <!--这是第二个单元-->  <div class="divmid">  <!--span标题框-->  <span>明星空间<a href="#">更多空间</a></span>    <!--图片和信息列表-->  <ul class="faceul">  <li><img class="imgbig" src="images/p4.jpg"/><br/><a href="#">爱心月</a>  <img class="imgsmall" src="images/s3.jpg"/></li>  <li><img class="imgbig" src="images/p5.jpg"/><br/><a href="#">【城堡】</a>  <img class="imgsmall" src="images/s3.jpg"/></li>  <li><img class="imgbig" src="images/p6.jpg"/><br/><a href="#">卢正雨</a>  <img class="imgsmall" src="images/s2.jpg"/></li>  </ul>  </div>  <!--这是第三个单元-->  <div class="divmid">  <!--span标题框-->  <span>优酷公益<a href="#">更多公益网站</a></span>   <!--图片和信息列表-->  <ul class="faceul">  <li><img class="imgbig" src="images/p7.jpg"/><br/><a href="#">扶贫基金会</a></li>  <li><img class="imgbig" src="images/p8.jpg"/><br/><a href="#">李冰冰LOVE</a></li>  <li><img class="imgbig" src="images/p9.jpg"/><br/><a href="#">生态中国</a></li>  </ul>  </div>  </div> </body></html>

//youkubox2.css

/*html页面*/ a{color:#0829AD;font-size:15px;text-decoration:none;}/*外层div*/.divout{width:405px;height:295px;/*border:2px solid red;*/}/*内层div*/.divmid {width:390px;height:90px;margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;padding:0px;border:1px solid pink;}.divmid  span{height:15px;font-size:15px;font-weight:bold;color:black;margin-top:2px;margin-right:5px;/*border:1px solid pink;*/}.divmid  span a{font-size:15px;height:13px;font-weight:normal;margin-top:2px;padding-right:2px;float:right;/*border:1px solid pink;*/}/*内层列表 横向排列*/.faceul{height:64px;width:380px;margin-left:0px;padding-left:5px;margin-top:3px;margin-bottom:2px;/*border:1px solid blue;*/}.faceul li{width:110px;height:58px;list-style-type:none;float:left;margin-left:12px;margin-top:2px;margin-bottom:2px;padding-left:0px;/*border:1px solid red;*/}.faceul li a{list-style-type:none;float:left;margin-left:0px;margin-top:5px;padding-left:0px;}/*最内层大图片*/.imgbig{height:30px;width:45px;margin-left:15px;margin-bottom:2px;}/*最内层小图片*/.imgsmall{height:13px;width:15px;margin-left:4px;margin-right:0px;margin-top:4px;margin-bottom:2px;}

运行效果(含边框的)如下图所示:

运行效果(无边框的)如下图所示:

2.搜狐首页面布局效果

说明:因为页面布局的方法大同小异，这里仅以搜狐首页面上半部分为介绍,其余部分未作介绍。

搜狐首页面上半部分原图如下所示:

实现方式图解如下:

实现代码如下:(说明：由于在实际编写时，经验不足，无法调整好一些对齐、边距，因此代码和布局图所示有所改动,实现方法应该存在更简便的)

//sohu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>搜狐-中国最大的门户网站 </title>  <link rel="stylesheet" type="text/css" href="sohu.css" /> </head> <body>  <!--top部分-->  <div class="divtop">  <span ><font id="redfont">我的</font><font>搜狐</font></span>  <span><img src="images/logosmall.jpg"/>通信证账号/手机</span>  <span><form><input type="text"/></form></span>  <span><form><input type="image" src="images/submit.jpg"/></form></span>  <span ><a href="#">注册</a><a href="#">邮件</a><a href="#">博客</a><a href="#">相册</a><a href="#">说两句</a><a href="#">应用</a></span>  <span id="rightspan"><a href="#"><font>搜狐微博</font></a><a href="#">微活动:抢楼送礼 iPad3等你拿!</a></span>  </div>  <!--中间部分mid-->  <div class="divmid">  <div class="middiv1"><img src="images/logo.jpg"></div>      <div class="middiv2">   <span id="sep1">   <a href="#"><font id="redfont">搜狗</font></a>   <a href="#">输入法</a>   <a href="#">浏览器</a>   <a href="#">地图</a>   <a href="#"><font id="redfont">微博</font></a>   <a href="#">博客</a>   <a href="#">白社会</a>   <a href="#"><font id="redfont">BBS</font></a>   <a href="#">校友录</a>   <a href="#"><font id="redfont">视频</font></a>   <a href="#">博客</a>   <a href="#">游戏</a>   <a href="#">天龙</a>   <a href="#"><font id="redfont">鹿鼎记</font></a>   <a href="#">手机搜狐网</a>   <a href="#">听书</a>   <a href="#">手机游戏</a>   <a href="#">e购房</a>   </span>   <span >   <a href="#"><font id="redfont">新闻</font></a>   <a href="#">图片</a>   <a href="#">评论</a>   <a href="#">我说两句</a>   <a href="#">军事</a>   <a href="#">公益</a>   <a href="#"><font id="redfont">体育</font></a>   <a href="#">NBA</a>   <a href="#">中超</a>   <a href="#">S</a>   <a href="#">财经</a>   <a href="#">理财</a>   <a href="#">股票</a>   <a href="#">基金</a>   <a href="#">IT</a>   <a href="#">数码</a>   <a href="#">手机</a>   <a href="#">汽车</a>   <a href="#">购车</a>   <a href="#">房产</a>   <a href="#">二手房</a>   <a href="#">家居</a>   <a href="#"><font id="redfont">娱乐</font></a>   <a href="#">韩娱</a>   <a href="#">V</a>   <a href="#">音乐</a>   </span>  <span id="sep2">   <a href="#">天气</a>   <a href="#">男人</a>   <a href="#"><font id="redfont">女人</font></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="#"><font id="redfont">文化</font></a>   <a href="#">读书</a>   <a href="#">原创</a>   <a href="#">教育</a>   <a href="#">出国</a>   <a href="#"><font id="redfont">商学院</font></a>   <a href="#">彩票</a>   <a href="#">星座</a>   <a href="#">上海</a>   <a href="#">广东</a>   </span>  </div></div>  <!--底部btm-->  <div class="divbtm"><div class="btmdiv1">新闻组1</div><div class="btmdiv2">新闻组2 </div><div class="btmdiv3">新闻组3</div><div class="btmdiv4"><img class="imgmid" src="images/right1.jpg"></div>  </div> </body></html>

//sohu.css

body{margin:0 auto;width:980px;height:320px;/*border:3px solid red;*/font-size:12px;}/*top顶层div*/.divtop{width:970px;height:22px;margin-left:2px;margin-right:2px;margin-top:5px;/*border:2px solid black;*/background-color:#F5FAFF;}.divtop a{text-decoration:none;color:black;margin-left:8px;margin-top:2px;}.divtop font{text-decoration:none;color:black;font-weight:bold;margin-top:2px;margin-bottom:2px;}#redfont{color:#BA1D16;}.divtop img{margin-left:2px;margin-bottom:0px;height:20px;float:left;}.divtop form{display:inline;height:20px;margin-top:0px;margin-bottom:2px;}.divtop span{height:20px;margin-top:2px;margin-bottom:2px;float:left;text-align:center;border:1px #EEF8FA;}#rightspan{  height:20px;  float:right;  margin-top:2px;  margin-bottom:2px;  margin-right:5px;}/*mid中间div*/.divmid{width:965px;height:68px;margin-left:2px;margin-right:2px;margin-top:2px;/*border:3px solid red;*/border:1px solid pink;}.divmid a{text-decoration:none;color:black;margin-left:1px;}/*中间左边div*/.middiv1{width:143px;float:left;margin-left:0px;margin-right:0px;/*border:2px solid black;*/}/*中间右边div*/.middiv2{height:68px;margin-left:144px;margin-right:0px;/*border:2px solid blue;*/background-color:#FFFCD9;}.middiv2 span{/*border:3px solid blue;*/float:left;background-color:#FFFCD9;margin-left:0px;margin-top:7px;}.middiv2 span a{margin-left:0px;margin-right:2px;}#sep1{background-color:#FEE990;}#sep1 a{margin-left:0px;margin-right:8px;}#sep2{background-color:#FFFCD9;}#sep2 a{margin-left:0px;margin-right:7px;}/*btm底部div*/.divbtm{width:965px;height:210px;margin-left:2px;margin-right:2px;margin-top:2px;margin-bottom:2px;/*border:2px solid gray;*/border:1px solid pink;float:left;}/*底部第1个div*/.btmdiv1{width:140px;height:205px;margin-left:2px;border:1px solid green;float:left;}/*底部第2个div*/.btmdiv2{width:460px;height:205px;margin-left:2px;border:1px solid green;float:left;}/*底部第3个div*/.btmdiv3{width:180px;height:205px;margin-left:2px;border:1px solid green;float:left;}/*底部第4个div*/.btmdiv4{width:165px;height:205px;margin-right:2px;border:1px solid green;float:right;}/*底层大图片*/.imgbig{}/*底层小图片*/.imgmid{height:185px;width:160px;margin:8px 4px 5px 4px;}

运行效果(含边框的)如下图所示:

运行效果(无边框的)如下图所示:

总结:

1.在设计页面布局时，应该先做个草稿图形，划分好布局的元素，div、span等。

2.在编写css文件时，遵循先整体页面，然后div，最后是小元素。

3.页面元素的定位和边距这些东西还是有些难度，个别时候不好调整，要加强练习。

后续更正:

关于外边距margin 属性，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left。

因此可以将上述代码中设置边距的代码

margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;

按照上述规则更改为:

margin:5px 5px 5px 5px;

使代码更简洁。