关于CSS Normalize的文件配置-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

关于CSS Normalize的文件配置

不言

Jun 12, 2018 pm 04:04 PM

css

这篇文章主要介绍了CSS Normalize文件配置示例,对全局项目进行设置,需要的朋友可以参考下

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

/*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;}   
h1{font-size:1.6em;}h2,h3,h4{font-size:1.4em;}h5,h6{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文件
主要为如下文件：

<!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-->   
<p class="wrapper">   
    <!--header-->   
    <p class="header">   
        <!--logo-->   
        <p class="logo"></p>   
        <!--logo end-->   
        <!--navigation-->   
        <p class="nav">   
        </p>   
        <!--navigation  end-->   

        <!--banner-->   
        <p class="banner">   
        </p>   
        <!--banner-->   

    </p>   
    <!--header end-->   

    <!--container-->   
    <p class="container">   
        <!--news-->   
        <p class="news">   
        </p>   
        <!--news  end-->   

        <!--sidebar banner-->   
        <p class="sidebar">   
        </p>   
        <!--sidebar banner end-->   

        <!--hot top9-->   
        <p class="hot">   
        </p>   
        <!--hot top9-->   

    </p>   
    <!--container end-->   

    <!--footer-->   
    <p class="footer">   
        <!--about us-->   
        <p class="about-us"></p>   

        <!--webchat-->   
        <p class="webchat"></p>   

        <!--copyright-->   
        <p class="copyright"></p>   
    </p>   
    <!--footer end-->   
</p>   
<!--wrapper end-->   
</body>   
</html>

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

<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" />

值得一提的是，在github上也有做了一个 normalize.css 文件，我在做HTML5项目也将其应用在normalize中。

另外，对于很多开发中来说，Template文件同样是节省了不少写重复代码的时间，同时，又规范了自己的书写习惯。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS的变量variable的解析

CSS的positon属性的分析

Atas ialah kandungan terperinci 关于CSS Normalize的文件配置. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Begitu banyak pautan warnaApr 13, 2025 am 11:36 AM

Di sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.

Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AM

Robin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu

Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AM

Saya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak

Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AM

Banyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang

Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AM

Tambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah

Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AM

Terdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran

Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AM

Kebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga

See all articles