分享下自寫的HTML CSS規範

來源:互聯網
上載者:User

最近比較忙,暫時沒法斷續整理前端開發規範文檔啦!自認為內容詳盡豐富,待需數日再分享給各們同聊們啦!今先把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{}/*著作權*/

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.