项目实战5：豆瓣时间和视频

这一部分可分为左栏（aside-left）和main ,由于之前已经设置过aside-left相关元素，所以直接引用类名即可

<div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <h2 class="title">
                        <a href="">豆瓣时间</a>
                    </h2>
                </div>
                <div class="main"></div>
            </div>
        </div>

这里的豆瓣时间是一个a元素，之前已经统一给a元素设置过字体颜色，如果此时只给title设置颜色，a元素的颜色并不会继承父元素，故要想让这里的a元素改变颜色，只要再重新设置一个类名dark-color即可，将其类名加到a元素上

<a class="dark-color" href="">豆瓣时间</a>

.dark-color{
    color: #000;
}

 此时效果就显现出来啦，而且鼠标指上去的效果也没变喔！

        

紧接着就是旁边的热点内容，这个样式已经在上篇做过了，故在这里直接复制粘贴即可

 <div class="section-title">
                        <h2 class="title">热点内容</h2>
                        <span class="link">
                            <a href="">更多</a>
                        </span>
                    </div>

接下来就是图片区域，图片区域用ul>li来构造，图片区域里又有img和words，words又包含a元素和span元素

具体结构如下：

                    <li>
                                <div class="img">
                                    <a href="">
                                        <img src="./imgs/cover1.png" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        邪典电影本纪——亚文化电影50讲
                                    </a>
                                    <span>
                                        图文专栏
                                    </span>
                                </div>
                            </li>

把图片按一定数量横向排列方法

设置ul通用样式：给ul加上item-list类名，再统一设置

.item-list li{
    display: inline-block;
    vertical-align: top;
    line-height: 1.5;
}
.item-list li .img img{
    width: 100%;
    display: block;
}

根据页面主区域设置宽度，注意一定要将ul设置为行块盒

接下来的视频区域和时间区域大致相同，在这里我就说几个重要的tip吧

重置鼠标悬浮在a元素上的颜色

.video-main .section-title a:hover{
    background-color: initial;
}

图片横向排列时，去除每行末尾图片的margin-right 

/* 一行有三张图片，将每行最后一张图片右外边距设为0 */
.video-main li:nth-child(3n){
    margin: 0;
}

视频区域中图片上的播放图标设置

设置图片区域的before，可以给伪元素选择器里添加字体图标，也可给内容区加上图片，设置插入播放图片的宽度和高度都撑满，为了让插入的图片居中，则设置text-align和line-height即可；

.video-main .img::before{
    content: url(../imgs/24gl-playCircle.png);
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 500px;
    font-size: 30px;
}

豆瓣时间和视频就已经做完了，里面主要还是应用了许多之前做过的样式，在这里用类名直接引用了而已。

目录

把图片按一定数量横向排列方法

重置鼠标悬浮在a元素上的颜色

图片横向排列时，去除每行末尾图片的margin-right 

视频区域中图片上的播放图标设置

---