bbs.css:一个可供学习的css的示例_论坛列表 css

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";} /* 所有：无内外边框*/

ul,li{list-style: none;}  /* 针对ul,li这种列表，不设置列的符号*/

/*居中。margin: 0 auto;相当于 margin: 0 auto 0 auto;，四个值分别对应上右下左:顺时针。*/
.bbs{margin: 0 auto; width: 600px; position: relative;}


header{padding: 5px 0; border-bottom: 1px solid #cecece;} /*头，有内边距5*/

/*行内非替换元素，比如span、a等标签，正常情况下是不能设置宽高的，加上该属性之后，
就可以触发让这类标签表现得如块级元素一样，可以设置宽高。
注意IE6不支持inline-block属性，可以用hack来解决：*display:inline;zoom:1;*/
header span{display:inline-block; width: 220px; height: 50px; color: #fff;
    background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px;
    border-radius: 8px; cursor: pointer;}


/*画了个框还不显示。注意：position: absolute;display: none;
真正要实用时，就会修改display属性来显示这个框。
z-index: 999999：这个值越大，窗口越靠前，此处这么设定，是打算最前了。
*/
.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px;
    padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}
.post select{width: 200px; height: 30px;}
.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

/*个性化的button，就是这么来的。这就是大家常说的：别人家的button
cursor: pointer;*/
.post .btn{width: 160px; height: 35px; color: #fff; background: #009966;
    border: none; font-size: 14px; font-weight: bold;
    text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}

 /*section，顾名思义就是一个章节。
 不是通用容器元素。如果仅仅是用于设置样式或脚本处理，一般应用div元素。
 一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素
 */
.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;
    overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

/*画圆：border-radius:50%*/
.bbs section ul li div img{ border-radius:50%; width: 60px;}
.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}
.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }
.bbs section ul li p span{padding-right:20px;}