分享下自写的HTML CSS规范

最近比较忙,暂时没法断续整理前端开发规范文档啦!自认为内容详尽丰富,待需数日再分享给各们同聊们啦!今先把XHTML CSS简单代码大致规范分享下。如有疑问请留言,或等待后续详尽文档的发布!便知晓!

===XHTML大致规范===

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="author" content="庞淦...">
<meta name="keywords" content="关键字...">
<meta name="description" content="网站描述...">
<meta name="robots" content="all" />
<title>深圳市美赛达科技有限公司</title>
<link rel="stylesheet" href="style/public.css" />
<script src="scripts/jquery-1.4.2.min.js"></script>
</head>
<body>
<!--wraper begin-->
<div id="wraper">
<!--header begin-->
    <div id="header">

 

    </div>
<!--header end-->
<!--contents begin-->
    <div id="contents" class="clearall">
<!--sidebar begin-->
    <div class="sidebar fl">

 

    </div>
<!--sidebar end-->
<!--mainbar begin-->
    <div class="mainbar fr">

 

    </div>
<!--mainbar end-->
    </div>
<!--contents end-->
<!--footer begin-->
    <div id="footer">
 
    </div>
<!--footer end-->

</div>
<!--wraper end-->
<script src="Scripts/public.js"></script>
</body>
</html>

===CSS public.css文件大致规范(除了CSS Reset外,其它都为项目中的公共样式随自身项目而添加修改)===

@charset "utf-8";
/*================================================
Version:6.0 Date:2010/10/21
Rendering Engine:Trident,Gecko,WebKit,Presto.
Author:PangGan E-mail:xinzu86@163.com QQ:329784240
================================================*/
/*CSS Reset*/
html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre{margin:0;padding:0;}
body{font:12px/1.231 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;color:#333;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:bold;}
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#23930c;text-decoration:underline;}
textarea,select,input,button,label{vertical-align:middle;font-size:12px;}
button{background:none;border:none;cursor:pointer}
address,cite,code,em,var,abbr,acronym{font-style:normal;}
pre{font-size:12px;text-align:center;white-space:pre-wrap;word-wrap: break-word;}
table{border-collapse:collapse;table-layout:fixed}
td,th{word-wrap:break-word;word-break:break-all;overflow:hidden;}
ol,ul{list-style:none;}
li{list-style-position:outside}
img{border:none;}
/*clear float*/
.clearfix{clear:both;height:1%;display:table;display:inline-block;}
.clearall{overflow:hidden;_zoom:1;}
.clear{clear:both;font-size:0;height:0;line-height:0;}
/*CSS float*/
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
/*CSS align*/
.ta_l{text-align:left}
.ta_r{text-align:right}
.ta_c{text-align:center}
.ta_j{text-align:justify}
/*CSS margin*/
.mt_10{margin-top:10px;}
.mr_10{margin-right:10px;}
.mb_5{margin-bottom:5px;}
.ml_8{margin-left:8px;}
/*CSS padding*/
.pt_10{padding-top:10px;}
.pr_15{padding-right:15px;}
.pb_5{padding-bottom:5px;}
.pl_8{padding-left:8px;}
/*CSS border*/
.b_4{border:1px solid #666;}
.b_4_red{border:1px solid red;}
/*CSS font-size*/
.fz_12{font-size:12px;}
.fz_14{font-size:14px;}
.fz_16{font-size:16px;}
.fz_18{font-size:18px;}
/*CSS fontColor*/
.f_blue{color:blue;}
.f_white{color:white;}
.f_666{color:#666;}
.f_09c{color:#09c}
/*CSS backgroundColor*/
.bg_blue{background:blue;}
.bg_white{background:white;}
.bg_666{background:#666;}
.bg_09c{background:#09c}
/*CSS public page*/
#wraper{width:960px;margin:0 auto;}/*页面区域*/
#header{}/*页眉*/
h1 a{display:block;text-indent:-1000px;}/*logo*/
#nav{}/*导航*/
#contents{}/*页主体*/
.sidebar{}/*侧栏*/
.mainbar{}/*主栏*/
#footer{}/*页脚*/
.copyright{}/*版权*/

posted @ 2010-10-21 22:04  radom  阅读(568)  评论(0编辑  收藏  举报