學習浮動和盒模型之后練習制作天貓界面簡易框架
原網頁：
要求：實作布局，實作簡易框架
代碼實作：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height:40px;
width:100%;
}
.box-top{
height:40px;
width:1300px;
background:#ccccff;
margin:0 auto;
}
.box2{
width:1300px;
height:80px;
margin:0 auto;
padding-top:50px;
background:#ccffcc;
}
.box-input{
width:300px;
height:30px;
margin:0 0 0 500px;
font-size:18px;
}
.box3{
width:1300px;
height:500px;
margin:0 auto 100px;
background:#cc66ff;
}
.box-ul{
width:205px;
height:500px;
float:left;
background:rgba(226,52,222,0.6);
}
.box4{
height:330px;
width:1300px;
background:#99ccff;
margin:0 auto;
}
.dis-a{
width:645px;
height:330px;
float:left;
}
.dis-1{
width:290px;
height:330px;
float:left;
margin-right:10px;
background:#ff6666;
}
.dis-2{
width:345px;
height:160px;
float:left;
background:#ff6666;
margin-bottom:10px;
}
.dis-3{
margin:0;
}
.dis-b{
float:right;
}
</style>
</head>
<body>
<!-- 天貓官網首頁布局 -->
<!-- 頂部導航欄區域 -->
<div class="box1">
<div class="box-top">頂部導航欄區域</div>
</div>
<!-- 頂部導航欄區域end -->
<!-- 搜索框區域 -->
<div class="box2">
<form action="">
<input type="text" class="box-input" placeholder="搜索框區域" />
</form>
</div>
<!-- 搜索框區域end -->
<!-- 輪播圖區域 -->
<div class="box3">
<span>輪播圖區域</span>
<div class="box-ul">輪播圖遮蓋擴展串列</div>
</div>
<!-- 輪播圖區域end -->
<!-- 熱賣廣告 -->
<div class="box4">
<div class="dis-a">
<div class="dis-1">熱賣廣告</div>
<div class="dis-2">熱賣廣告</div>
<div class="dis-2 dis-3">熱賣廣告</div>
</div>
<div class="dis-a dis-b">
<div class="dis-1">熱賣廣告</div>
<div class="dis-2">熱賣廣告</div>
<div class="dis-2 dis-3">熱賣廣告</div>
</div>
</div>
<!-- 熱賣廣告end -->
</body>
</html>
實作效果：
總結：這里需要用到外間距（margin:）內間距（padding:）和左右浮動對齊（float:left/right），也需要對css（層疊樣式表的理解），
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/211680.html
標籤：python