非常有用的CSS模板

水深无声 2022-06-18 06:11 260阅读 0赞

# CSS Reset (CSS固定样板) #

/*
    Copyright (c) 2011, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.com/yui/license.html
    version: 2.9.0
    */
    /**
     * YUI Reset
     * @module reset
     * @namespace
     * @requires 
     */
    html {
        color: #000;
        background: #FFF;
    }
    body{
        font-size:12px;
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
        margin: 0;
        padding: 0;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    fieldset,img {
        border: 0;
    }
    
    address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {
        font: inherit;
    }
    
    del,ins {
        text-decoration: none;
    }
    
    li {
        list-style: none;
    }
    
    caption,th {
        text-align: left;
        font-weight:normal;
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size: 100%;
        font-weight: normal;
    }
    
    q:before,q:after {
        content: '';
    }
    
    abbr,acronym {
        border: 0;
        font-variant: normal;
    }
    
    sup {
        vertical-align: baseline;
    }
    
    sub {
        vertical-align: baseline;
    }
    
    /*because legend doesn't inherit in IE */
    legend {
        color: #000;
    }

# \*\*\*\*\*\*\*\*\*\*辅助css\*\*\*\*\*\* #

/* border */
    
    .bd{border:1px solid #e8e8e8; }
    .bdr {border-right: 1px solid #e8e8e8;}
    .bdl {border-left: 1px solid #e8e8e8;}
    .bdlr{border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8;}
    .bdt{border-top: 1px solid #e8e8e8;}
    .bdb {border-bottom: 1px solid #e8e8e8;}
    .bdtb{border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;}
    
    /* text-align */
    .ta-r{text-align:right;}
    .ta-l{text-align:left;}
    .ta-c{text-align:center;}
    
    /*float*/
    .fl{float:left}
    .fr{float:right}
    /* padding */
    .p{padding:10px;}
    .pt{padding-top:10px;}
    .pr{padding-right:10px;}
    .pb{padding-bottom:10px;}
    .pl{padding-left:10px;}
    .ptb{padding:10px 0px;}
    .plr{padding:0px 10px;}
    
    /* margin */
    .m{margin:10px;}
    .mt{margin-top:10px;}
    .mr{margin-right:10px;}
    .mb{margin-bottom:10px;}
    .ml{margin-left:10px;}
    .mtb{margin:10px 0px;}
    .mlr{margin:0px 10px;}
    
    .hide{display:none;}

# Browser-Specific CSS Hacks (浏览器特定CSSHacks) #

/* IE6 and below */
    * html #uno  { color: red }
    
    /* IE7 */
    *:first-child+html #dos { color: red } 
    
    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }
    
    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }
    
    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }
    
    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }
    
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }
    
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }
    
    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     #diez  { color: red  }
    }
    
    /* iPhone / mobile webkit */
    @media screen and (max-device-width: 480px) {
     #veintiseis { color: red  }
    }
    
    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }
    
    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }
    
    /* Everything but IE6-8 */
    :root *> #quince { color: red  }
    
    /* IE7 */
    *+html #dieciocho {  color: red }
    
    /* Firefox only. 1+ */
    #veinticuatro,  x:-moz-any-link  { color: red }
    
    /* Firefox 3.0+ */
    #veinticinco,  x:-moz-any-link, x:default  { color: red  }
    
    /* FF 3.5+ */
    body:not(:-moz-handler-blocked) #cuarenta { color: red; }
    
    /* IE6 */
    #once { _color: blue }
    
    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }
    
    /* Everything but IE6 */
    #diecisiete { color/**/: blue }
    
    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }
    
    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }
    
    /* IE6, IE7 -- acts as an !important */
    #veintesiete { color: blue !ie; } /* string after ! can be anything */
    
    /* IE8, IE9 */
    #anotherone  {color: blue\0/;} /* must go at the END of all rules */

# A New Micro Clearfix Hack (清除浮动的CSS) #

/* For modern browsers */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
    }
    
    .cf:after {
        clear:both;
    }
    
    /* For IE 6/7 (trigger hasLayout) */
    .cf {
        zoom:1;
    }

# 单行省略号效果 #

.ellipsis-box {
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap !important;
    	outline: 0 !important
    }

# Font Sizing (字号设置) #

html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; } /* =14px */
    h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

