本小节基本要求：

了解css选择器之类选择器

要点：

css选择器之类选择器

目前样式

目标样式

Step1：定义公告位 (.gonggao选择器的代码)

注意：更加精确一点来说， 以 . 开头的选择器，例如这个 .gongao样式选择器，统称为类选择器。因为它在div中引入的方式是这样的

<div class="gonggao"></div>            

class翻译有类的意思，所有叫它类选择器，也就是说，样式的引入方式决定了它的称呼。

(还是在body.css文件中写)

.main-left .gonggao{    height: 40px;    line-height: 40px;    width: 100%;    position: relative;    border-color: #eee;    margin: 0px 0 13px;    box-shadow: -1px 0 0 rgba(0,0,0,0.04),0 -1px 0 rgba(0,0,0,0.04),1px 0 0 rgba(0,0,0,0.04);    background: #fff;    border-radius: 2px;    border-bottom-left-radius: 2px;    border-bottom-left-radius: 2px;}

来看几处决定性的代码：(其它的是细节不关注)

heigth:40px; 设置框高为40px

width:100%; 设置框宽为100%

line-height: 40px; 设置框内行与行之间的间距：这值一般与height的值一样。

background: #fff; 设置框的背景为白色

运行，直接看效果，如下：

Step2：定义广告位(.guangao类选择器的代码)

.main-left .panel{    position: relative;    border-width: 1px;    border-style: solid;    border-radius: 2px;    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);    background-color: #fff;    color: #666;}.panel .guangao{    padding: 50px 30px;}

从上节的代码结构知道，.guanggao选择器是在.panel里面的，也就是说我给广告位外面加了一层框，修饰这个框的类选择器是 .panel

看起决定性的几处代码，

.panel类选择器中的：

background-color: #fff; 框的背景颜色是白色

.guanggao类选择器中的：

padding: 50px 30px; 边框里的内容被限制为：距离上下边框间距是50px,左右边框是30px；

ps:内边距我前面是讲过的。

直接看效果：

Step3：定义文章的类选择器

.main-left .content .card{    border-radius: 2px;    background-color: #fff;    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);    width: 452px;    float: left;}

从上篇文章可以知道，热门文章与最新文章都是包含在card这个类选择器中的，所以直接定义card的代码。

看起决定性的代码：

background-color: #fff; 框的背景颜色设置为白色

width: 452px; 宽度

float:left； 左浮动；

ps：左浮动我前面已经说了，代码很关键。大致作用就是使得边框朝左边靠拢

从上篇文章知道，热门文章与最新文章都用了card选择器定义的div做外框，那么看效果：

左边一个card定义的div框，右边一个card定义的div框。分别用来盛放热门文章与最新文章。

Step4：优化card选择器，继续编写card-body选择器的代码

.card-body{    position: relative;    padding: 10px 15px;    line-height: 24px;}

card-body类选择器也是公用的。

定义.hot类选择器与.new选择器

.hot,.new{    position: relative;    height: 42px;    line-height: 42px;    padding: 0 15px;    border-bottom: 1px solid #f6f6f6;    color: #333;    border-radius: 2px 2px 0 0;    font-size: 14px;}

运行看效果：

完整body.css代码：

.tbody{    background-color: rgba(61,176,203,0.15);    padding: 10px;    overflow: hidden;}.tbody .is-main{    width: 85%;    margin: 0 auto;}.is-main .main-left{    width: 71%;    float: left;}.is-main .main-right{    width: 28%;    float: right;}.main-left .gonggao{    height: 40px;    line-height: 40px;    width: 100%;    position: relative;    border-color: #eee;    margin: 0px 0 13px;    box-shadow: -1px 0 0 rgba(0,0,0,0.04),0 -1px 0 rgba(0,0,0,0.04),1px 0 0 rgba(0,0,0,0.04);    background: #fff;    border-radius: 2px;    border-bottom-left-radius: 2px;    border-bottom-left-radius: 2px;}.main-left .panel{    position: relative;    border-width: 1px;    border-style: solid;    border-radius: 2px;    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);    background-color: #fff;    color: #666;}.panel .guangao{    padding: 50px 30px;}.main-left .content .card{    border-radius: 2px;    background-color: #fff;    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);    width: 452px;    float: left;}.card-body{    position: relative;    padding: 10px 15px;    line-height: 24px;}.hot,.new{    position: relative;    height: 42px;    line-height: 42px;    padding: 0 15px;    border-bottom: 1px solid #f6f6f6;    color: #333;    border-radius: 2px 2px 0 0;    font-size: 14px;}

建议对照body.html文件看，那样会更清晰。可以多试试代码，怎么试？

删一行代码运行一下，看看效果是什么样，加上去又是一个什么样，这样学很快就明白了。