-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbase.css
More file actions
121 lines (119 loc) · 2.5 KB
/
Copy pathbase.css
File metadata and controls
121 lines (119 loc) · 2.5 KB
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
/*reset css 重置默认的一些样式 浏览器子自带的 目的是保持各种终端显示一致*/
/*所有的标签和伪类 before after*/
*,
::before,
::after{
padding: 0;
margin: 0;
/*在移动端特殊的设置*/
/*清除点击高亮效果*/
-webkit-tap-highlight-color: transparent;
/*设置所有的盒子的宽度以边框开始计算*/
-webkit-box-sizing: border-box;
/*要兼容 webkit 浏览器内核厂商 这种情况一般是老的移动端浏览器*/
box-sizing: border-box;
}
body{
font-size: 14px;
color: #333;
font-family: "MicroSoft YaHei","sans-serif";/*是设备默认的字体*/
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #333;
}
input,textarea{
border: none;
outline: none;
resize: none;
/*特殊的属性定义 清除浏览器给input自带的样式*/
-webkit-appearance: none;/*组件默认的样式空*/
}
/*common css 也就是我们公用的css*/
.f_left{
float: left;
}
.f_right{
float: right;
}
.clearfix::after,
.clearfix::before{
content: ".";
line-height: 0;
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.m_r10{
margin-right: 10px;
}
.m_l10{
margin-left: 10px;
}
.m_t10{
margin-top: 10px;
}
.m_b10{
margin-bottom: 10px;
}
.mianColor{
color: #d8505c;
}
/*所有使用精灵图的 class 以icon_开始的所有class都有这些属性*/
[class^="icon_"]{
background: url("../images/sprites.png") no-repeat;
/*压缩背景图*/
background-size: 200px 200px;
}
/*顶部通栏*/
.jd_topBar{
height: 45px;
background: url("../images/header-bg.png") repeat-x;
background-size: 1px 44px;
border-bottom: 1px solid #e0e0e0;
position: absolute;
width: 100%;
}
.jd_topBar [class^="icon_"]{
width: 40px;
height: 44px;
position: absolute;
padding: 12px 10px;
/*按钮大小需要设置偏大 用户体验*/
top: 0;
background-origin: content-box;/*定位以内容开始定位*/
background-clip: content-box;/*显示背景 从内容开始显示*/
}
/*按钮大小不变 但是显示的背景区域 要变小*/
.jd_topBar .icon_back{
left: 0;
background-position: -20px 0;
}
.jd_topBar .icon_menu{
right: 0;
background-position: -60px 0;
}
.jd_topBar form{
width: 100%;
padding: 0 40px;
}
.jd_topBar form input{
width: 100%;
height: 30px;
border: 1px solid #e0e0e0;
border-radius: 2px;
margin-top: 7px;
}
.jd_topBar h3{
text-align: center;
line-height: 44px;
font-weight: normal;
font-size: 16px;
}