# The New @Font-Face Syntax (自设字体样式) #

@font-face {
    	font-family: 'MyFontFamily';
    	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
    	     url('myfont-webfont.woff') format('woff'),
    	     url('myfont-webfont.ttf')  format('truetype'),
    	     url('myfont-webfont.svg#svgFontName') format('svg');
    }

# Target IE set (针对IE的设置) #

body {
    color: red; /* all browsers, of course */
    color : green\9; /* IE8 and below */
    *color : yellow; /* IE7 and below */
    _color : orange; /* IE6 */
    }

# Cross-Browser Min Height (跨浏览器的最小高度) #

#div {
       min-height: 500px;
       height:auto !important;
       height: 500px;
    }

# Font Shorthand (字体设置速写) #

/*font: font-style font-variant font-weight font-size/line-height font-family;*/
    font: italic small-caps bold 15px/30px Helvetica, sans-serif;

# IE6/7 Double Margin/Padding Bug (IE6/7双重边距错误) #

ul li {
      float: left;
      margin-left: 5px;
      *display: inline; /*IE7 and below*/
      _display: inline; /*IE6 and below*/
    }
    /* this example fixes double left margin bug 左边距Bug*/

# Web Fonts With Google Font API(Google网页字体) #

<code><span style="color:#008000;">/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font Name"> */</span>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"></code>
    <code><span style="color:#008000;">/*CSS selector {  font-family: 'Font Name', serif;}*/
    </span>font-family: 'Tangerine', serif;</code>

# Drop Cap (首字下沉) #

p:first-letter {
    	display:block;
    	margin:5px 0 0 5px;
    	float:left;
    	color:#FF3366;
    	font-size:60px;
    	font-family:Georgia;
    }

# 初始化不同长度的input:text和select #

select.smallest{width:126px;}
    	select.smaller{width:126px;}
    	select.small{width:126px;}
    	select.long {width:180px;}
    	select.longer {width:276px;/*select 同 input 长度不相同，270+6*/}
    	select.longest{width:350px;}
    
    	input.smallest{width:32px; margin-right:20px}
    	input.smaller{width:54px;}
    	input.small{width:120px;}	
    	input.long{width:200px;}
    	input.longer{width:270px;}
    	input.longest{width:350px;}

# 布局 #

.subcolumns { display:table; width:100%; table-layout:fixed; }
    .fb {_width: 100%;overflow: hidden;clear: both; }
    	.c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l { float:left; }
    	.c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { float:right; margin-left:-5px; }
    
    	.c20l, .c20r { width:20%; }
    	.c40l, .c40r { width:40%; }
    	.c60l, .c60r { width:60%; }
    	.c80l, .c80r { width:80%; }
    	.c25l, .c25r { width:25%; }
    	.c33l, .c33r { width:33.333%; }
    	.c50l, .c50r { width:50%; }
    	.c66l, .c66r { width:66.666%; }
    	.c75l, .c75r { width:75%; }
    	.c38l, .c38r { width:38.2%; }
    	.c62l, .c62r { width:61.8%; }
    
    	/*列间距*/
    	.subc  { padding:0 0.5em; }
    	.subcl { padding:0 1em 0 0; }
    	.subcr { padding:0 0 0 1em; }
    
    /*column-container  
      * @section base layout | Basis Layout
      * @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
      * 
      * |-------------------------------|
      * | #col1   | #col3     | #col2   |
      * | 200 px  | flexible  | 200px   |
      * |-------------------------------|
     */
    
    	.column-container{}
    	.column-container .col1 { float:left; width:110px; }
    	.column-container .col2 { float:right; width:20%; }
    	.column-container .col3 { width:auto; margin:0 0 0 110px; }

# form-container #

.form-container{}
    .form-container .form-container-item{ padding-bottom: 10px; padding-left: 100px; position: relative;min-height:1.5em; }
    .form-container .form-container-label{display: block; left: 0;position: absolute; text-align: right; top: 1px;width: 95px; _left:-100px; margin:0}
    .form-container .txt-impt, .txt-impt{ color:#D93431; font-weight:bold; padding:0 5px; }
    .form-container .colon{ color:#666; font-weight:bold; padding:0 5px; }   /*colon 冒号*/
    .form-container textarea{width:500px;height: 67px; padding:2px;}