本小节基本要求：

• 了解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文件看，那样会更清晰。可以多试试代码，怎么试？

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