布局练习:豆瓣排行榜

布局练习一: 豆瓣排行榜.

红色部分, 用ul, li 标签

之后对每一个li标签划分. 蓝色为div标签, 每一个li标签里划分4个div

然后依次填充.

值得注意的一些标签和说明:

    1: 伪标签:nth-type-nth 和 nth-child的区别. 前者是类型是筛选; 后者是最近标签的子标签才有效, 如果在子标签中出现了其他的类型的标签, 则nth-type伪标签会绕过该标签.

    2: 如第一个li标签的高度height和line-height不等时会出现, overflow现象.

    3:

     ul li div span{

            display: inline-block;

            width: 30px; height: 20px;

            background: url(./imgs/star.png) no-repeat;

            background-position-y: -76px;

}    

• 海报
  IMDB电影排行
  评分
  年份

• 
  NO.1《肖申克的救赎》
  9.2
  1994

• 
  NO.2教父
  9.1
  1972

• 
  NO.3教父2
  9.0
  1974

• 
  N0.4黑暗骑士
  8.9
  1957

• 
  NO.5十二怒汉
  8.9
  1957

• 
  NO.6希特勒的名单
  8.9
  2003

• 
  NO.7指环王
  8.9
  1993

• 
  NO.8低俗小说
  8.9
  1994

• 
  NO.9黄金三镖客
  8.8
  1966

• 
  NO.10指环王归来
  8.8
  2001