zoukankan      html  css  js  c++  java
  • CSS样式重置表

    目录:html5+css3网页设计与制作目录

     reset.css文件,放置于网站根目录css文件夹中

    /* 把我们所有标签的内外边距清零 */
    * {
        margin: 0;
        padding: 0;
        /* css3盒子模型 */
        box-sizing: border-box;
    }
    
    /* html5新增 的布局元素 */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
    /* em 和 i 斜体的文字不倾斜 */
    em,
    i {
        font-style: normal
    }
    /* 去掉li 的小圆点 */
    ul,ol,li {
        list-style: none
    }
    /* blockquote与q标签都是用来表示内容引用,去掉引号 */
    blockquote, q { quotes:none; }
    blockquote:before, blockquote:after,
    q:before, q:after { content:''; content:none; }
    
    
    textarea { overflow: auto; }
    
    small { font-size: 85%; }
    strong, th { font-weight: bold; }
    
    hr {
        border-bottom:1px solid #FFFFFF;
        border-top:1px solid #E4E4E4;
        border-width:1px 0;
        clear:both;
        height:2px;
        margin:5px 0;
        overflow:hidden;
        }
    
        /* border-collapse:collapse; 表示边框合并在一起。 
        border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。
        */
        table {
            border-collapse:collapse;
            border-spacing:0;
        }
    
    img {
        /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle
    }
    
    button {
        /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
        cursor: pointer
    }
    
    a {
        color: #666;
        text-decoration: none;
        vertical-align:baseline; 
        background:transparent;
    }
    
    a:hover {
        color: #c81623
    }
    
    button,
    input {
        /* "5B8B4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
        font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
        /* 默认有灰色边框我们需要手动去掉 */
        border: 0; 
        outline: none;
    }
    
    /*文字就会和INPUT框对齐。 */
    input, select {
        vertical-align:middle;
    }
    
    body {
        /* CSS3 抗锯齿形 让文字显示的更加清晰 */
        -webkit-font-smoothing: antialiased;
        background-color: #fff;
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
        color: #666
    }
    
    
    .hide,
    .none {
        display: none
    }
    
    
    /* 清除浮动 */
    .clearfix:after {
        visibility: hidden;
        clear: both;
        display: block;
        content: ".";
        height: 0
    }
    
    .clearfix {
        *zoom: 1
    }

     参考文章:

    https://blog.csdn.net/weixin_41986726/article/details/84140543

    转载文章链接已标明,如有侵权请告知。文章仅作为知识记忆所用,如有错误,敬请指正。
  • 相关阅读:
    31天重构学习笔记23. 引入参数对象
    31天重构学习笔记31. 使用多态代替条件判断
    31天重构学习笔记25. 引入契约式设计
    新加坡面试经历
    Release a AutoUpdater tool
    31天重构学习笔记24. 分解复杂判断
    31天重构学习笔记29. 去除中间人对象
    自动更新组件分享
    WPF基础到企业应用系列7——深入剖析依赖属性(WPF/Silverlight核心)
    (收藏)2010年度十大杰出IT博客
  • 原文地址:https://www.cnblogs.com/YorkZhangYang/p/13671267.html
Copyright © 2011-2022 走看看