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

最新推荐文章于 2020-08-01 20:41:13 发布

ORACLE_FANS

最新推荐文章于 2020-08-01 20:41:13 发布

阅读量1.4k

点赞数 1

分类专栏： HTML学习文章标签： HTML

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

1.优酷盒子模型实现

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

(1)实现方式一:

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

实现代码如下:

//youkubox.html

[html] view plain copy print ?

<!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 class="divout">
<div class="divmid">
<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>
<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><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><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>

<!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

[css] view plain copy print ?

/*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;
}

/*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

[html] view plain copy print ?

<!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 class="divout">
<div class="divmid">
<span>优酷牛人<a href="#">更多牛人</a></span>
<ul class="faceul">
<li><img class="imgbig" src="images/p1.jpg"/><br/><a href="#">michaelni..</a>
<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>明星空间<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>优酷公益<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>

<!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;

使代码更简洁。

ORACLE_FANS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
div+css实战演练---优酷盒子模型和新浪首页面布局效果

div+css实战演练---优酷盒子模型和新浪首页面布局效果说明:为了加强div+css的训练，这里列举了两个实例(未涉及asp、php内容)，优酷盒子模型和搜狐首页面的布局。实现方式因人而异，各有不同。如果对div+css概念和盒子模型觉得理解起来困难，请参见另一篇关于这部分理论的实例讲解部分：《div+css入门与实战演练》。1.优酷盒子模型实现优酷盒子模型对应的原
复制链接

扫一扫

专栏目录