CSS 정규화 파일 구성 정보

不言원래의: 2018-06-12 16:04:451676검색

이 글에서는 주로 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*/

실제 사용을 위해 템플릿 폴더가 있습니다(최근 One for Mobile에 추가됨)

안에 있는 폴더는 다음과 같습니다. 대략 다음과 같이 나뉩니다.

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 중국어 홈페이지를 주목해주세요!

CSS 정규화 파일 구성 정보

관련 기사