项目实战6：豆瓣首页-豆瓣电影

电影区域分为左栏，主区域以及右栏，左栏有标题和菜单，标题和之前写过的样式相同

                    

                        

                            电影
                        
                    

首先是left-menu区域，不考虑任何东西的情况下，可能会直接写多个a元素，

菜单区域用a元素的常见问题

之后将a元素设置成块盒（为了sha元素独占一行），但之前写过a元素的统一样式，鼠标悬浮在a元素上时会有背景颜色，此时会显现出这样的效果（a元素变为块盒引起的）

整个块盒背景颜色均变颜色，影响视觉效果，故这里最好用ul>li元素将a元素包起来，此时就可达到想要的效果

             

                        
影讯&购票
                        
选电影
                        
Lorem.
                        
Dolores.
                        
Quas.
                        
Mollitia.
                        
Quibusdam?
                        
Amet.
                        
Doloribus?
                        
Architecto.
                        
Atque.
                    

接着是给菜单里的某个a元素后面加上样式

在特定a元素后面加上伪类选择器即可，设置其绝对定位，宽度高度，背景图片等；

.left-menu a.new::after{
    position: absolute;
    content: "";
    background: url(../imgs/new_menu.gif);
    width: 17px;
    height: 7px;
    right: -20px;
    top:0;
}

左边栏效果就做出来啦：

右边栏，简单菜单

设置类似于如下效果的菜单：

这里html结构就用ul>li吧

           

                        
爱情
                        
喜剧
                        
剧情
                        
Lorem.
                        
Sint.
                        
Dolores.
                        
Provident.
                        
Esse.
                        
Libero.
                        
Excepturi.
                        
Veritatis.
                        
Molestiae.
                        
Itaque!
                        
Mollitia!
                        
Praesentium?
                        
Officia?
                        
Explicabo!
                        
Ab?
                        
Optio.
                        
Voluptates!
                        
Omnis.
                        
Ullam!
                        
Cum?
                    

我们可以通过设置每个li元素的宽高来实现分散的效果，当遇到文字太长时，如果没有设置高度，li元素就会被撑开，就达不到对齐的效果

这时只要通过设置宽高，再设置overflow：hidden即可解决问题

制作有序菜单

首先先写ul>li，简单制作出其结构

               

                        

                            风中有朵雨做的云
                        
                        
飞驰人生
                        
Lorem ipsum dolor sit.
                        
Dolorum atque consequuntur architecto.
                        
At laborum debitis asperiores?
                        
Earum voluptates dolorem magnam.
                        
Deserunt maxime totam corporis!
                        
Maiores dolores saepe nulla.
                        
A assumenda dolorum voluptas.
                        
Ratione modi quod odit.
                    

通过设置li元素样式制造出有序效果

.order-movie-list li{
    /* 使li元素又副盒子，盒子里装有序数字 */
    list-style-type: decimal;
    /* 副盒子位于li元素里面 */
    list-style-position: inside;
}

设置数字与内容之间的距离。可设置a元素的margin-left

.order-movie-list li {
    margin-left: 5px;
}

再设置li元素的下边框，margin-bottom等

以下是右栏效果

图片横向排列的方法 

中间部分的main图片同之前相同的处理方式，记得最后一个图片margin-right为0；定宽之后设置li元素居中，用text-align：center 

.movie-area .item-list li{
    width: 100px;
    margin-right: 38px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 13px;
}
.movie-area .item-list li:nth-child(4n){
    margin: 0;
}
.movie-area .item-list li .words{
    margin-top: 0;
    margin-bottom: 4px;
}

名字过长处理方式 

电影名字一般的处理方式是不换行+溢出隐藏+溢出用原点代替

movie-area .item-list li .words a{
    display: inline-block;
    max-width: 100%;
    /* 空白的处理方式是不换行 */
    white-space: nowrap;
    overflow: hidden;
    /* 溢出用原点代替 */
    text-overflow: ellipsis;
}

雪碧图的应用

接下来就该制作电影名字下面的评分了

在这里我们就用类名为star的的div盒子来表示评分，这个div盒子里包含两个span元素，分别为评分星星以及评分数字，二者横向排列，故使用span（行级元素）

评分星星用背景图来实现，准确来说这里使用的是雪碧图，

通过调整这张图片的位置实现评分不同，评分星星不同的效果，可以在common.css上设置评分的通用样式：类名分别为star50,star45,star40等等，遇到评分相同时，直接引用类名即可，省去了很多繁琐的css代码。

.star-bg{
    background: url(../imgs/评分.png) no-repeat left top/100%;
    display: inline-block;
    width: 55px;
    height: 11px;
}
.star50{
    background-position: 0 0;
}
.star45{
    background-position: 0 -11px;
}
.star40{
    background-position: 0 -22px;
}
.star40{
    background-position: 0 -33px;
}
.star35{
    background-position: 0 -44px;
}
.star30{
    background-position: 0 -55px;
}
.star25{
    background-position: 0 -66px;
}
.star20{
    background-position: 0 -77px;
}
.star15{
    background-position: 0 -88px;
}
.star10{
    background-position: 0 -99px;
}
.star05{
    background-position: 0 -110px;
}

评分数字的类名设置为number即可，直接在span中写数字表示评分数字。

之后再设置字体样式，字体大小，颜色，外边距等

.star .number{
    font-size: 12px;
    margin-left: 7px;
    color: #e09015;
}

       
               8.9
       
 

 这样效果就可以显现出来了

 

紧接着就是下方的“选座购票按钮”了，在这里同样用类名为func的div盒子表示，里面包含一个a元素，给a元素设置一个类名为block-link的类名，给block-link设置样式即可。

.movie-area .func{
    margin: top 7px;
}
.movie-area .func .block-link{
    background: #1c8bd0;
    color: #fff;
}
.movie-area .func .block-link:hover{
    background: #047fcb;
}

 

到此，电影区域就已经制作完成了