简明现代魔法 -> 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%;
}  

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们