div+css實戰演練---優酷盒子模型和新浪首頁面佈局效果

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;

使代碼更簡潔。

div+css實戰演練---優酷盒子模型和新浪首頁面佈局效果

《Python進階》學習筆記

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

ORACLE 表分區詳解

v$sql , v$sqlarea，v$sqltext 區別

Oracle開發之：窗口函數

分析函數1之語法

分析函數2之(Top/Bottom N、First/Last、NTile)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結