• 整理base.css,重设浏览器样式


    有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载

      1 /* 
      2 * @Author: liubeimeng
      3 * @Date:   2015-11-11 10:22:02
      4 * @Last Modified by:   liubeimeng
      5 * @Last Modified time: 2015-11-11 10:33:18
      6 * @名称:base.css
      7 * @功能:1、重设浏览器默认样式
      8 *       2、设置通用原子类
      9 */
     10 @charset "utf-8";
     11 /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
     12 html {background:#FFFFFF;color:#000000;}
     13 /* 内外边距通常让各个浏览器样式的表现位置不同 */
     14 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;}
     15 /*
     16 *要注意表单元素并不继承父级 font 的问题 
     17 *tahoma:大河马字体,tahoma为windows操作系统的英文默认字型.tahoma是种非常圆滑的字体.这个字体比较均衡,中英文混排显示时,不会出现中英文不对齐的状态.
     18 *arial:是一套随同多套微软应用软件所分发的无衬线体TrueType字型.
     19 *sans-serif:表示是无衬线字体,是一种通用字体族.
     20 *5b8b4f53就是宋体.用unicode表示,不用SimSun,是因为Firefox的某些版本和Opera不支持SimSun 的写法.注释乱码:强烈建议不要用中文注释.font-family:'宋体'.
     21 *为了方便大家好查,整理了些中文名 Unicode,特此献给其他前端开发的朋友们
     22 *新细明体 65B07EC6660E4F53
     23 *细明体 7EC6660E4F53
     24 *标楷体 680769774F53
     25 *黑体 9ED14F53
     26 *宋体 5B8B4F53
     27 *新宋体 65B05B8B4F53
     28 *仿宋 4EFF5B8B
     29 *楷体 69774F53
     30 *仿宋_GB2312 4EFF5B8B_GB2312
     31 *楷体_GB2312 69774F53_GB2312
     32 *微软正黑体 5FAEx8F6F6B639ED14F53
     33 *微软雅黑 5FAE8F6F96C59ED1
     34  */ 
     35 body,button,input,select,textarea {font:12px tahoma,arial,5b8b4f53,sans-serif;}
     36 input,select,textarea {font-size:100%;}
     37 /* 去掉 table cell 的边距并让其边重合 */
     38 table {border-collapse:collapse;border-spacing:0;}
     39 /* IEBUG:th不继承text-align */
     40 th {
     41     text-align:inherit;
     42 }
     43 /* 去除默认边框 */
     44 fieldset,img {
     45     border:none;
     46 }
     47 /* ie6 7 8(q) bug 显示为行内表现 */
     48 iframe {
     49     display:block;
     50 }
     51 /* 去掉 firefox 下此元素的边框 */
     52 abbr,acronym {
     53     border:none;
     54     font-variant:normal;
     55 }
     56 /* 一致的 del 样式 */
     57 del {
     58     text-decoration:line-through;
     59 }
     60 address,caption,cite,code,dfn,em,th,var {
     61     font-style:normal;
     62     font-weight:500;
     63 }
     64 /* 去掉列表前的标识,li会继承 */
     65 ol,ul {
     66     list-style:none;
     67 }
     68 /* 对齐是排版最重要的因素,别让什么都居中 */
     69 caption,th {
     70     text-align:left;
     71 }
     72 /* 来自yahoo,让标题都自定义,适应多个系统应用 */
     73 h1,h2,h3,h4,h5,h6 {
     74     font-size:100%;
     75     font-weight:500;
     76 }
     77 q:before,q:after {
     78     content:'';
     79 }
     80 /* 统一上标和下标 */
     81 sub,sup {
     82     font-size:75%;
     83     line-height:0;
     84     position:relative;
     85     vertical-align:baseline;
     86 }
     87 sup {
     88     top:-0.5em;
     89 }
     90 sub {
     91     bottom:-0.25em;
     92 }
     93 /* 让链接在hover状态下显示下划线 */
     94 a:hover {
     95     text-decoration:underline;
     96 }
     97 /* 默认不显示下划线,保持页面简洁 */
     98 ins,a {
     99     text-decoration:none;
    100 }
    101 /* 去除 ie6 & ie7 焦点点状线 */
    102 a:focus,*:focus {
    103     outline:none;
    104 }
    105 /* 清除浮动 */
    106 .clearfix:before,.clearfix:after {
    107     content:"";
    108     display:table;
    109 }
    110 .clearfix:after {
    111     clear:both;
    112     overflow:hidden;
    113 }
    114 .clearfix {
    115     zoom:1; /* for ie6 & ie7 */
    116 }
    117 .clear {
    118     clear:both;
    119     display:block;
    120     font-size:0;
    121     height:0;
    122     line-height:0;
    123     overflow:hidden;
    124 }
    125 /* 设置显示和隐藏,通常用来与 js 配合 */
    126 .none{
    127     display:none;
    128 }
    129 .block {
    130     display:block;
    131 }
    132 /* 设置浮动,减少浮动带来的 bug */
    133 .fl,.fr {
    134     display:inline;
    135 }
    136 .fl {
    137     float:left;
    138 }
    139 .fr {
    140     float:right;
    141 }
  • 相关阅读:
    JMX堆栈分析
    Python装饰器示例
    安装指定版本capistrano
    Linux CPU使用率含义及原理
    API gateway 之 kong 安装
    Redis内存分析方法
    Elasticsearch集群内的原理
    Elasticsearch基础
    Python智能检测编码并转码
    (转)rabbitmq的web管理界面无法使用guest用户登录
  • 原文地址:https://www.cnblogs.com/liubeimeng/p/4955403.html
Copyright © 2020-2023  润新知