布局練習(xí)一: 豆瓣排行榜.
紅色部分, 用ul, li 標(biāo)簽
之后對(duì)每一個(gè)li標(biāo)簽劃分. 藍(lán)色為div標(biāo)簽, 每一個(gè)li標(biāo)簽里劃分4個(gè)div
然后依次填充.
值得注意的一些標(biāo)簽和說(shuō)明:
? ? 1:?偽標(biāo)簽:nth-type-nth 和 nth-child的區(qū)別. 前者是類型是篩選; 后者是最近標(biāo)簽的子標(biāo)簽才有效, 如果在子標(biāo)簽中出現(xiàn)了其他的類型的標(biāo)簽, 則nth-type偽標(biāo)簽會(huì)繞過(guò)該標(biāo)簽.
? ? 2: 如第一個(gè)li標(biāo)簽的高度height和line-height不等時(shí)會(huì)出現(xiàn), overflow現(xiàn)象.
? ? 3:
?????ul li div span{
????????????display: inline-block;
????????????width: 30px; height: 20px;
????????????background: url(./imgs/star.png) no-repeat;
????????????background-position-y: -76px;
}? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0; margin: 0;
border: none; list-style: none;
}
ul{
width: 600px;
margin: auto;
border-radius: 10px;
overflow: hidden;
}
img {
height: 80px; vertical-align: middle;
}
ul li:first-child{
background-color: #00FFFF;
height: 45px;
line-height: 45px;
}
ul li{
height: 90px; line-height: 90px;
}
ul li:nth-of-type(even){
background-color: lightgray;
}
ul li div{
float: left;
text-align: center;
}
ul li div:nth-child(1){
width: 120px;
}
ul li div:nth-child(2){
width: 250px;
}
ul li div:nth-child(3){
width: 100px;
}
ul li div:nth-child(4){
width: 130px;
}
ul li div span{
display: inline-block;
width: 30px; height: 20px;
background: url(./imgs/star.png) no-repeat;
background-position-y: -76px;
}
</style>
<body>
<ul>
<li>
<div>海報(bào)</div>
<div>IMDB電影排行</div>
<div>評(píng)分</div>
<div>年份</div>
</li>
<li>
<div><img src="imgs/01.jpg"></div>
<div> NO.1《肖申克的救贖》</div>
<div><span></span>9.2</div>
<div>1994</div>
</li>
<li>
<div><img src="imgs/02.jpg"></div>
<div>NO.2教父</div>
<div><span></span>9.1</div>
<div>1972</div>
</li>
<li>
<div><img src="imgs/03.jpg"></div>
<div>NO.3教父2</div>
<div><span></span>9.0</div>
<div>1974</div>
</li>
<li>
<div><img src="imgs/04.jpg"></div>
<div>N0.4黑暗騎士</div>
<div><span></span>8.9</div>
<div>1957</div>
</li>
<li>
<div><img src="imgs/05.jpg"></div>
<div>NO.5十二怒漢</div>
<div><span></span>8.9</div>
<div>1957</div>
</li>
<li>
<div><img src="imgs/06.jpg"></div>
<div>NO.6希特勒的名單</div>
<div><span></span>8.9</div>
<div>2003</div>
</li>
<li>
<div><img src="imgs/07.jpg"></div>
<div>NO.7指環(huán)王</div>
<div><span></span>8.9</div>
<div>1993</div>
</li>
<li>
<div><img src="imgs/08.jpg"></div>
<div>NO.8低俗小說(shuō)</div>
<div><span></span>8.9</div>
<div>1994</div>
</li>
<li>
<div><img src="imgs/09.jpg"></div>
<div>NO.9黃金三鏢客</div>
<div><span></span>8.8</div>
<div>1966</div>
</li>
<li>
<div><img src="imgs/10.jpg"></div>
<div>NO.10指環(huán)王歸來(lái)</div>
<div><span></span>8.8</div>
<div>2001</div>
</li>
</ul>
</body>
</html>
