项目实战四：豆瓣首页-热点区域
接下来要制作的就是热点区域了，首先是间隔性的背景颜色的改变，这里考虑用nth-child（even）
.section:nth-child(even){
background-color: #f7f7f7;
}nth-child（even） 常见问题：前面的元素干扰顺序问题
这里要注意一个问题，在数section是第几个子元素时，它会先找section的元素，从同等级的div子元素开始数，不是从有section类名的div中数，要解决这个问题，可以将有section的div全都包裹在另一个div盒子里，这样有section的子元素的类名全是section，就不会因为前面的div而影响顺序。
制作两栏或三栏布局
在这里我们可以为左边栏右边栏设置统一的类名，为其设置统一的样式，用到时只需添加类名即可
左边栏
右边栏
主区域
注意设置主区域时要为主区域设置BFC，使其达到避开浮动盒子自动适应的效果
.aside-left{
float: left;
width: 100px;
margin-right: 20px;
}
.aside-right{
float: right;
width: 265px;
margin-left: 30px;
}
.main{
/* 创建BFC，自适应，避开浮动盒子 */
overflow: hidden;
}接下来就是右边栏的设置了，右边栏包括广告图片（adv），部分标题（section-title）以及列表内容(hot-list),adv里又包含a元素，a元素里又嵌套一个img元素，可以统一设置广告图片的样式为宽度撑满，display为块盒（去掉白边），section-title中有可以包括一个h3元素和a元素，a元素前后又有一个括号，上括号和下括号均可使用伪元素选择器（before和after）
因为鼠标移入a元素时，括号背景颜色不变，因此不能在a元素上设置伪元素，此时可以在a元素外面再添加一个span设置span伪元素即可
去话题广场
热门话题后的省略号同理也可使用伪元素选择器
.section-title .title::after{
content: " · · · · · · ";
}有时候热点后会加上一个标签，例如广告同理这里也可使用伪元素选择器
.adv-tag::after{
content: "广告";
font-size: 13px;
color: #c9c9c9;
}
host-list中也可分为两个部分，一个为标题，一个为描述（desc），描述中又有两个span元素，两个span元素之间隔有一些距离，可以设置span元素的margin-right，也可设置除第一个span元素之外其他span的margin-left
设置子元素出第一个之外的其他元素
除第一个之外的其他span元素，n从0开始
.hot-list li .desc span:nth-child(n+2){
}接着设置各个部分文字颜色等细节即可
热门区域代码：
.hot-list{
line-height: 1.5;
}
.hot-list li{
margin-bottom: 15px;
}
.hot-list li .title{
font-size: 14px;
}
.hot-list li .desc{
font-size: 13px;
color: #aaa;
}首页通用样式代码：
.container {
width: 950px;
margin: 0 auto;
}
.section{
padding: 35px 0;
}
/* 遇到双数的section时，设置以下样式 */
.section:nth-child(even){
background-color: #f7f7f7;
}
.aside-left{
float: left;
width: 100px;
margin-right: 20px;
}
.aside-right{
float: right;
width: 265px;
margin-left: 30px;
}
.main{
/* 创建BFC，自适应，避开浮动盒子 */
overflow: hidden;
}
.adv img{
width: 100%;
/* 去掉白边 */
display: block;
}
.section-title{
margin: 12px 0;
}
.section-title .title{
/* 水平排列，不独占一行 */
display: inline;
color: #072;
font-size: 15px;
}
.section-title .title::after{
content: " · · · · · · ";
}
.section-title .link{
font-size: 12px;
}
.section-title .link::before{
content: "(";
}
.section-title .link::after{
content: ")";
}
.adv-tag::after{
content: "广告";
font-size: 13px;
color: #c9c9c9;
}
/* 首页通用样式结束 */还有要注意的一点，右边栏中已经定款宽，热点标题如果太长应有换行效果，
全英文换行效果
如果全英文（无空格），则最终效果不会换行，故要给ul设置word-break：break-all（可在单词内部截断）
接着设置主区域的内容，主区域里又有section-title和hot-main，hot-main里又有向左浮动的区域，以及向右浮动的区域，向左浮动的区域里有四个ul，每个ul里有两部分，一个为照片（img），另一个为文字（words），照片是li加a加img，words里有两部分，一个a，一个span元素，观察一下这四个ul的排列方式
目前制作出来的效果如下：
两个两个排列在一行，此时最好不要用浮动，要频繁的解决高度坍塌问题，在这里我们将li元素定宽且变成一个行块盒，即可达到效果
接下来要让每一行中的li适应宽度排列，这里我们可以用到text-align的一个属性justify，即为分散对齐，但最后一行不会实现分散对齐，要想让最后一行实现该效果，可在最后一个li后面加上一个li宽度撑满成为最后一行，因为其高度为0，所以不会影响样式，也可以不添加元素，直接用样式解决，给ul设置一个伪元素即可。
.hot-main ul::after {
content: "";
display: inline-block;
width: 100%;
}接下来就该float-right了，注意设置其宽度，防止宽度太宽导致浮动元素换行，接着设置细节部分即可
-
我们仍未知道那天所看见的论文的意义
76张照片
-
我们仍未知道那天所看见的论文的意义
76张照片
-
我们仍未知道那天所看见的论文的意义
76张照片
-
我们仍未知道那天所看见的论文的意义
76张照片
-
城市失忆症
菠萝的日记
从小家教比较严格，高中之前几乎杜绝了一切电子产品，没有手机，也没有电脑，去同学家玩还要胆战心惊。好处是读书几乎成为了唯一的娱乐，买书从来不会被限制，坏处是，小镇...
- Lorem ipsum dolor sit.
- Error numquam minima praesentium.
- Aperiam quidem atque eveniet.
- Impedit nisi temporibus aut!
- Ut iusto tempore recusandae.
- Sequi reiciendis aut esse.
- Ex voluptate enim reprehenderit!
- Corrupti recusandae esse ab!
- Voluptatem animi assumenda itaque!
- Ipsum reiciendis similique blanditiis.
.hot-list {
line-height: 1.5;
}
.hot-list li {
margin-bottom: 15px;
}
.hot-list li .title {
font-size: 14px;
}
.hot-list li .desc {
font-size: 13px;
color: #aaa;
}
/* 除第一个之外的其他span元素，n从0开始 */
/* .hot-list li .desc span:nth-child(n+2){
} */
.hot-list li .desc span {
margin-right: 4px;
}
.hot-main .float-left {
width: 350px;
}
.hot-main ul::after {
content: "";
display: inline-block;
width: 100%;
}
.hot-main .float-left li {
display: inline-block;
width: 170px;
font-size: 12px;
margin: 10px 0;
vertical-align: top;
}
.hot-main .float-left ul {
/* 分散对齐 */
text-align: justify;
line-height: 1.5;
}
.hot-main .float-left li .img img{
width: 100%;
display: block;
}
.hot-main .float-left li .words span{
color: #c9c9c9;
}
.hot-main .float-right{
width: 275px;
font-size: 12px;
}
.hot-main .float-right li{
margin-bottom: 12px;
}
.hot-main .float-right li .title{
color: #999;
}
.hot-main .float-right li .desc{
color: #666;
} 