ホームページ > 記事 > ウェブフロントエンド > CSS についてファイル構成の正規化

CSS についてファイル構成の正規化

不言オリジナル: 2018-06-12 16:04:451659ブラウズ

この記事では主に 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 フォルダー (最近モバイル用に追加されました) があります

中のフォルダーは次のとおりです。大きく分けて以下の通りです

1) 画像: プロジェクト内の写真を保存します (プロジェクトモジュールに応じてフォルダーに分けられます)
2) css: CSS ファイルを保存します (base.css ファイルが存在します) 、上記の CSS 正規化をプリセットします)
3) js: js ファイルを保存します。内部にはレンダリングフォルダーもあり、プラグイン 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 の下のヘッドには、次のメタ設定があります:

<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 プロジェクトで正規化するためにそれを適用したことです。

さらに、多くの開発者にとって、テンプレートファイルは、繰り返しコードを書く時間を大幅に節約し、同時に執筆習慣を標準化します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS について ファイル構成の正規化

関連記事

CSS についてファイル構成の正規化