转载/NEC:更好的CSS样式解决方案之四/框架篇（css reset/css function/css media/css animation/html template/html email）

最新推荐文章于 2019-09-06 14:06:17 发布

lilly呀

最新推荐文章于 2019-09-06 14:06:17 发布

阅读量450

点赞数

分类专栏： NEC前端CSS规范文章标签： NEC前端CSS规范 NEC前端CSS规范

NEC前端CSS规范专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。

框架

你是否为新建一个空空的html文件或css文件而烦恼？来这里，选择一份合适的基础文件，然后在她的基础上开始你的代码！

css reset

（1）概述

重置样式，清除游览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色、主链接色、主字体等）。

（2）代码展示

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

（3）使用方法

通过右键另存为下载reset.css(2012-11-15)，直接使用或将代码复制到你的css文件顶部。

css function

（1）概述

功能样式，从程勇样式方法中抽离，按需使用，使用前请先阅读CSS规范中相关条例。

（2）代码展示

/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}

（3）使用方法

通过右键另存为下载function.css(2012-11-15)，直接使用或将代码复制到你的css文件中。

css media

（1）概述

通过媒体查询为不同的设备和大小配置不同的样式。

（2）代码展示

/* media */
/* 横屏 */
@media screen and (orientation:landscape){
     
}
/* 竖屏 */
@media screen and (orientation:portrait){
     
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
     
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
     
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
     
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
     
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
     
}
/* 打印 */
@media print{
     
}

（3）使用方法

通过邮件另存为下载 media.css(2012-11-20)，直接使用或将代码复制到你的css文件底部。

css animation

（1）概述

常用动画效果的集合，主要用于效果演示和参考，也可以直接调用。

（2）代码展示（部分）

/* animation */
/* 淡入 */
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-moz-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-ms-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}

（3）使用方法

通过右键另存为下载animation.css(2012-09-28)，直接使用或将代码复制到你的css文件中。

html template

（1）概述

包含完整头部信息和主体结构的HTML基础模板。

（2）代码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>NEC：更好的CSS方案</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>
<div class="g-doc">
    <div class="g-hd">
         
    </div>
    <div class="g-bd">
        <div class="g-mn">
             
        </div>
        <div class="g-sd">
             
        </div>
    </div>
    <div class="g-ft">
         
    </div>
</div>
</body>
</html>

（3）使用方法

通过右键另存为下载template.html（2012-11-16），直接使用或截取部分。

html email

（1）概述

用于制作邮件内容的HTML模板，使用前请先阅读邮件内容规范。

（2）代码展示

<table width="600" cellpadding="0" cellspacing="0" border="0"><tbody><tr><td>
    <div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">
         
        <!-- 水平居左的邮件 -->
         
    </div>
</td></tr></tbody></table>
 
<div style="text-align:center;">
    <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"><tbody><tr><td>
        <div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">
             
            <!-- 水平居中的邮件 -->
             
        </div>
    </td></tr></tbody></table>
</div>

（3）使用方法

通过右键另存为下载email.html（2012-12-21），或复制上面的代码。