Maison > Article > interface Web > À propos de la configuration du fichier CSS Normalize

À propos de la configuration du fichier CSS Normalize

不言original: 2018-06-12 16:04:451655parcourir

Cet article présente principalement des exemples de configuration de fichiers CSS Normalize et les paramètres globaux du projet. Les amis dans le besoin peuvent s'y référer

En tant qu'ingénieurs front-end, de nombreuses personnes ont leur propre ensemble de fichiers CSS Normalize, il peut donc le faire. évitez beaucoup de problèmes dans le processus de développement et améliorez l'efficacité du travail. Sur la base du travail précédent, j'ai résumé mon propre fichier CSS Normalize, qui est actuellement utilisé dans pratiquement tous les projets :

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

Pour mon utilisation réelle, j'ai un dossier de fichiers modèles (un nouveau a été récemment ajouté pour Mobile)

Les dossiers à l'intérieur sont grossièrement divisés comme suit :

1) images : stocke les images dans le projet (les dossiers seront divisés selon la division du module du projet)
2) css : stocke les fichiers CSS (il contiendra un fichier base.css, qui prédéfinit la normalisation CSS mentionnée ci-dessus)
3) js : stocke les fichiers js, et il y a également un dossier fournisseur à l'intérieur du Store. plug-in js (par exemple : bibliothèque jQuery), à l'extérieur il y a main.js (fichier js principal), plugins.js (js référencé par plug-in)

Dans le répertoire racine, c'est l'index Fichier .html
principalement Les fichiers suivants :

<!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>

La tête sous Mobile aura les méta-paramètres suivants :

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

Il convient de mentionner que j'ai également fait une normalisation Fichier .css sur github. Je l'applique également en normalisation lorsque je travaille sur des projets HTML5.

De plus, pour de nombreux développeurs, les fichiers modèles permettent également de gagner beaucoup de temps lors de l'écriture de code répété, et en même temps, ils standardisent leurs habitudes d'écriture.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse de la variable CSS

Analyse de l'attribut de position CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisation de la règle @ en CSSArticle suivant：Utilisation de la règle @ en CSS

Articles Liés

Voir plus