In diesem Artikel werden hauptsächlich Beispiele für die Konfiguration von CSS-Normalisierungsdateien und globale Projekteinstellungen vorgestellt
Als Front-End-Ingenieure haben viele Leute ihren eigenen Satz von CSS-Normalisierungsdateien Sparen Sie viel Ärger im Entwicklungsprozess und verbessern Sie die Arbeitseffizienz. Basierend auf der vorherigen Arbeit habe ich meine eigene CSS-Normalisierungsdatei zusammengefasst, die derzeit in praktisch jedem Projekt verwendet wird:
/*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*/Für meine tatsächliche Verwendung habe ich einen Vorlagenordner (vor kurzem wurde ein neuer hinzugefügt für Mobile)
Die darin enthaltenen Ordner sind grob wie folgt unterteilt:
1) Bilder: speichert die Bilder im Projekt (die Ordner werden entsprechend dem Projektmodul unterteilt)
2 ) css: speichert CSS-Dateien (darin befindet sich eine base.css-Datei, die die oben erwähnte CSS-Normalisierung voreinstellt)
3) js: speichert JS-Dateien und es gibt auch einen Render-Ordner darin, um Plug-Ins zu speichern .js (zum Beispiel: jQuery-Bibliothek), es gibt main.js (Haupt-JS-Datei) außerhalb, Plugins.js (von Plug-Ins referenzierte js)
Im Stammverzeichnis ist es die index.html Datei
hauptsächlich die folgenden Dateien:
<!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>Der Kopf unter „Mobile“ hat die folgenden Metaeinstellungen:
<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" />
Es ist erwähnenswert, dass es auch eine normalize.css-Datei auf Github gibt. Ich werde es auch verwenden, wenn ich an HTML5-Projekten arbeite. Die Anwendung ist normalisiert.
Darüber hinaus sparen Vorlagendateien für viele Entwickler auch viel Zeit beim Schreiben wiederholten Codes und standardisieren gleichzeitig ihre Schreibgewohnheiten.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Analyse des CSS-Positionsattributs
Das obige ist der detaillierte Inhalt vonÜber CSS-Dateikonfiguration normalisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
