解读Nec框架
一、css reset
/* 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\4f
53;
color
:
#333
;
outline
:
0;
}
body{
background
:
#fff
;}
a,a:hover{
color
:
#333
;}
二、css function
/* 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\4f
53;
}
.f-ff1{
font-family
:
"Microsoft YaHei"
,\5fae\8f6f\96c5\9ed1,
arial
,\5b8b\4f
53;
}
.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
;}
三、css media
/* 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
{
}
四、css animation
/* 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;
}
}
五、html template
<!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
>
六、html email
<
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
>