六.最新资讯部分的制作

一.最新资讯的制作分析

　　首先,我们可以将最新资讯分为上下两部分,标题和内容

　　然后内容又可以分为左右两部分,左边是一张图片,右边是文字div

　　文字div又可以分为左右两部分,分别使日期和内容

　　内容又可以分为上下两部分

二.代码的实现

　　1.HTML代码

    <div class="briefed">
        <div class="section-header">
            <div class="section-header-box">
                <div class="section-header-left"></div>
                <div>最新资讯</div>
                <div class="section-header-right"></div>
            </div>
            <p>TEH LATEST NEWS</p>
        </div>
        <div class="briefed-body">
            <div class="briefed-left">
                <img src="./images/section3.png" alt="">
            </div>
            <div class="briefed-right">
                <div class="briefed-right-box">
                    <div class="briefed-right-item">
                        <div class="briefed-right-left">
                            <div class="number">09</div>
                            Jan
                        </div>
                        <div class="briefed-right-right">
                            <p class="p1">网站排名进入前三的技巧说明</p>
                            <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </div>
                    <div class="briefed-right-item">
                        <div class="briefed-right-left">
                            <div class="number">09</div>
                            Jan
                        </div>
                        <div class="briefed-right-right">
                            <p class="p1">网站排名进入前三的技巧说明</p>
                            <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </div>
                    <div class="briefed-right-item">
                        <div class="briefed-right-left">
                            <div class="number">09</div>
                            Jan
                        </div>
                        <div class="briefed-right-right">
                            <p class="p1">网站排名进入前三的技巧说明</p>
                            <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </div>
                    <div class="briefed-right-item">
                        <div class="briefed-right-left">
                            <div class="number">09</div>
                            Jan
                        </div>
                        <div class="briefed-right-right">
                            <p class="p1">网站排名进入前三的技巧说明</p>
                            <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>　　

　　2.CSS代码

.briefed{
    height: 240px;
    padding-bottom: 88px;
    margin: 60px 180px 0px;
}
.briefed-left{
    float: left;
}
.briefed-right{
    width: 856px;
    float: right;
    margin-top: 20px;
}
.briefed-content .briefed-left img{
    width: 234px;
}
.briefed-right-item{
    float: left;
}
.briefed-right-left{
    color: #999;
    font-size: 20px;
    width: 73px;
    border-right: 1px solid #dcdcdc;
    text-align: center;
    float: left;
}
.briefed-right-left .number{
    font-size: 39px;
    color: #66c5b4;
    font-weight: bold;
    float: left;
}
.briefed-right-right{
    width: 328px;
    padding-left: 18px;
    float: left;
}
.briefed-right-right .p1{
    font-size: 14px;
    color: #3f3f3f;
}
.briefed-right-right .p2{
    font-size: 12px;
    color: #a4a4a4;
    padding-top: 19px;
}
.briefed-right-box1{
    padding-bottom: 40px;
}

　　　　最新资讯整体设置高度,外边距,内边距

　　　　然后给图片div设置高度,左浮动,给内容部分设置右浮动

　　　　内容部分中的日期设置左浮动,内容设置右浮动

　　　　这样基本的就设置完了

　　　　现在我们来看日期和内容中间的一条小竖线,这个可以给日期div设置右边框border-right,设置为1px solid #dcdcdc就可以了