-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
193 lines (178 loc) · 8.56 KB
/
style.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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
/*公共*/
*{padding: 0px; margin: 0px;}
.container{ width: 1000px;margin: 0 auto;}
/*布局*/
/*使用display:inline-block水平呈现元素，即在一行上显示不同块的内容。*/
/*左边内容区宽度设为620px，右外边距10px，右边边栏区宽度设为370px，加一起整个宽度1000px。对齐方式为垂直顶部对齐。*/
#content-wrapper article{width: 620px;display: inline-block;vertical-align: top;margin-right: 10px;}
#content-wrapper aside{width: 370px;display: inline-block;vertical-align: top;}
/*左边内容区最近新书和最近促销内容水平呈现。*/
.article-section section{width: 290px;display: inline-block;vertical-align: top;text-align: center;margin:10px 0px 10px 10px;}
/*右边边栏区图书分类和合作伙伴内容水平呈现。*/
.aside-section{width: 180px;display: inline-block;vertical-align: top;margin-right: 5px;}
.article-section section h3{margin: 5px 0 10px 0;}
/*热门推荐*/
.recommend {border-bottom:#CCC dashed 1px;padding-bottom:10px;position:relative;}
.recommend img{display: inline-block;width: 200px; height: 200px;margin-top: 10px;}
/*文本*/
body{ font: 62.5%/1.4 "微软雅黑", Verdana, Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-size:1.6em;}
p, a, span {font-size:1.4em}
p {text-indent:2em;text-align: justify;}
ul{list-style-type: none;}
img{border:none;}
mark{background-color: #e3b503;color: #FFFFFF;}
/*页眉*/
header{height: 150px;background-image:url("images/header.png");position: relative;}
/*导航菜单*/
#nav{ background-image:url("images/navbg.jpg"); height: 60px; text-align:right;}
/*页脚*/
#footer-wrapper{ background-image:url("images/navbg.jpg"); height: 30px;}
#copyright{color: #000000;text-align:center;font-size: 12px; padding-top:5px;}
/*Chapter12*/
/*页脚超连接*/
footer a {display:block;float:left;color:#FFF;text-decoration:none;width:100px;text-align:center;line-height: 60px;font-size: 1.6em;}
#copyright a {text-decoration:none;color:#000;}
#copyright a:hover {text-decoration:none;color:#d78849;}
/*标题*/
h2[id^="title"]{
color:#734633; margin-top: 5px; padding-bottom: 5px;
background-image:url(images/bullet.png);
background-repeat:no-repeat;padding-left:30px;
border-bottom: 1px solid #834524;
}
#title1 {background-position:0 -3px;}
#title2 {background-position:0 -38px;}
#title3 {background-position:0 -68px;}
#title4 {background-position:0 -98px;}
#title5 {background-position:0 -128px;}
#title6 {background-position:0 -155px;}
#title7 {background-position:0 -182px;}
/*页眉logo*/
#logo{position:absolute;top:25px;left:90px;}
#logo a{font-size:1.8em;color:#503;text-decoration:none;}
#logo a h1{font-weight: normal;}
/*间隔图像*/
.border{text-align: center; margin: 10px 0px;}
.border img{width: 370px;}
/*边栏广告*/
section#advert a{display:block;}
section#advert img{width: 370px;}
section#advert{margin: 10px 0px;}
/*页眉logo*/
#logo a h1:first-letter{font-size:140%;}
/*购物车菜单*/
#nav nav{position: relative;}
#menu-logo{position: absolute; right:0px;top: 10px;}
#menu-logo a{
display: inline-block;color: #000000;text-decoration: none;font-size:1.8em;line-height: 40px;text-align: center;padding-left: 40px;padding-right: 15px;
background-image: url("images/cart.gif");background-repeat: no-repeat;background-position: 10px 12px;background-color: #f3f3f3;
}
#menu-logo a:hover{color:#FF0000;}
/*搜索*/
#search{position:absolute;top:111px;left:730px;text-align:right;}
#search input[type="text"] {
font-family: "微软雅黑";background: #f3f3f3;border: solid 1px #ccc;
height: 30px;line-height: 30px;width: 200px;font-size:1.6em;
padding-left: 5px;display: inline-block;vertical-align: top;
}
#search input[type="submit"] {
font-family: "微软雅黑";
background-color: #b4b4b4;color: #fff;border: solid 1px #b4b4b4;
height: 30px;display: inline-block;font-size:1.6em;
vertical-align: top;padding: 0 10px;
}
/*图书分类和合作伙伴超连接*/
.aside-section li a {text-decoration:none;color:#000;}
.aside-section a:hover {text-decoration:none;color:#d78849;}
.aside-section ul{margin: 10px 0 10px 20px;}
/*畅销图书*/
#best-selling li:before{content: counter(listxh);background: #7b5830;padding: 2px 5px;color: #fff;margin-right: 5px;vertical-align: top;}
#best-selling li{
counter-increment: listxh;display: inline-block;
width: 100%;vertical-align: bottom;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis;margin-top: 8px;
transition:text-shadow 1s linear;
border-bottom:#CCC dashed 1px;
}
#best-selling .curr .p-img{display: inline-block;}
#best-selling .curr .p-name{display: inline-block; vertical-align: top;}
#best-selling .curr .p-name strong{display: block; color:#FF0000; text-align:left; margin-top: 20px; font-size: 1.4em;}
#best-selling .curr .p-name del{font-size: 1.4em;font-weight: 900;}
#best-selling .curr{display: none;}
#best-selling a{color: #000000;text-decoration: none; font-size: 1.6em;}
#best-selling li:hover{text-shadow: 1px 4px 4px #000;}
#best-selling li:hover .selling{display:none;}
#best-selling li:hover .curr{display:inline-block;}
/*水平导航菜单*/
nav ul li{display: inline-block;}
nav ul a{
display: inline-block;
line-height: 60px; width: 100px;text-align: center;
border-right: solid 0px #834524;
color: #ffffff;text-decoration: none;font-size:1.8em;
transition:background 0.5s linear;
}
nav ul a:hover{background-color: #834524;}
/*多级菜单*/
#nav nav ul li{position: relative;}
#nav nav ul ul li{background-image:url("images/navbg.jpg");}
#nav nav ul ul li a{border-left: solid 1px #834524;border-right: solid 1px #834524;border-bottom: solid 1px #834524;}
#nav nav ul ul{visibility: hidden;position: absolute;left:-1px;background-image:url("images/navbg.jpg");}
#nav nav ul li:hover ul{visibility: visible; z-index: 100;}
/*面包屑导航*/
.crumb-nav{font-size: 1.4em; margin: 5px 0px;}
.crumb-nav a{text-decoration:none;color:#000;font-size: 1em;}
.crumb-nav a:hover, .crumb-nav a:visited{color:#d78849;}
/*书籍分类页面category.html*/
.piclist ul{display: flex; }
.piclist li { text-align: center;margin:10px 5px;}
.piclist li img{width:192px; border-radius: 10px;transition:all 1s ease; border: 1px solid #834524;}
.piclist li:nth-child(3n+1){margin-left: 10px;}
.piclist li:nth-child(3n+3){margin-right: 10px;}
.piclist li:hover img{transform:scale(1.1);}
/*分页导航*/
#pagebar {text-align:right; margin-top:10px; margin-right:10px;}
#pagebar a {font-size:1.6em;text-decoration:none;color:#FFF;background-color: #a05c39;display:inline-block;width:25px;height:25px; text-align: center;color: #FFFFFF;transition:all 0.5s ease;padding-top: 3px; }
#pagebar a:hover {z-index:100;opacity:.5;transform:scale(1.1);}
#pagebar .arrow{width: 60px;}
/*图书详情*/
.book{display: flex; flex-flow:column; padding: 10px;border: 1px solid #834524;border-radius: 5px; margin: 10px 0px;}
.infobook{display:flex;}
/*关于我们页面about.html*/
#about p{ margin: 10px 10px}
/*购物车页面cart.html*/
.cartt{margin: 10px 5px;}
.cartt table{width:100%; border:1px solid #eee8e1;}
.cartt tr, .cartt td{border:1px solid #eee8e1;/*单元格边框*/}
.cartt th{background-color:#eee8e1; line-height:30px;}
.cartt img{width:50px;}
.cartt a{display:inline-block;background-color: #FF0000; color: #FFFFFF;font-size: 1.1em; padding: 0px 10px; text-decoration: none;}
/*图像切换*/
#adv {position:relative;margin:10px;border: solid 5px #c5a572;box-shadow: 5px 5px 5px #6F605A;}
#adv dl, #adv dd {list-style:none;}
#adv dt {position:absolute;bottom:5px;right:5px;}
#adv dd {overflow:hidden;width:600px; height: 230px;}
#adv dl dt a {
display:block; float:left;
width:17px; height:17px; margin:2px;
border: #963 solid 1px; border-radius: 15px;
background-color:#6F605A; color:#FFF;
text-decoration:none; text-align:center;
padding:0px; font-size:12px;
}
#adv dl dt a:hover {background-color:#C93;}
#message{visibility:hidden;}
#submitmessage{padding: 5px 10px;}
#ulcart{width: 100%; margin: 10px 0px;}
#ulcart .lit{background-color:#963; color:#FFF;height: 25px;padding-top: 5px;}
#ulcart span{display: inline-block;text-align: center;}
#ulcart span:nth-child(1){width: 50%;}
#ulcart span:nth-child(2){width: 16%;}
#ulcart span:nth-child(3){width: 16%;}
#ulcart span:nth-child(4){width: 16%;}
#ulcart .lic{border-bottom: 1px solid #963;}
#advl, #advr{position:absolute;width:80px;height:80px;}
#closel, #closer{position:absolute;width:13px;height:13px;}
#div1{display: inline-block}