• 分享下自写的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{960px;margin:0 auto;}/*页面区域*/
    #header{}/*页眉*/
    h1 a{display:block;text-indent:-1000px;}/*logo*/
    #nav{}/*导航*/
    #contents{}/*页主体*/
    .sidebar{}/*侧栏*/
    .mainbar{}/*主栏*/
    #footer{}/*页脚*/
    .copyright{}/*版权*/

  • 相关阅读:
    关于Android架构那些事
    关于投资那些事
    关于单例模式的N种实现方式
    关于如何避免Android中Bitmap引起的OutOfMemoryError
    关于Java设计模式的一些概况
    阿里云服务器使用记录:服务器运行的网页无法访问
    毕业设计进度:3月22日
    前端框架:bootstrap多个模态框跳转使用时发生的页面左移问题
    毕业设计进度:3月20日
    毕业设计进度:3月19日
  • 原文地址:https://www.cnblogs.com/radom/p/1857840.html
Copyright © 2020-2023  润新知