简明现代魔法 -> CSS层叠样式表 -> 一个活泼的标题与内容显示样式
一个活泼的标题与内容显示样式
2010-03-11
效果演示
简介
众所周知，对于一些相对小的站点来说，数据量并不是很大，select和update就可以解决我们面对的问题，本身负载量不是很大，最多再加几个索引就可以搞定。对于大型网站，每天的数据量可能就上百万，如果一个设计不好的多对多关系，在前期是没有任何问题的，但是随着用户的增长，数据量会是几何级的增长的。在这个时候我们对于一个表的select和update的时候(还不说多表联合查询)的成本的非常高的。
简介
| Title | Data |
|---|---|
| Title | Data |
| Title | Data |
| Title | Data |
| Title | Data |
| Title | Data |
标题和数据可以用以上优雅显示
css code
body{color:#333;font:12px/180% "宋体",arial,helvetica,clean,sans-serif;*font-size:small;margin:0 auto;}
body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,legend,input,img{margin:0;padding:0;}
img,fieldset{border:0;}
ul,ol{list-style:none;}
legend{height:0;font-size:0;}
label{cursor:pointer;cursor:hand;}
input{outline:none;}
.column_title{background:url(images/mer_bg.png) no-repeat;}
.column{width:740px;overflow:hidden;margin:12px auto;}
.column_title{width:740px;height:26px;line-height:150%;background-position:0 -5px;}
.column_title h2{float:left;text-indent:26px;color:#2C2C2C;font-size:14px;}
.column_content{width:715px;overflow:hidden;margin:12px auto 0; text-indent:2em;}
table.dataintable {
font-family:Verdana, 宋体;
margin:10px 5px 10px 8px;
border-collapse:collapse;
border:1px solid #888;
width:90%;
}
table.dataintable th {
vertical-align:baselinebaseline;
padding:5px 3px 5px 3px;
background-color:#ddd;
border:1px solid #aaa;
width:15%;
font-weight:normal;
}
table.dataintable td {
vertical-align:text-top;
padding:5px 8px 5px 8px;
background-color:#efefef;
border:1px solid #aaa;
width:75%;
line-height:150%;
}