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

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

                    <div class="title">
                        <h2>
                            <a href="" class="dark-color">电影</a>
                        </h2>
                    </div>

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

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

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

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

             <ul class="left-menu">
                        <li><a class="new" href="">影讯&购票</a></li>
                        <li><a href="">选电影</a></li>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Dolores.</a></li>
                        <li><a href="">Quas.</a></li>
                        <li><a href="">Mollitia.</a></li>
                        <li><a href="">Quibusdam?</a></li>
                        <li><a href="">Amet.</a></li>
                        <li><a href="">Doloribus?</a></li>
                        <li><a href="">Architecto.</a></li>
                        <li><a href="">Atque.</a></li>
                    </ul>

接着是给菜单里的某个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吧

           <ul class="right-menu-list clearfix">
                        <li><a href="">爱情</a></li>
                        <li><a href="">喜剧</a></li>
                        <li><a href="">剧情</a></li>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Sint.</a></li>
                        <li><a href="">Dolores.</a></li>
                        <li><a href="">Provident.</a></li>
                        <li><a href="">Esse.</a></li>
                        <li><a href="">Libero.</a></li>
                        <li><a href="">Excepturi.</a></li>
                        <li><a href="">Veritatis.</a></li>
                        <li><a href="">Molestiae.</a></li>
                        <li><a href="">Itaque!</a></li>
                        <li><a href="">Mollitia!</a></li>
                        <li><a href="">Praesentium?</a></li>
                        <li><a href="">Officia?</a></li>
                        <li><a href="">Explicabo!</a></li>
                        <li><a href="">Ab?</a></li>
                        <li><a href="">Optio.</a></li>
                        <li><a href="">Voluptates!</a></li>
                        <li><a href="">Omnis.</a></li>
                        <li><a href="">Ullam!</a></li>
                        <li><a href="">Cum?</a></li>
                    </ul>

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

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

制作有序菜单

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

               <ul class="order-movie-list">
                        <li>
                            <a href="">风中有朵雨做的云</a>
                        </li>
                        <li><a href="">飞驰人生</a></li>
                        <li><a href="">Lorem ipsum dolor sit.</a></li>
                        <li><a href="">Dolorum atque consequuntur architecto.</a></li>
                        <li><a href="">At laborum debitis asperiores?</a></li>
                        <li><a href="">Earum voluptates dolorem magnam.</a></li>
                        <li><a href="">Deserunt maxime totam corporis!</a></li>
                        <li><a href="">Maiores dolores saepe nulla.</a></li>
                        <li><a href="">A assumenda dolorum voluptas.</a></li>
                        <li><a href="">Ratione modi quod odit.</a></li>
                    </ul>

通过设置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;
}

<div class="star">
       <span class="star-bg star45"></span
       <span class="number">
               8.9
       </span>
 </div>

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

 

紧接着就是下方的“选座购票按钮”了，在这里同样用类名为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;
}

 

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