zoukankan      html  css  js  c++  java
  • CSS重置

    1、注意:在reset的时候,避免不必要的重置,例如“dt”没有默认边距。“ul”、“ol”只有左外边距,td th只有padding值。。。

    2、在使用的时候因为全局设置字体为62.5%,所以页面要包裹class为"fz"的div,设置页面字体为12px。.fz不包含表单元素,所以表单元素因为继承需重置

    .fz input{ font-size:1em;}。 当input需改变为14px时,需添加input.fz14{}

    3、设置img的border:none。当img单独使用的时候无边框,当img被a链接包裹的时候,在ie浏览器出现蓝色边框。so,重置border为none。

    /***
    https://github.com/zhangxinxu/quickLayout/blob/master/quick_layout.css
    注意:非特殊情况不再修改,修改了注明:修改日期及原因,并且更新到博客园
    ***/
    /*reset*/
    body, p, dd, dl, form, h1, h2, h3, ul, ol, textarea { margin: 0; }
    
    ul, ol { padding-left: 0; }
    
    td, th { padding: 0; }
    
    button, input, select, textarea, iframe { margin: 0; padding: 0; }
    
    body, button, input, select, option, textarea { font-family: "Microsoft YaHei", "Arial"; color: #333; font-size: 62.5%; *font-size: 63%; }
    
    input, img { border: none; }
    
    em { font-style: normal; }
    
    input[type="text"], input[type="password"] { text-indent: 4px; }
    
    body { background-color: #fff; }
    
    /*input,button,select,textarea{ border: 1px solid #999; }*/
    li { list-style: none; }
    
    a { color: #0074d9; text-decoration: none; outline: none; }
    
    a:link { }
    
    a:visited { }
    
    a:hover { }
    
    a:active { }
    
    iframe { border: none; }
    
    table { border-collapse: collapse; border-spacing: 0; }
    
    /*去除浏览器默认效果*/
    input:focus, textarea:focus, select:focus { outline: none }
    
    /*去除Chrome等浏览器文本框默认发光边框*/
    input::-ms-clear { display: none; }
    
    /*去除ie10+浏览器文本框后面的小叉叉*/
    textarea { resize: none; }
    
    /*禁止多行文本框textarea拖拽*/
    
    /*------------------- single css ---------------------------*/
    /*background-color*/
    .bg-white { background-color: #fff; }
    
    .bg-red { background-color: #ff4136; }
    
    .bg-grey { background-color: #dcdcdc; }
    
    /*border-color name rule*/
    .bbd { border-bottom: 1px solid #dcdcdc; }
    
    /*clear*/
    .clb { clear: both; }
    
    .cll { clear: left; }
    
    .clr { clear: right; }
    
    /*cursor*/
    .poi { cursor: pointer; }
    
    .def { cursor: default; }
    
    /*colors*/
    .white { color: #fff; }
    
    .grey { color: #dcdcdc; }
    
    .orange { color: #FF8518; }
    
    .red { color: #FF4136; }
    
    .g3 { color: #333; }
    
    .g6 { color: #666; }
    
    /*display*/
    .dn { display: none; }
    
    .dib { display: inline-block; }
    
    .din { display: inline; }
    
    /*float*/
    .l { float: left; }
    
    .r { float: right; }
    
    /*font-size*/
    .fz { font-size: 1.2em; }
    
    .fz button, .fz input, .fz select, .fz textarea, .fz option { font-size: 1em; }
    
    .fz14, input.fz14 { font-size: 1.17em; }
    
    .fz16 { font-size: 1.33em; }
    
    .fz18 { font-size: 1.5em; }
    
    .fz20 { font-size: 1.67em; }
    
    .fz24 { font-size: 2em; }
    
    /*font-family*/
    .fa { font-family: Arial; }
    
    .fv { font-family: verdana; }
    
    .fw { font-family: 'Microsoft Yahei'; }
    
    /*font-style*/
    .n { font-weight: normal; }
    
    .b { font-weight: bold; }
    
    .i { font-style: italic; }
    
    /*letter-spacing*/
    .lt1 { letter-spacing: 1px; }
    
    /*line-height*/
    .lh40 { line-height: 40px; }
    
    /*margin*/
    .ml5 { margin-left: 5px; }
    
    .ml10 { margin-left: 10px; }
    
    .mr5 { margin-right: 5px; }
    
    .mr10 { margin-right: 10px; }
    
    .mt5 { margin-top: 5px; }
    
    .mt10 { margin-top: 10px; }
    
    .mb5 { margin-bottom: 5px; }
    
    .mb10 { margin-bottom: 10px; }
    
    /*overflow*/
    .ovh { overflow: hidden; }
    
    .ova { overflow: auto; }
    
    /*padding*/
    .p10 { padding: 10px; }
    
    .pl5 { padding-left: 5px; }
    
    .pl10 { padding-left: 10px; }
    
    .pr5 { padding-right: 5px; }
    
    .pr10 { padding-right: 10px; }
    
    .pt5 { padding-top: 5px; }
    
    .pt10 { padding-top: 10px; }
    
    .pb5 { padding-bottom: 5px; }
    
    .pb10 { padding-bottom: 10px; }
    
    /*position*/
    .rel { position: relative; }
    
    .abs { position: absolute; }
    
    /*percent width value*/
    .pctW { width: 100%; }
    
    .pctH { height: 100% }
    
    /*text-align*/
    .tc { text-align: center; }
    
    .tr { text-align: right; }
    
    .tl { text-align: left; }
    
    /*text-decoration*/
    .tdl { text-decoration: underline; }
    
    .tdn { text-decoration: none; }
    
    /*vertical-align*/
    .vm { vertical-align: middle; }
    
    .vtb { vertical-align: text-bottom; }
    
    .vb { vertical-align: bottom; }
    
    .vt { vertical-align: top; }
    
    .vn { vertical-align: -2px; }
    
    /*visibility*/
    .vh { visibility: hidden; }
    
    .vv { visibility: visible; }
    
    /*white-space*/
    .nowrap { white-space: nowrap; }
    
    /*white-wrap*/
    .bk { word-wrap: break-word; }
    
    /*z-index*/
    .zx1 { z-index: 1; }
    
    .zx2 { z-index: 2; }
    
    .zx3 { z-index: 3; }
    
    .zx8 { z-index: 8; }
    
    .zx9 { z-index: 9; }
    
    /*zoom*/
    .z { *zoom: 1; }
    
    /*------------------- multiply css ---------------------------*/
    /*块状元素水平居中*/
    .auto { margin-left: auto; margin-right: auto; }
    
    /*清除浮动*/
    .fix { *zoom: 1; }
    
    .fix:after { display: table; content: ''; clear: both; }
    
    /*双栏自适应cell部分连续英文符换行*/
    .cell { display: table-cell; *display: inline-block; }
    
    .cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
    
    /*单行文字溢出虚点显示*/
    .ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    
    /*css3过渡动画效果*/
    .trans { -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }
    View Code
  • 相关阅读:
    第31课
    第30课
    第29课
    第28课
    第27课
    ubuntu 允许root用户登录到ssh
    openfire 安装配置时出现The Openfire database schema does not appear to be installed. Follow the installati错误的解决方案
    ubuntu 16 “无法获得锁”解决方案
    增加phpmyadmin导入文件上限
    ubuntu-查看所有用户
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4206933.html
Copyright © 2011-2022 走看看