base.css

@charset "utf-8";

/*!

* @名稱:base.css

* @功能:1、重設瀏覽器默認樣式

*? ? ? 2、設置通用原子類

*/

/* 防止用戶自定義背景顏色對網(wǎng)頁的影響,添加讓用戶可以自定義字體 */

html {

background:white;

color:black;

}

/* 內外邊距通常讓各個瀏覽器樣式的表現(xiàn)位置不同 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

margin:0;

padding:0;

}

/* 要注意表單元素并不繼承父級 font 的問題 */

body,button,input,select,textarea {

font:12px '\5b8b\4f53',arial,sans-serif;

}

input,select,textarea {

font-size:100%;

}

/* 去掉 table cell 的邊距并讓其邊重合 */

table {

border-collapse:collapse;

border-spacing:0;

}

/* ie bug:th 不繼承 text-align */

th {

text-align:inherit;

}

/* 去除默認邊框 */

fieldset,img {

border:none;

}

/* ie6 7 8(q) bug 顯示為行內表現(xiàn) */

iframe {

display:block;

}

/* 去掉列表前的標識,li 會繼承 */

ol,ul {

list-style:none;

}

/* 對齊是排版最重要的因素,別讓什么都居中 */

caption,th {

text-align:left;

}

/* 來自yahoo,讓標題都自定義,適應多個系統(tǒng)應用 */

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:500;

}

/* 統(tǒng)一上標和下標 */

sub,sup {

font-size:75%;

line-height:0;

position:relative;

vertical-align:baseline;

}

sup {

top:-0.5em;

}

sub {

bottom:-0.25em;

}

/* 讓鏈接在 hover 狀態(tài)下顯示下劃線 */

a:hover {

text-decoration:underline;

}

/* 默認不顯示下劃線,保持頁面簡潔 */

ins,a {

text-decoration:none;

}

/* 去除 ie6 & ie7 焦點點狀線 */

a:focus,*:focus {

outline:none;

}

/* 清除浮動 */

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

overflow:hidden;

}

.clearfix {

zoom:1; /* for ie6 & ie7 */

}

.clear {

clear:both;

display:block;

font-size:0;

height:0;

line-height:0;

overflow:hidden;

}

/* 設置顯示和隱藏,通常用來與 js 配合 */

.hide {

display:none;

}

.block {

display:block;

}

/* 設置浮動,減少浮動帶來的 bug */

.fl,.fr {

display:inline;

}

.fl {

float:left;

}

.fr {

float:right;

}

/*文字排版、顏色*/

.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{width:10px}

.w20{width:20px}

.w50{width:50px}

.w90{width:90px}

.w100{width:100px}

.w200{width:200px}

.w250{width:250px}

.w500{width:500px}

.w800{width:800px}

.w{width: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}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 不會用代碼框,所以看著有些亂套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個帥氣的名字閱讀 1,896評論 0 0
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,297評論 0 11
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 2,008評論 0 1
  • login!方法名.action http://localhost:8080/day1/qq/login!find...
    蘋果_283e閱讀 191評論 0 0
  • 她在白天,他在夜里。 ——這是我眼中的白夜行。 關于白夜行,早早就聽聞是非常經(jīng)典的懸疑推理小說。我?guī)е鴮⒁x一本把...
    意未閱讀 443評論 0 2

友情鏈接更多精彩內容