一、创建html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<
html
lang
=
"zn-CN"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<!--ie8~ie10 使用电脑上IE最新的文档模式edge渲染页面 ie11已放弃兼容模式，本身兼容已经很好了-->
<
meta
http-equiv
=
"x-ua-compatible"
content
=
"IE=edge"
>
<!--移动端响应式设置-->
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<!--SEO-->
<
meta
name
=
"keywords"
content
=
"购物,电商"
>
<
meta
name
=
"description"
content
=
"综合购物平台"
>
<
title
>网页标题</
title
>
<
link
rel
=
"stylesheet"
href
=
"css/normalize.css"
/>
<
link
rel
=
"stylesheet"
href
=
"css/main.css"
/>
</
head
>
<
body
>
<!--版本小于等于ie8处理-->
<!--[if lte IE 8]>
<p class="browserupgrade">您的浏览器版太旧了，请到 <a href="http://browsehappy.com">这里</a>更新，以获取最佳的体验</p>
<![endif]-->
<
header
>
</
header
>
<
div
class
=
"container"
>
</
div
>
<
footer
>
</
footer
>
</
body
>
</
html
>
|
二、基本css
1、初始化页面（normalize.css）：http://down.51cto.com/data/2318760
2、常用基本样式、工具样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/* ===================
基本默认值
================== */
html{
font-size
:
125%
;
/* 浏览器默认16px*125%=20px,页面中使用1rem=20px */
color
:
#222
;
}
::selection{
background-color
:
#b3d4fc
;
text-shadow
:
none
;
}
/* 设置文字选中的颜色，以及是否有阴影 */
ul{
margin
:
0
;
padding
:
0
;
}
li{
list-style
:
none
;
}
/* =====================
工具样式
==================== */
.center-
block
{
display
:
block
;
margin-left
:
auto
;
margin-right
:
auto
;
}
.pull-
right
{
float
:
right
;
!important
;
}
.pull-
left
{
float
:
left
;
!important
;
}
.text-
right
{
text-align
:
right
;
!important
;
}
.text-
left
{
text-align
:
left
;
!important
;
}
.text-
center
{
text-align
:
center
;
!important
;
}
.
hide
{
display
:
none
;
!important
;
}
.
show
{
display
:
block
;
!important
;
}
.invisible{
visibility
:
hidden
;
}
/* 不仅隐藏元素，而且不占用空间 */
.text-
hide
{
font
:
0
/
0
a;
color
:
transparent
;
text-shadow
:
none
;
background-color
:
transparent
;
border
:
0
;
}
/* 隐藏文本 */
.clearfix:before,
.clearfix:after{
content
:
""
;
display
: table;
}
/* 清除浮动1 使用：before可以防止本元素的顶部margin与上方元素的底部margin发生重叠*/
.clearfix:after{
clear
:
both
;
}
/* 清除浮动2 */
/* ======================
浏览器更新提示
===================== */
.browserupgrade{
margin
:
0
;
padding
:
0.5
rem;
background
:
#cccccc
;
}
/* ====================
自定义页面样式
=================== */
body{
font-size
:
0.6
rem;
font-family
:
normal
normal
,microsoft yahei,
Arial
,
sans-serif
;
line-height
:
1.5
;
background-color
:
#f7f7f7
;
}
a{
color
:
#666666
;
text-decoration
:
none
;
}
a:hover,a:active{
color
:
#0ae
;
text-decoration
:
underline
;
}
|
附：
1、颜色拾取器(美工必备屏幕颜色吸取器) http://down.51cto.com/data/2318767
2、10个HTML5美化版复选框和单选框：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html
本文转自 艺晨光 51CTO博客，原文链接：http://blog.51cto.com/ycgit/1939281，如需转载请自行联系原作者
