首页 HTML

样式表

项目开发中会引入重置样式表以及基础样式表，更多的有动画样式表、分类样式表等等

重置样式表

reset.css

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
@charset "utf-8";

/*
  Document: CSS样式重置
  Created on: 2022.05.14,00:40:00
  Author: MingLiu
  Description: 重置原始元素其属性
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
textarea,button,input,select,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: none;
  outline: none;
	font-size: 100%;
	font: inherit;
  font-weight: normal;
  list-style: none;
  font-weight: normal;
	vertical-align: baseline;
  text-decoration: none;
}
/* 重置链接a标签的鼠标滑动效果 */
a:active, a:hover {
  text-decoration:none
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family:"pingFangSC-Regular","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
/* 列表样式 */
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*清除浮动*/
.clearfix:before,
.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
}

/*容器*/
.container {
	margin: 10px auto 0px;
	width: 95%;
}

基础样式表

common.less

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
// 常用样式
// Document: CSS样式基础
// Created on: 2022.05.14,00:40:00
// Author: MingLiu
// Description: 基础样式表
// 项目以375px设计稿计算


html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: #fff;
}
#app {
  color: #333;
  background: #fff;
  width: 100%;
  height: 100%;
  font-size: 0.32rem;
  position: relative;
  > div {
    width: 100%;
    height: 100%;
  }
}
// 内容区--移动端
.safe-area {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  background: #fff;
  padding: 0 0.5rem 1.6rem; //安全边界左右25px，底部按钮80px
}
// 下边框
.bb{
  border-bottom: 1px solid #f0f1f2;
}
// 苹方纤细体
.ffs {
  font-family: "PingFangSC-Thin";
}
// 苹方细体
.ffm {
  font-family: "PingFangSC-Light";
}
// 苹方常规体--默认为常规体
// 苹方中粗体
.ffl {
  font-family: "PingFangSC-Medium";
}
//字体大小--类名以px定义
.fs10 {
  font-size: 0.2rem;
}
.fs12 {
  font-size: 0.24rem;
}
.fs14 {
  font-size: 0.28rem;
}
.fs16 {
  font-size: 0.32rem;
}
.fs18 {
  font-size: 0.36rem;
}
.fs20 {
  font-size: 0.4rem;
}
.fs22 {
  font-size: 0.44rem;
}
.fs24 {
  font-size: 0.48rem;
}
.fs26 {
  font-size: 0.52rem;
}
.fs28 {
  font-size: 0.56rem;
}
.fs30 {
  font-size: 0.6rem;
}
.fs32 {
  font-size: 0.64rem;
}
// line-height--同样以px定义
.lh14 {
  line-height: 0.28rem;
}
.lh16 {
  line-height: 0.32rem;
}
.lh18 {
  line-height: 0.36rem;
}
.lh20 {
  line-height: 0.4rem;
}
.lh22 {
  line-height: 0.44rem;
}
.lh24 {
  line-height: 0.48rem;
}
.lh26 {
  line-height: 0.52rem;
}
.lh28 {
  line-height: 0.56rem;
}
.lh30 {
  line-height: 0.6rem;
}
.lh32 {
  line-height: 0.64rem;
}
.lh34 {
  line-height: 0.68rem;
}
.lh36 {
  line-height: 0.72rem;
}
.lh38 {
  line-height: 0.76rem;
}
.lh40 {
  line-height: 0.8rem;
}

动画样式表

animation.css

请参考同系列 “css动画效果” 文章

更新于

请我喝[茶]~(￣▽￣)~*

Ming Liu 微信支付

微信支付

Ming Liu 支付宝

支付宝

Ming Liu 贝宝

贝宝