猫眼电影

将这个页面分为两个部分。

上面

因为现在菜鸡的技术有限，有些样式还做不来55555，只能做一个很简洁的

然后导航栏有背景、字体颜色、高度、光标移上去时的样式……

body{
    color: #333333;
}
.main{
    line-height: 1.5;
}
.main .nav{
    height: 60px;
    background: #47464a;
    color: #999999;
    text-align: center;
    line-height: 60px;

}
.main .nav a{
    margin: 0 38px;
}
.main .nav a:hover{
    color: #ffffff;
}
.main .nav a.select{
    color: #ef4238;
}

下面

下面又分为三个部分

第一部分
第二部分

第三部分

第一部分

这三个区域的基本样式都是一样的，所以可以写一个区域，然后复制粘贴

设置样式

.main .container{
    width: 1120px;
    margin: 0 auto;
}
.main .container .choose-area{
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    line-height: 30px;
    padding: 0 30px;
}
.main .container .choose-area .choose-item .left{
    float: left;
    color: #999999;
}
.main .container .choose-area .choose-item{
    margin: 1em 0;
    border-bottom: 1px solid #e5e5e5;
}
.main .container .choose-area .choose-item.no-line{
    border: none;
}
.main .container .choose-area .choose-item .right{
    float: left;
    width: 1000px;
}
.main .container .choose-area .choose-item .right li{
    float: left;
    margin: 0 9px;
    padding: 0 6px;
}
.main .container .choose-area .choose-item .right li:hover{
    color: #ef4238;
}
.main .container .choose-area .choose-item .right li.select{
    background: #ef4238;
    color: #ffffff;
    /* css3圆角边框 */
    border-radius: 15px;
}

第二部分

第二部分的电影部分也是，每部影片的样式是基本相同的，所以主要写一个就可。

设置样式：

.main .container .movies .movie-item .poster a img{
    width: 180px;
    height: 220px;
}
.main .container .movies .movie-item:nth-child(6n){
    /* :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 */
    margin-right: 0;
}
.main .container .movies .movie-item .name{
    white-space: nowrap;
    overflow: hidden;
    padding: 0 5px;
    text-overflow: ellipsis;
    text-align: center;
}
.main .container .movies .movie-item .score{
    color: #ffb400;
    text-align: center;
    line-height: 2.5;
    font-style: italic;
}
.main .container .movies .movie-item .score::first-letter{
    /* 一个选择器 将评分的第一个数字变大 */
    font-size: 1.5em;
}

最后的分页

可能会出现高度坍塌的问题！！！要注意设置clearfix
这种页面分页样式很常见，可以单独写一个css文件，以后有这种分页页面的时候可以直接用

/* 多页面的通用样式 */
.pager{
    margin: 2em 0;
    text-align: center;
  

}
.pager a{
    border: 1px solid #d8d8d8;
    padding: 5px 10px;
    margin: 0 3px;
}
.pager a:hover{
    border: #ef4238;
}
.pager a.select{
    background: #ef4238;
    color: #ffffff;
    border: none;
}

然后我最后做出来的很粗糙，菜鸡555