zoukankan      html  css  js  c++  java
  • CSS 公共样式摘自万能的度娘

    global.css | reset.css(格式化样式) 
    common.css(公共组件样式) 
    layout.css(当前页面样式)

    清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致。

    common.css(公共组件样式)

    一般一个网站所有页面头部、底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求,要保证全站所有页面头部一次替换生效,只要把头文件,已经对应的样式一发,马上生效,很快就有响应。

    比如翻页、表单(输入框、按钮)等样式也是全站统一的,把这些样式都放到common.css里面,如果哪天所有的按钮样式要变更,一次替换就成功了。

    layout.css(当前页面样式)

    公共组件以外的所有样式都写到这个样式文件里面,并且保证一个页面一个独立样式,页面html和css写法要模块化,保证迅速响应项目频繁的迭代。

    为什么要保证一个页面一个独立样式,而且要模块化,肯定有朋友和我有过一样的经历,修改一行样式代码,整个页面甚至N个页面都会受影响,搞了半天还不知道哪里出了问题,返回到修改前的版本,就没问题了。终于找到原因了,却不能改以前的样式,更不能删除,只能增加,时间一长,css样式文件越来越大,最后是不堪重负,整个页面代码只能重写。

    其实global.css和common.css也可以合并到一个文件,毕竟格式化样式也就那么几十行代码,而且格式化样式、头部、底部样式每个页面都会用到。

    这样每个页面就只有2个样式:

    common.css 
    layout.css 
    如果common.css里面组件太多,而且很多组件也不是常用的,也可以像下面这样做:

    heads.css(格式话样式、头部、底部) 
    common.css(公共组件样式) 
    layout.css(当前页面样式) 
    一般情况下也只有2个样式,当需要用到组件的时候才去link组件样式,也不会有太多问题。

    最后,不要把什么东西都往组件样式里面塞,有写东西宁愿每个页面重复拷贝也不要塞到组件样式里面去。某一天,你会发现这个组件样式大得让你可怕,而且很多都是无用的。

    /***********通用基本类1************/

    /*格式化样式*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} 
    table {border-collapse:collapse;border-spacing:0;} 
    fieldset,img {border:0} 
    address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} 
    ol,ul {list-style:none} 
    caption,th {text-align:left} 
    h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 
    q:before,q:after {content:''} 
    abbr,acronym { border:0}

    /*文字排版、颜色*/
    .f12{font-size:12px}
    .f13{font-size:13px}
    .f14{font-size:14px}
    .f16{font-size:16px}
    .f20{font-size:20px}
    .fb{font-weight:bold}
    .fn{font-weight:normal}
    .t2{text-indent:2em}
    .red,a.red{color:#cc0031}
    .darkblue,a.darkblue{color:#039}
    .gray,a.gray{color:#878787}
    .lh150{line-height:150%}
    .lh180{line-height:180%}
    .lh200{line-height:200%}
    .unl{text-decoration:underline;}
    .no_unl{text-decoration:none;}

    /*定位*/
    .tl{text-align:left}
    .tc{text-align:center}
    .tr{text-align:right}
    .fl{float:left;display:inline}
    .fr{float:right;display:inline}
    .cb{clear:both}
    .cl{clear:left}
    .cr{clear:right}
    .vm{vertical-align:middle} 
    .pr{position:relative} 
    .pa{position:absolute}
    .abs-right{position:absolute;right:0}
    .zoom{zoom:1} 
    .hidden{visibility:hidden} 
    .none{display:none}

    /*长度高度*/
    .w10{10px}
    .w20{20px}
    .w50{50px}
    .w90{90px}
    .w100{100px}
    .w200{200px}
    .w250{250px}
    .w500{500px}
    .w800{800px}
    .w{100%}
    .h50{height:50px}
    .h80{height:80px}
    .h100{height:100px}
    .h200{height:200px}
    .h{height:100%}

    /*边距*/
    .m10{margin:10px}
    .m15{margin:15px}
    .m30{margin:30px}
    .mt5{margin-top:5px}
    .mt10{margin-top:10px}
    .mt15{margin-top:15px}
    .mt50{margin-top:50px}
    .mt100{margin-top:100px}
    .mb5{margin-bottom:5px}
    .mb10{margin-bottom:10px}
    .mb15{margin-bottom:15px}
    .mb100{margin-bottom:100px}
    .ml5{margin-left:5px}
    .ml10{margin-left:10px}
    .ml15{margin-left:15px}
    .ml20{margin-left:20px}
    .ml30{margin-left:30px}
    .ml50{margin-left:50px}
    .ml100{margin-left:100px}
    .mr5{margin-right:5px}
    .mr10{margin-right:10px}
    .mr15{margin-right:15px}
    .mr50{margin-right:50px}
    .mr100{margin-right:100px}
    .p10{padding:10px;}
    .p15{padding:15px;}
    .p30{padding:30px;}
    .pt5{padding-top:5px}
    .pt10{padding-top:10px}
    .pt15{padding-top:15px}
    .pt20{padding-top:20px}
    .pt30{padding-top:30px}
    .pt50{padding-top:50px}
    .pb5{padding-bottom:5px}
    .pb100{padding-bottom:100px}
    .pl5{padding-left:5px}
    .pl10{padding-left:10px}
    .pl50{padding-left:50px}
    .pl100{padding-left:100px}
    .pr5{padding-right:5px}
    .pr10{padding-right:10px}
    .pr15{padding-right:15px}
    .pr100{padding-right:100px}

    /***********通用基本类2************/

    /* Copyright 2008 TSXMLOVE. All Rights Reserved. */
    * {
    padding: 0px;
    margin: 0px;
    text-align: left;
    font-family:Arial, Verdana, Tahoma, "宋体", Helvetica, sans-serif;
    line-height: 150%;
    }
    body {
    font-size: 14px;
    text-align: center;
    color: #000000;
    background-color: #DEEBF3;
    background-image: url(../Images/body_bg.jpg);
    background-repeat: repeat-x;
    }
    table {
    border-collapse: collapse;
    }
    td {
    padding: 3px;
    }
    img {
    border: none;
    }
    input {
    padding: 1px;
    vertical-align: middle;
    line-height: normal;
    }
    .main-box {
    margin-right: auto;
    margin-left: auto;
    960px;
    clear: both;
    zoom:1;
    overflow:hidden;
    background-color: #CCCCCC;
    }
    .text-overflow-hidden {
    white-space: nowrap;
    word-spacing: normal;
    letter-spacing: normal;
    overflow: hidden;
    }
    .box-align-center {
    margin-right: auto;
    margin-left: auto;
    }
    /*css定义超链接四个状态也有顺序的。*/

    a:link, a:visited {
    text-decoration: none;
    color: #1F376D;
    }
    a:hover, a:active {
    text-decoration: underline;
    color: #BD0A01;
    border: none;
    }
    /*以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
    注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。*/
    ul {
    clear:both;
    overflow:hidden;
    100%;
    }
    ul, li {
    list-style:none;
    }
    .valign {
    display:table-cell;
    *display: inline;
    zoom:1;
    vertical-align:middle;
    }
    .text{word-wrap:break-word;overflow:hidden;word-break:break-all;}
    /*======================CSS垂直居中=======================*/
    .holder {
    740px;
    height:300px;
    border:1px solid #777;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    }
    /*以下样式针对IE*/
    .edge {
    0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    }
    .container {
    vertical-align:middle;
    display:inline-block;
    }
    /*===============================================*/

    /*CSS Hack*/
    .class {
    background-color:#FFFF00;/*所有浏览器*/
    *background-color:#00FF00;/*IE*/
    _background-color:#00FFFF;/*IE6*/
    }
    /*======万能Float闭合======*/
    .clear:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }

    .clear {display: inline-block;} /* for IE/Mac */

    /*<!-- main stylesheet ends, CC with new stylesheet below... -->*/

    .clear {
        zoom: 1;     /* triggers hasLayout */
        display: block;     /* resets display for IE/Win */
        } /* Only IE can see inside the conditional comment
        and read this CSS rule. Don't ever use a normal HTML
        comment inside the CC or it will close prematurely. */
    /*======万能Float闭合2======*/
    .overflow-hidden{overflow:hidden;}         /*控制背景溢出*/
    .equal-height{margin-bottom:-32800px;padding-bottom:32800px;}      /*控制高度足够小*/

    /*======万能Float闭合3======*/

    .clear 
    {
     height:0px;
     clear:both;
     font-size:0px;
     line-height:0px;
     zoom: 1;
    }

    时间是一切财富中最宝贵的财富。
  • 相关阅读:
    MySql cmd下的学习笔记 —— 引擎和事务(engine,transaction)
    MySql cmd下的学习笔记 —— 有关视图的操作(algorithm)
    MySql cmd下的学习笔记 —— 有关视图的操作(建立表)
    MySql cmd下的学习笔记 —— 有关常用函数的介绍(数学函数,聚合函数等等)
    MySql cmd下的学习笔记 —— 有关多表查询的操作(多表查询练习题及union操作)
    MySql 在cmd下的学习笔记 —— 有关多表查询的操作(内连接,外连接,交叉连接)
    MySql cmd下的学习笔记 —— 有关子查询的操作(where型,from型,exists型子查询)
    MySql cmd下的学习笔记 —— 有关select的操作(order by,limit)
    剑指Offer--第21题 调整数组顺序使奇数位于偶数前面;
    剑指Offer--和为s的连续正数序列
  • 原文地址:https://www.cnblogs.com/weihua88/p/5629114.html
Copyright © 2011-2022 走看看