网站开发笔记（一）——新闻列表页面

1.页面类型：常见的两列布局的新闻列表页面

2.如图：

3.页面的布局使用了div的嵌套：

<div class="news">

<div class="news_list">1列</div>

<div class="list_type">2列</div>

</div>

左侧列表高度固定，右侧列表要采用自增长的高度，在css中对list_type添加样式：min-height:300px;并由于在IE6中并不支持这个属性，所有还要同时添加_height:300px;

4.list_type的实现是利用了无序列表来实现，其中时间放在span标签中，但是在html中要将span元素放在a标签前边：

<li><span>2016-05-08</span><a href="#">【有奖活动】给父亲的三行情书</a></li>

span设置的样式是右浮动，如果放在后边，在有的浏览器中可能会出现错行的现象，放在前边，就可以避免这个问题的出现。

5.随着list_type高度的增加，在页面的底部的盒子会由于list_type的右浮动而向左偏移，因此要对底部盒子加上clear：both的样式，但这样会导致原来设置的margin-top属性失效：因此可以在底部前加上一个盒子，并设置clear，这个方法很简单但是这样会破坏页面的结构性；

可以采取用伪类元素::before和::after来实现；浮动元素的父元素上加上一个clearfix class，然后这个父元素的框就会包括所有的浮动子元素，在css中添加如下代码：

.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
    zoom:1;
}