CSS的总结一

建议的CSS书写顺序
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content

 

css可以有两种显示方式：

class="",当用这种的时候，就在css中用.list这种形式

id="",当用这种的时候，就在css中用#list这种形式

 

CSS代码:
.list{
    margin: 0px 10px 20px;
    text-align: left;   
}

.list ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.list li{
    background: url(/imagelist/06/31/gu432qq5q695.gif) repeat-x bottom;
    /*列表底部的虚线*/
    width: 100%;   
}

.list li a{
    color: #777777;
    display: block;
    padding: 6px 0px 4px 15px;
    background: url(/imagelist/06/31/7ei20115t3sv.gif) no-repeat 0 6px;
    /*列表左边的箭头图片*/
}

.list li span{
    float: right;/*使span元素浮动到右面*/
    text-align: right;/*日期右对齐*/
}

.list li a:hover{
    color: #336699;
    background: url(/imagelist/06/31/jq1ysff5b0ac.gif) repeat-x bottom;
}
      

注意:span一定要放在前面,反之会产生换行

 <ul class="list"> <li><span>2005年5月30日 </span><a href="#">新闻标题01</a></li> <li><span>2005年5月30日 </span><a href="#">新闻标题02</a></li> <li><span>2005年5月30日 </span><a href="#">新闻标题03</a></li> <li><span>2005年5月30日 </span><a href="#">新闻标题04</a></li> </ul>

 

   #rightnew
{
 float:left;
 width:350px;
 border:1px #96c2f1 solid;
 text-align:left;
 }

 <div id="rightnew">
   <div id="bk2">新闻类别二</div>
   <div>