Question

DIV+CSS页面公共区域样式问题？

使用DIV+CSS布局页面时，在body区域应该设置那些样式呢？设置这个样式的作用是什么呢？ 注：谢谢您的参与！！注：请大家也给我指导一下样式表头部设计方法！！谢谢

Answer 1

在一个web程序中，我们往往希望页面中的一些最基本的样式是统一的，这样可以给人整齐划一的感觉，同时也可以省去很多重复冗余的css代码，下面是我经常用到的页面默认样式，也就是程序的每个页面都会首先载入这个样式，然后再依据其自身的特点载入自己特有的样式，可以参考一下
body{line-height:1.4;background:#fff}
body,input,textarea,select{font-size:13px;color:#333;font-family:arial}
body,h1,h3,h4,p,ul,ol{margin:0}
ul,ol{padding-left:0;list-style-type:none}a img{border:0}
a:link,a:active,a:visited{color:#003;text-decoration:none}
a:hover{color:blue;text-decoration:underline}
.biaoti1{height:25px;background:#e7e7e7}
.biaoti1 .tit{background:#3672ae;width:80px;height:25px;text-align:center;line-height:25px;color:#fff;font-size:14px;font-weight:700}.biaoti1 .more{float:right;font-size:12px;color:#06c;font-weight:700;line-height:25px;margin-right:5px}#clubsjihua_div_clubs .biaoti{width:389px;height:246px;float:left;margin-left:3px;border-right:0 solid #ccc}
#clubsjihua_div_clubs .biaoti h1{font-size:14px;color:#c00;height:30px;line-height:30px;border-bottom:1px solid #ccc;width:95%}
#clubsjihua_div_clubs .biaoti h1 span{color:#ccc;font-weight:400}
#clubsjihua_div_clubs .biaoti em{float:right;font-style:normal;font-weight:400}
#clubsjihua_div_clubs .biaoti em a{font-size:12px;color:#005a98;text-decoration:none;background:url(/images/arrow.jpg) no-repeat;padding-left:18px}#clubsjihua_div_clubs .biaoti em a:hover{color:red;text-decoration:underline}

Answer 2

这是全局样式
你也可以总结一个适合自己的全局样式 也可以用前辈们写好的样式 做网页的时候直接调用就OK了 这样既方便又实惠 不用自己花更多的时间去写了

我给你个我经常用的全局样式样式
/*reset style*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }
body { width:100%; height:100%; background:#FFF; color:#333; font:12px/1.5em Arial, Helvetica, sans-serif; position:relative; left:0; top:0; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
*{ word-wrap: break-word;}
a, a:hover { color:#333; text-decoration:none; }
a:hover { color:#c00; }
fieldset, img { border:none; }
img{ border:0; vertical-align:middle;}
legend { display:none; }
ol, ul, li { list-style:none; }
em, strong, cite, th { font-style:normal; font-weight:400; }
input, textarea, select, button { font:12px Verdana, Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; }
/* common style */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/*\*/ .clearfix { display:block; } /**/
.cl{ clear:both;}

希望对你有帮助

Answer 3

body {text-align:center;font-family:宋体; margin:0; padding:0; background:#fff;font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd,BUTTON{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;}
table,td,tr,th{font-size:12px;}li{list-style-type:none;}table{ margin:0 auto;}img{vertical-align:top;}
.clear{ clear:both}
.blk12{width:100%;float:left;display:inline;height:12px;line-height:12px;font-size:8px;clear:both;}
.blk08{width:100%;float:left;display:inline;height:8px;line-height:8px;font-size:8px;clear:both;}
.blk06{width:100%;float:left;display:inline;height:6px;line-height:6px;font-size:6px;clear:both;}
.blk05{width:100%;float:left;display:inline;height:5px;line-height:5px;font-size:5px;clear:both;}
.blk04{width:100%;float:left;display:inline;height:4px;line-height:4px;font-size:4px;clear:both;}
.gads{width:1000px;height:auto;clear:both;padding-top:0px;padding-bottom:0px;margin:0px}
.Hidebox{display:none;}
.hidden{display:none;}
.Showbox{display:block;}
/* 链接颜色 */
a{color:#444;text-decoration:none;outline:none}
a:link{color:#333;text-decoration:none;}
a:visited{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
a:active{color:#c00;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:#f60!important; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#0046C1; text-decoration:underline}a.cBlue:hover{text-decoration:underline;color:#f30;}
.cBlue2,a.cBlue2:link,a.cBlue2:visited{color:#325e7f!important;text-decoration:none}a.cBlue2:hover{text-decoration:underline;color:#f30!important;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#d10!important;}
.cBlue1,a.cBlue1:link,a.cBlue1:visited{color:#059; text-decoration:none}a.cBlue1:hover{text-decoration:none;color:#d00;}
.cDy,a.cDy:link,a.cDy:visited{ color:#e34101;}

Answer 4

设置背景和边框，一般都这样子，还有宽度和高度