温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中怎么配置Normalize文件

发布时间:2021-06-25 15:54:28 来源:亿速云 阅读:128 作者:Leah 栏目:web开发

CSS中怎么配置Normalize文件,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

作为前端工程师,很多人都有自己的一套CSS Normalize文件,这样能省掉开发过程中的不少麻烦,提高工作效率。在前人的基础上,我总结了自己的CSS Normalize文件,目前基本上每个项目都有在使用中:

  1. /*Normalize*/  
    *{margin:0;padding:0;list-style-type:none;}   
      
    *html,*html body /* 修正IE6振动bug */{   
        background-image:url(about:blank);   
        background-attachment:fixed;   
    }   
    body{   
        font-family:"Microsoft Yahei","Hiragino Sans GB" ,Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
        /*font-size : 62.5%; px数值除以10,然后换上em作为单位*/  
        /*min-width:980px;*/  
        font-size:13px;   
    }   
      
    a,img{border:none;text-decoration:none;}   
    a{blr:expression(this.onFocus=this.blur());} /*去掉a标签的虚线框,避免出现奇怪的选中区域*/  
    /*a:active {test:expression(target="_blank");}*/  
    :focus{outline:0;}   
    label{cursor:pointer;}   
    img{vertical-align:middle;}   
    table{empty-cells:show;border-collapse:collapse;border-spacing:0;}   
    h2{font-size:1.6em;}h3,h4,h5{font-size:1.4em;}h6,h7{font-size:1.2em;}   
    input{border:none;}   
    textarea{overflow:scroll;}   
      
    a, input,textarea, .hover-delay {   
        font-family:"Microsoft Yahei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
        -webkit-transition: all 0.3s ease-out;   
        -moz-transition: all 0.3s ease-out;   
        -ms-transition: all 0.3s ease-out;   
        -o-transition: all 0.3s ease-out;   
        transition: all 0.3s ease-out;   
      
    }   
    input.none-radius{   
        border-radius:0;   
        -moz-border-radius:0;   
        -webkit-border-radius:0;   
    }   
      
    input::-ms-clear{ display:none;}  //去掉输入框的叉叉   
      
    .clear{clear:both;}   
    .txt-indent{text-indent:-999px;overflow:hidden;}   
      
    input[type=text],input[type=tel],input[type=email]{   
    -webkit-appearance: none;   
     box-shadow: none;}   
      
    /*Normalize end*/

对与我的实际使用中,我有一个Template文件夹(最近新增了一个针对Mobile)
里面的文件夹大致分为如下:

    1)images: 存放项目中的图片(里面又会根据项目模块进行文件夹划分)
    2)css: 存放css文件(里面会有一个base.css文件,预置上文中的css normalize)
    3)js:存放js文件,里面还有一个vender的文件夹,存放插件js(例如:jQuery库),外面有main.js(主要js文件),plugins.js(插件引用的js)

根目录下,为index.html文件
主要为如下文件:

CSS Code复制内容到剪贴板

  1. <!doctype html>   
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->   
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->   
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->   
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->   
    <head lang="zh-CN">   
        <meta charset="utf-8" />   
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
        <title>xxx</title>   
        <meta name="keywords" content="xxx" />   
        <meta name="description" content="xxx" />   
      
        <link rel="shortcut icon" href="images/favicon.ico" /> <!-- IE address前ico图标 -->   
        <link rel="stylesheet" href="css/normalize.css" /> <!-- reset style -->   
        <link rel="stylesheet" href="css/base.css" /> <!-- basic style -->   
      
        <script src="js/vendor/jquery-1.10.2.min.js"></script> <!-- jQuery library -->   
        <script src="js/vendor/jquery-ui-1.11.1.js"></script> <!-- jQuery UI library -->   
        <script src="js/main.js"></script> <!-- main js -->   
        <script src="js/plugins.js"></script> <!-- plugins  -->   
      
        <!--[if (gte IE 6)&(lte IE 8)]>     
          <script type="text/javascript" src="js/vendor/selectivizr.js"></script>   
          <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>   
        <![endif]--> <!--/*修正CSS3在IE6-8*/-->   
      
        <!--[if lt IE 9]>   
           <script src="js/html5.js"></script>   
        <![endif]-->   
      
    </head>   
    <body>   
    <!--wrapper-->   
    <div class="wrapper">   
        <!--header-->   
        <div class="header">   
            <!--logo-->   
            <div class="logo"></div>   
            <!--logo end-->   
            <!--navigation-->   
            <div class="nav">   
            </div>   
            <!--navigation  end-->   
      
            <!--banner-->   
            <div class="banner">   
            </div>   
            <!--banner-->   
      
        </div>   
        <!--header end-->   
      
        <!--container-->   
        <div class="container">   
            <!--news-->   
            <div class="news">   
            </div>   
            <!--news  end-->   
      
            <!--sidebar banner-->   
            <div class="sidebar">   
            </div>   
            <!--sidebar banner end-->   
      
            <!--hot top9-->   
            <div class="hot">   
            </div>   
            <!--hot top9-->   
      
        </div>   
        <!--container end-->   
      
        <!--footer-->   
        <div class="footer">   
            <!--about us-->   
            <div class="about-us"></div>   
      
            <!--webchat-->   
            <div class="webchat"></div>   
      
            <!--copyright-->   
            <div class="copyright"></div>   
        </div>   
        <!--footer end-->   
    </div>   
    <!--wrapper end-->   
    </body>   
    </html>

Mobile下的head会有如下meta设置:

  1. <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />   
    <meta name="apple-mobile-web-app-capable" content="yes" />   
    <meta name="apple-touch-fullscreen" content="yes" />   
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI