网页设计----万象小说网（html+css）
作者：互联网
首页
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 position: absolute;
18 float: left;
19 padding-left:100px;
20 }
21 #search{
22 line-height: 280px;
23 position: relative;
24 left: 950px;
25 }
26 #website{
27 font-style: italic;
28 font-size: 12px;
29 position: relative;
30 left: 1080px;
31 top: -160px;
32 -webkit-transform: skew(-10deg, 10deg);
33 -moz-transform: skew(-10deg, 10deg);
34
35 }
36 nav{
37 background: #d8d4cb;
38 width: 1200px;
39 height: 35px;
40 border-radius: 0px 0px 30px 30px;
41 margin: auto;
42 }
43 nav ul{
44 font-family: arial;
45 font-size: 18px;
46 list-style: none;
47 padding-right: 80px;
48 }
49 nav ul li a:hover{
50 background-color: #e8e5dc;
51 }
52 nav ul li a {
53 display: block;
54 float: right;
55 color: black;
56 line-height: 35px;
57 text-decoration: none;
58 padding: 0 32px 0 32px;
59 border-radius: 10px 10px 0 0;
60 }
61
62 aside{
63 width: 1200px;
64 height: 770px;
65 background: #e8e5dc;
66 border-radius: 30px 30px 30px 30px;
67 margin: auto;
68 margin-top: 10px;
69 position: relative;
70 }
71 aside a{
72 text-decoration: none;
73 color: #000000;
74 }
75 aside a:hover{
76 color: lightcoral;
77 }
78 aside .l-aside strong{
79 font-size: 20px;
80 font-style: italic;
81 position: absolute;
82 left: 40px;
83 top: 20px;
84 }
85 aside .l-aside .boy-hr{
86 position: absolute;
87 left: 20px;
88 top: 48px;
89 }
90
91 aside .l-aside .cate-cell-1{
92 position: absolute;
93 left: 20px;
94 top: 70px;
95 width: 300px;
96 height: 300px;
97 background: #f5f6f0;
98 }
99 aside .l-aside .cate-cell-1 img{
100 position: absolute;
101 left: 100px;
102 top: 6px;
103 }
104 aside .l-aside .cate-cell-1 .p1{
105 font-size: 20px;
106 font-weight:bolder;
107 position: absolute;
108 top: 110px;
109 left: 130px;
110 }
111 aside .l-aside .cate-cell-1 .p2{
112 font-size: 14px;
113 position: absolute;
114 top: 138px;
115 left: 118px;
116 color: dimgray;
117 }
118 aside .l-aside .cate-cell-1 .p3{
119 font-size: 12px;
120 position: absolute;
121 top: 160px;
122 left: 104px;
123 color: darkgray;
124 }
125 aside .l-aside .cate-cell-1 .p4{
126 font-size: 14px;
127 position: absolute;
128 top: 160px;
129 padding: 20px;
130 }
131 aside .l-aside .cate-cell-1 input{
132 position: absolute;
133 top: 260px;
134 left: 94px;
135 }
136
137 aside .l-aside .cate-cell-2{
138 position: absolute;
139 left: 320px;
140 top: 70px;
141 width: 286px;
142 height: 150px;
143 /*background: #f5f6f0;*/
144 }
145 aside .l-aside div div span{
146 color: #A9A9A9;
147 }
148 aside .l-aside div div .p21{
149 font-size: 16px;
150 font-weight: bolder;
151 position: absolute;
152 left: 20px;
153 top: 10px;
154 }
155 aside .l-aside div div .p22{
156 position: absolute;
157 left: 20px;
158 top: 45px;
159 }
160 aside .l-aside div div .p23{
161 position: absolute;
162 left: 20px;
163 top: 70px;
164 }
165 aside .l-aside div div .p24{
166 position: absolute;
167 left: 20px;
168 top: 95px;
169 }
170 aside .l-aside div div .p25{
171 position: absolute;
172 left: 20px;
173 top: 120px;
174 }
175 aside .l-aside div div button{
176 position: absolute;
177 left: 240px;
178 top: 10px;
179 }
180
181 aside .l-aside .cate-cell-3{
182 position: absolute;
183 left: 320px;
184 top: 220px;
185 width: 286px;
186 height: 150px;
187 /*background: #f5f6f0;*/
188 }
189
190 aside .l-aside .cate-cell-4{
191 position: absolute;
192 left: 606px;
193 top: 70px;
194 width: 286px;
195 height: 150px;
196 /*background: #f5f6f0;*/
197 }
198 aside .l-aside .cate-cell-5{
199 position: absolute;
200 left: 606px;
201 top: 220px;
202 width: 286px;
203 height: 150px;
204 /*background: #f5f6f0;*/
205 }
206 aside .l-aside .cate-cell-6{
207 position: absolute;
208 left: 892px;
209 top: 70px;
210 width: 286px;
211 height: 150px;
212 /*background: #f5f6f0;*/
213 }
214 aside .l-aside .cate-cell-7{
215 position: absolute;
216 left: 892px;
217 top: 220px;
218 width: 286px;
219 height: 150px;
220 /*background: #f5f6f0;*/
221 }
222
223 aside .r-aside strong{
224 font-size: 20px;
225 font-style: italic;
226 position: absolute;
227 left: 40px;
228 top: 400px;
229 }
230 aside .r-aside .girl-hr{
231 position: absolute;
232 left: 20px;
233 top: 428px;
234 }
235 aside .r-aside .cate-cell-11{
236 position: absolute;
237 left: 20px;
238 top: 450px;
239 width: 300px;
240 height: 300px;
241 background: #f5f6f0;
242 }
243 aside .r-aside .cate-cell-11 img{
244 position: absolute;
245 left: 100px;
246 top: 6px;
247 }
248 aside .r-aside .cate-cell-11 .p1{
249 font-size: 20px;
250 font-weight:bolder;
251 position: absolute;
252 top: 110px;
253 left: 110px;
254 }
255 aside .r-aside .cate-cell-11 .p2{
256 font-size: 14px;
257 position: absolute;
258 top: 138px;
259 left: 118px;
260 color: dimgray;
261 }
262 aside .r-aside .cate-cell-11 .p3{
263 font-size: 12px;
264 position: absolute;
265 top: 160px;
266 left: 94px;
267 color: darkgray;
268 }
269 aside .r-aside .cate-cell-11 .p4{
270 font-size: 14px;
271 position: absolute;
272 top: 160px;
273 padding: 20px;
274 }
275 aside .r-aside .cate-cell-11 input{
276 position: absolute;
277 top: 260px;
278 left: 94px;
279 }
280
281 aside .r-aside .cate-cell-22{
282 position: absolute;
283 left: 320px;
284 top: 450px;
285 width: 286px;
286 height: 300px;
287 /*background: #f5f6f0;*/
288 }
289 aside .r-aside div div span{
290 color: #A9A9A9;
291 }
292 aside .r-aside div div .p21{
293 font-size: 16px;
294 font-weight: bolder;
295 position: absolute;
296 left: 20px;
297 top: 10px;
298 }
299 aside .r-aside div div img{
300 position: absolute;
301 top: 40px;
302 left: 20px;
303 }
304 aside .r-aside div div .p22{
305 position: absolute;
306 left: 128px;
307 right: 20px;
308 top: 38px;
309 }
310 aside .r-aside div div .p23{
311 position: absolute;
312 left: 128px;
313 right: 20px;
314 top: 85px;
315 font-size: 14px;
316 color:#696969
317 }
318 aside .r-aside div div .p24{
319 position: absolute;
320 left: 20px;
321 top: 150px;
322 }
323 aside .r-aside div div .p25{
324 position: absolute;
325 left: 20px;
326 top: 178px;
327 }
328 aside .r-aside div div .p26{
329 position: absolute;
330 left: 20px;
331 top: 206px;
332 }
333 aside .r-aside div div .p27{
334 position: absolute;
335 left: 20px;
336 top: 234px;
337 }
338 aside .r-aside div div .p28{
339 position: absolute;
340 left: 20px;
341 top: 262px;
342 }
343 aside .r-aside div div button{
344 position: absolute;
345 left: 240px;
346 top: 10px;
347 }
348
349 aside .r-aside .cate-cell-44{
350 position: absolute;
351 left: 606px;
352 top: 450px;
353 width: 286px;
354 height: 300px;
355 /*background: #f5f6f0;*/
356 }
357
358 aside .r-aside .cate-cell-66{
359 position: absolute;
360 left: 892px;
361 top: 450px;
362 width: 286px;
363 height: 300px;
364 /*background: #f5f6f0;*/
365 }
366
367 footer{
368 width: 1200px;
369 height: 30px;
370 background: #e8e5dc;
371 margin: auto;
372 border-radius: 30px 30px 30px 30px;
373 margin-top: 10px;
374 }
375 footer ul{
376 font-family: arial;
377 font-size: 14px;
378 list-style: none;
379 position: relative;
380 left: 165px;
381 }
382 footer ul li{
383 float: left;
384 }
385 footer ul li a:hover{
386 background-color: #f5f6f0;
387 }
388 footer ul li a {
389 display: block;
390 float: right;
391 color: black;
392 line-height: 35px;
393 text-decoration: none;
394 padding: 0 32px 0 32px;
395 border-radius: 10px 10px 0 0;
396
397 }
index-1-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 <div id="search"> 15 <input style="width: 120px; height: 20px;" autofocus="on"> 16 <button><img src="something/s-home/11.jpg"/></button> 17 </div> 18 <div id="website"> 19 <ruby> 20 万象小说网<rt><code>www.yanruijie.com</code></rt> 21 </ruby> 22 </div> 23 </header> 24 <nav> 25 <ul> 26 <li><a href="index6.html"><strong>漫改</strong></a></li> 27 <li><a href="index5.html"><strong>壁纸</strong></a></li> 28 <li><a href="index4.html"><strong>投稿</strong></a></li> 29 <li><a href="index3.html"><strong>话题</strong></a></li> 30 <li><a href="index2.html"><strong>排行</strong></a></li> 31 <li><a href="index.html"><strong>首页</strong></a></li> 32 </ul> 33 </nav> 34 <aside> 35 <div class="l-aside"> 36 <strong>男生频道</strong> 37 <hr class="boy-hr" width="70%" style="height: 1px;" color="#888"/> 38 <div> 39 <div class="cate-cell-1"> 40 <img src="something/s-home/1.jpg"/> 41 <p class="p1">剑来</p> 42 <p class="p2">烽火戏诸侯</p> 43 <p class="p3">古典仙侠 Ι 连载中</p> 44 <p class="p4">我陈平安，唯有一剑，可搬山，倒海，降妖，镇魔，敕神，摘星，断江，摧城，开天！———— 我叫陈平安，平平安安的平安，我是一名剑客。</p> 45 <input type="button" value="立即阅读" style="width: 110px;height: 30px;border: 2px #c8d7d2;"> 46 </div> 47 <div class="cate-cell-2"> 48 <p class="p21">奇幻玄幻</p> 49 <p class="p22"> 50 <span>[异术]</span> 51 <a href="#">引辰：人类进入异能时代</a> 52 </p> 53 <p class="p23"> 54 <span>[异世]</span> 55 <a href="#">我修复宇宙：顺道补地球</a> 56 </p> 57 <p class="p24"> 58 <span>[玄幻]</span> 59 <a href="#">镜像系统：宅男异界无敌</a> 60 </p> 61 <p class="p25"> 62 <span>[神话]</span> 63 <a href="#">三魂晋道：转轮回炼人心</a> 64 </p> 65 <button>更多</button> 66 </div> 67 <div class="cate-cell-3"> 68 <p class="p21">都市娱乐</p> 69 <p class="p22"> 70 <span>[异术]</span> 71 <a href="#">引辰：人类进入异能时代</a> 72 </p> 73 <p class="p23"> 74 <span>[异世]</span> 75 <a href="#">我修复宇宙：顺道补地球</a> 76 </p> 77 <p class="p24"> 78 <span>[玄幻]</span> 79 <a href="#">镜像系统：宅男异界无敌</a> 80 </p> 81 <p class="p25"> 82 <span>[神话]</span> 83 <a href="#">三魂晋道：转轮回炼人心</a> 84 </p> 85 <button>更多</button> 86 </div> 87 <div class="cate-cell-4"> 88 <p class="p21">科幻游戏</p> 89 <p class="p22"> 90 <span>[异术]</span> 91 <a href="#">引辰：人类进入异能时代</a> 92 </p> 93 <p class="p23"> 94 <span>[异世]</span> 95 <a href="#">我修复宇宙：顺道补地球</a> 96 </p> 97 <p class="p24"> 98 <span>[玄幻]</span> 99 <a href="#">镜像系统：宅男异界无敌</a> 100 </p> 101 <p class="p25"> 102 <span>[神话]</span> 103 <a href="#">三魂晋道：转轮回炼人心</a> 104 </p> 105 <button>更多</button> 106 </div> 107 <div class="cate-cell-5"> 108 <p class="p21">武侠仙侠</p> 109 <p class="p22"> 110 <span>[异术]</span> 111 <a href="#">引辰：人类进入异能时代</a> 112 </p> 113 <p class="p23"> 114 <span>[异世]</span> 115 <a href="#">我修复宇宙：顺道补地球</a> 116 </p> 117 <p class="p24"> 118 <span>[玄幻]</span> 119 <a href="#">镜像系统：宅男异界无敌</a> 120 </p> 121 <p class="p25"> 122 <span>[神话]</span> 123 <a href="#">三魂晋道：转轮回炼人心</a> 124 </p> 125 <button>更多</button> 126 </div> 127 <div class="cate-cell-6"> 128 <p class="p21">竞技悬疑</p> 129 <p class="p22"> 130 <span>[异术]</span> 131 <a href="#">引辰：人类进入异能时代</a> 132 </p> 133 <p class="p23"> 134 <span>[异世]</span> 135 <a href="#">我修复宇宙：顺道补地球</a> 136 </p> 137 <p class="p24"> 138 <span>[玄幻]</span> 139 <a href="#">镜像系统：宅男异界无敌</a> 140 </p> 141 <p class="p25"> 142 <span>[神话]</span> 143 <a href="#">三魂晋道：转轮回炼人心</a> 144 </p> 145 <button>更多</button> 146 </div> 147 <div class="cate-cell-7"> 148 <p class="p21">历史军事</p> 149 <p class="p22"> 150 <span>[异术]</span> 151 <a href="#">引辰：人类进入异能时代</a> 152 </p> 153 <p class="p23"> 154 <span>[异世]</span> 155 <a href="#">我修复宇宙：顺道补地球</a> 156 </p> 157 <p class="p24"> 158 <span>[玄幻]</span> 159 <a href="#">镜像系统：宅男异界无敌</a> 160 </p> 161 <p class="p25"> 162 <span>[神话]</span> 163 <a href="#">三魂晋道：转轮回炼人心</a> 164 </p> 165 <button>更多</button> 166 </div> 167 </div> 168 </div> 169 <div class="r-aside"> 170 <strong>女生频道</strong> 171 <hr class="girl-hr" width="70%" style="height: 1px;" color="#888"/> 172 <div> 173 <div class="cate-cell-11"> 174 <img src="something/s-home/2.jpeg"/> 175 <p class="p1">深宫报道</p> 176 <p class="p2">乱步非鱼</p> 177 <p class="p3">古代言情 Ι 61.0万字</p> 178 <p class="p4">宫斗攻略、皇上行程、八卦秘闻？快来邸报府订购吧</p> 179 <input type="button" value="立即阅读" style="width: 110px;height: 30px;border: 2px #c8d7d2;"> 180 </div> 181 <div class="cate-cell-22"> 182 <p class="p21">古代言情</p> 183 <img src="something/s-home/3.jpeg"> 184 <p class="p22"><a href="#">农门悍妻：带着萌宝嫁皇帝</a></p> 185 <p class="p23">现代白领成农家寡妇，斗天斗地</p> 186 <p class="p24"> 187 <span>[架空]</span> 188 <a href="#">毒后难为</a> 189 </p> 190 <p class="p25"> 191 <span>[穿越]</span> 192 <a href="#">穿越蛮荒做巫后</a> 193 </p> 194 <p class="p26"> 195 <span>[架空]</span> 196 <a href="#">重生之宠妾要上天</a> 197 </p> 198 <p class="p27"> 199 <span>[穿越]</span> 200 <a href="#">本反派要改邪归正</a> 201 </p> 202 <p class="p28"> 203 <span>[架空]</span> 204 <a href="#">嫡妃谋略：冷王，别毒舌</a> 205 </p> 206 <button>更多</button> 207 </div> 208 209 <div class="cate-cell-44"> 210 <p class="p21">都市言情</p> 211 <img src="something/s-home/4.jpeg"> 212 <p class="p22"><a href="#">闹婚蜜爱，坑夫甜妻上线了</a></p> 213 <p class="p23">一封神秘的邮件，从此改变了</p> 214 <p class="p24"> 215 <span>[架空]</span> 216 <a href="#">毒后难为</a> 217 </p> 218 <p class="p25"> 219 <span>[穿越]</span> 220 <a href="#">穿越蛮荒做巫后</a> 221 </p> 222 <p class="p26"> 223 <span>[架空]</span> 224 <a href="#">重生之宠妾要上天</a> 225 </p> 226 <p class="p27"> 227 <span>[穿越]</span> 228 <a href="#">本反派要改邪归正</a> 229 </p> 230 <p class="p28"> 231 <span>[架空]</span> 232 <a href="#">嫡妃谋略：冷王，别毒舌</a> 233 </p> 234 <button>更多</button> 235 </div> 236 237 <div class="cate-cell-66"> 238 <p class="p21">幻想时空</p> 239 <img src="something/s-home/5.jpeg"> 240 <p class="p22"><a href="#">极品丹童，掌门，喝药啦</a></p> 241 <p class="p23">逆天丹童太威武，竟然敢给掌门</p> 242 <p class="p24"> 243 <span>[架空]</span> 244 <a href="#">毒后难为</a> 245 </p> 246 <p class="p25"> 247 <span>[穿越]</span> 248 <a href="#">穿越蛮荒做巫后</a> 249 </p> 250 <p class="p26"> 251 <span>[架空]</span> 252 <a href="#">重生之宠妾要上天</a> 253 </p> 254 <p class="p27"> 255 <span>[穿越]</span> 256 <a href="#">本反派要改邪归正</a> 257 </p> 258 <p class="p28"> 259 <span>[架空]</span> 260 <a href="#">嫡妃谋略：冷王，别毒舌</a> 261 </p> 262 <button>更多</button> 263 </div> 264 265 </div> 266 </div> 267 </aside> 268 <footer> 269 <ul> 270 <li><a href="#">关于万象</a></li> 271 <li><a href="#">诚聘英才</a></li> 272 <li><a href="#">商务合作</a></li> 273 <li><a href="#">法律声明</a></li> 274 <li><a href="#">帮助中心</a></li> 275 <li><a href="#">作者投稿</a></li> 276 <li><a href="#">联系我们</a></li> 277 </ul> 278 </footer> 279 </body> 280 </html>index-1
排行
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 float: left;
18 padding-left:100px;
19 }
20 #website{
21 font-style: italic;
22 font-size: 12px;
23 position: relative;
24 left: 710px;
25 top: 50px;
26 -webkit-transform: skew(-10deg, 10deg);
27 -moz-transform: skew(-10deg, 10deg);
28 }
29 nav{
30 background: #d8d4cb;
31 width: 1200px;
32 height: 35px;
33 border-radius: 0px 0px 30px 30px;
34 margin: auto;
35 }
36 nav ul{
37 font-family: arial;
38 font-size: 18px;
39 list-style: none;
40 padding-right: 80px;
41 }
42 nav ul li a:hover{
43 background-color: #e8e5dc;
44 }
45 nav ul li a {
46 display: block;
47 float: right;
48 color: black;
49 line-height: 35px;
50 text-decoration: none;
51 padding: 0 32px 0 32px;
52 border-radius: 10px 10px 0 0;
53 }
54
55 aside{
56 width: 1200px;
57 height: 920px;
58 background: #e8e5dc;
59 margin: auto;
60 border-radius: 30px 30px 30px 30px;
61 margin-top: 10px;
62 position: relative;
63 }
64 aside #l-d{
65 width: 260px;
66 height: 520px;
67 background: #f5f6f0;
68 margin-left: 20px;
69 border-radius: 20px;
70 /*position: absolute;
71 top: 20px;*/
72 float: left;
73 margin-top: 20px;
74 }
75 aside #l-d p{
76 font-size: 18px;
77 margin:10px 0px 10px 20px;
78 }
79 aside #l-d .hr{
80 margin-left: 20px;
81 }
82 aside #l-d ul {
83 font-size: 16px;
84 font-family: arial;
85 padding-left: 30px;
86 }
87 aside #l-d ul li{
88 margin-bottom: 8px;
89 }
90 aside #l-d ul li a{
91 text-decoration: none;
92 color: black;
93 }
94 aside #l-d ul li a:hover{
95 color: lightcoral;
96 }
97
98 aside #t-d{
99 width: 870px;
100 height: 100px;
101 background: #f5f6f0;
102 position: absolute;
103 top: 20px;
104 left: 300px;
105 }
106 aside #t-d p{
107 position: absolute;
108 font-size: 20px;
109 color: white;
110 line-height: 100px;
111 left: 50px;
112 }
113
114 aside #c-d{
115 width: 870px;
116 height: 300px;
117 /*background: #f5f6f0;*/
118 position: absolute;
119 top: 140px;
120 left: 300px;
121 display: table;
122 }
123 aside #c-d td{
124 display: table-cell;
125 height: 100%;
126 /* border: 1px solid black;*/
127 text-align: center;
128 vertical-align: middle;
129 font-size: 12px;
130 }
131 aside #c-d p{
132 margin-bottom: 4px;
133 }
134 aside #c-d p a{
135 text-decoration: none;
136 color: black;
137 }
138 aside #c-d p a:hover{
139 color: lightcoral;
140 }
141 aside #c-d p a span{
142 color: lightcoral;
143 }
144 aside #c-d .td-1{
145 width: 145px;
146 height: 150px;
147 background: #f5f6f0;
148 }
149
150 aside #b-d{
151 width: 870px;
152 height: 380px;
153 /*background: #f5f6f0;*/
154 position: absolute;
155 top: 480px;
156 left: 300px;
157 display: table;
158 }
159 aside #b-d .speace-1{
160 width: 260px;
161 border: 1px solid black;
162 background: #f5f6f0;
163 position: relative;
164 border-radius: 20px;
165 }
166 aside #b-d .speace-2{
167 width: 40px;
168 }
169 aside #b-d td p:first-child{
170 margin: 10px 0px 10px 30px;
171 }
172 aside #b-d ol{
173 margin-left: 30px;
174 color: red;
175 }
176 aside #b-d ol li{
177 margin-bottom: 4px;
178 margin-top: 4px;
179 }
180 aside #b-d ol li a{
181 text-decoration: none;
182 color: #000000;
183 }
184 aside #b-d ol li span{
185 color: #000000;
186 }
187 aside #b-d ol li a:hover{
188 color: lightcoral;
189 }
190 aside #b-d ol li p{
191 font-size: 14px;
192 color: #A9A9A9;
193 }
194 aside #b-d ol li img{
195 position: absolute;
196 top: 52px;
197 left: 160px;
198 }
199
index-2-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index2.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 <div id="website"> 15 <ruby> 16 万象小说网<rt><code>www.yanruijie.com</code></rt> 17 </ruby> 18 </div> 19 </header> 20 <nav> 21 <ul> 22 <li><a href="index6.html"><strong>漫改</strong></a></li> 23 <li><a href="index5.html"><strong>壁纸</strong></a></li> 24 <li><a href="index4.html"><strong>投稿</strong></a></li> 25 <li><a href="index3.html"><strong>话题</strong></a></li> 26 <li><a href="index2.html"><strong>排行</strong></a></li> 27 <li><a href="index.html"><strong>首页</strong></a></li> 28 </ul> 29 </nav> 30 <aside> 31 <div id="l-d"> 32 <p><strong>人气榜单</strong></p> 33 <hr class="hr" width="80%" color="lightgray"/> 34 <p><strong>作品榜单</strong></p> 35 <ul> 36 <li><a href="#">月票榜</a> </li> 37 <li><a href="#">24小时畅销榜</a> </li> 38 <li><a href="#">新书榜</a> </li> 39 <li><a href="#">点击榜</a> </li> 40 <li><a href="#">推荐榜</a> </li> 41 <li><a href="#">捧场榜</a> </li> 42 <li><a href="#">完结榜</a> </li> 43 <li><a href="#">新书订阅榜</a> </li> 44 <li><a href="#">24小时更新榜</a> </li> 45 </ul> 46 <hr class="hr" width="80%" color="lightgray"/> 47 <p><strong>用户榜单</strong></p> 48 <ul> 49 <li><a href="#">读者消费榜</a> </li> 50 </ul> 51 <hr class="hr" width="80%" color="lightgray"/> 52 <p><strong>作者榜单</strong></p> 53 <ul> 54 <li><a href="#">作者人气榜</a> </li> 55 </ul> 56 </div> 57 <div id="t-d"> 58 <p><strong>人气榜单</strong></p> 59 <img src="something/s-paihang/titlebg.png" /> 60 </div> 61 <div id="c-d"> 62 <table> 63 <tr> 64 <td class="td-1"><img src="something/s-paihang/1.jpg"> </td> 65 <td class="td-1"> 66 <p><a href="#"><strong><span style="color: lightcoral;">TOP1：</span><big>剑来</big></strong></a> </p> 67 <p>字数<big>453.1万</big></p> 68 <p>总推荐<big>675.3万</big></p> 69 <p>总点击<big>8890.1万</big></p> 70 <p>周推荐<big>19.3万</big></p> 71 </td> 72 <td class="td-1"><img src="something/s-paihang/2.jpg"> </td> 73 <td > 74 <p><a href="#"><strong><span style="color: lightcoral;">TOP2：</span><big>一剑独尊</big></strong></a> </p> 75 <p>字数<big>453.1万</big></p> 76 <p>总推荐<big>675.3万</big></p> 77 <p>总点击<big>8890.1万</big></p> 78 <p>周推荐<big>19.3万</big></p> 79 </td> 80 <td class="td-1"><img src="something/s-paihang/3.jpeg"> </td> 81 <td class="td-1"> 82 <p><a href="#"><strong><span style="color: lightcoral;">TOP3：</span><big>长宁帝军</big></strong></a> </p> 83 <p>字数<big>453.1万</big></p> 84 <p>总推荐<big>675.3万</big></p> 85 <p>总点击<big>8890.1万</big></p> 86 <p>周推荐<big>19.3万</big></p> 87 </td> 88 </tr> 89 <tr> 90 <td class="td-1"><img src="something/s-paihang/4.jpeg"> </td> 91 <td > 92 <p><a href="#"><strong><span style="color: lightcoral;">TOP4：</span><big>帝道独尊</big></strong></a> </p> 93 <p>字数<big>453.1万</big></p> 94 <p>总推荐<big>675.3万</big></p> 95 <p>总点击<big>8890.1万</big></p> 96 <p>周推荐<big>19.3万</big></p> 97 </td> 98 <td class="td-1"><img src="something/s-paihang/5.jpeg"> </td> 99 <td class="td-1"> 100 <p><a href="#"><strong><span style="color: lightcoral;">TOP5：</span><big>剑骨</big></strong></a> </p> 101 <p>字数<big>453.1万</big></p> 102 <p>总推荐<big>675.3万</big></p> 103 <p>总点击<big>8890.1万</big></p> 104 <p>周推荐<big>19.3万</big></p> 105 </td> 106 <td class="td-1"><img src="something/s-paihang/6.jpeg"> </td> 107 <td > 108 <p><a href="#"><strong><span style="color: lightcoral;">TOP6：</span><big>辐射信仰</big></strong></a> </p> 109 <p>字数<big>453.1万</big></p> 110 <p>总推荐<big>675.3万</big></p> 111 <p>总点击<big>8890.1万</big></p> 112 <p>周推荐<big>19.3万</big></p> 113 </td> 114 </tr> 115 </table> 116 </div> 117 <div id="b-d"> 118 <table> 119 <tr> 120 <td class="speace-1"> 121 <p><strong><big>新书榜</big></strong></p> 122 <ol> 123 <hr class="hr" width="80%" color="lightgray"/> 124 <li> 125 <a href="#"><big>万道唯尊</big></a> 126 <p>三两姜山</p> 127 <p>[玄幻]</p> 128 <span>3104213 人气数</span> 129 <img src="something/s-paihang/211.jpg"> 130 </li> 131 <hr class="hr" width="80%" color="lightgray"/> 132 <li><a href="#">阴阳直播间</a></li> 133 <hr class="hr" width="80%" color="lightgray"/> 134 <li><a href="#">黑狗修仙传</a></li> 135 <hr class="hr" width="80%" color="lightgray"/> 136 <li><a href="#">剑起天下潮</a></li> 137 <hr class="hr" width="80%" color="lightgray"/> 138 <li><a href="#">都市绝品狂尊</a></li> 139 <hr class="hr" width="80%" color="lightgray"/> 140 <li><a href="#">傲世仙医</a></li> 141 <hr class="hr" width="80%" color="lightgray"/> 142 <li><a href="#">小道饶命</a></li> 143 <hr class="hr" width="80%" color="lightgray"/> 144 <li><a href="#">血王座</a></li> 145 <hr class="hr" width="80%" color="lightgray"/> 146 <li><a href="#">盾御九州</a></li> 147 <hr class="hr" width="80%" color="lightgray"/> 148 <li><a href="#">玄墨录</a></li> 149 </ol> 150 </td> 151 <td class="speace-2"></td> 152 <td class="speace-1"> 153 <p><strong><big>推荐榜</big></strong></p> 154 <ol> 155 <hr class="hr" width="80%" color="lightgray"/> 156 <li> 157 <a href="#"><big>万道唯尊</big></a> 158 <p>三两姜山</p> 159 <p>[玄幻]</p> 160 <span>3104213 人气数</span> 161 <img src="something/s-paihang/211.jpg"> 162 </li> 163 <hr class="hr" width="80%" color="lightgray"/> 164 <li><a href="#">阴阳直播间</a></li> 165 <hr class="hr" width="80%" color="lightgray"/> 166 <li><a href="#">黑狗修仙传</a></li> 167 <hr class="hr" width="80%" color="lightgray"/> 168 <li><a href="#">剑起天下潮</a></li> 169 <hr class="hr" width="80%" color="lightgray"/> 170 <li><a href="#">都市绝品狂尊</a></li> 171 <hr class="hr" width="80%" color="lightgray"/> 172 <li><a href="#">傲世仙医</a></li> 173 <hr class="hr" width="80%" color="lightgray"/> 174 <li><a href="#">小道饶命</a></li> 175 <hr class="hr" width="80%" color="lightgray"/> 176 <li><a href="#">血王座</a></li> 177 <hr class="hr" width="80%" color="lightgray"/> 178 <li><a href="#">盾御九州</a></li> 179 <hr class="hr" width="80%" color="lightgray"/> 180 <li><a href="#">玄墨录</a></li> 181 </ol> 182 </td> 183 <td class="speace-2"></td> 184 <td class="speace-1"> 185 <p><strong><big>24小时畅销榜</big></strong></p> 186 <ol> 187 <hr class="hr" width="80%" color="lightgray"/> 188 <li> 189 <a href="#"><big>万道唯尊</big></a> 190 <p>三两姜山</p> 191 <p>[玄幻]</p> 192 <span>3104213 人气数</span> 193 <img src="something/s-paihang/211.jpg"> 194 </li> 195 <hr class="hr" width="80%" color="lightgray"/> 196 <li><a href="#">阴阳直播间</a></li> 197 <hr class="hr" width="80%" color="lightgray"/> 198 <li><a href="#">黑狗修仙传</a></li> 199 <hr class="hr" width="80%" color="lightgray"/> 200 <li><a href="#">剑起天下潮</a></li> 201 <hr class="hr" width="80%" color="lightgray"/> 202 <li><a href="#">都市绝品狂尊</a></li> 203 <hr class="hr" width="80%" color="lightgray"/> 204 <li><a href="#">傲世仙医</a></li> 205 <hr class="hr" width="80%" color="lightgray"/> 206 <li><a href="#">小道饶命</a></li> 207 <hr class="hr" width="80%" color="lightgray"/> 208 <li><a href="#">血王座</a></li> 209 <hr class="hr" width="80%" color="lightgray"/> 210 <li><a href="#">盾御九州</a></li> 211 <hr class="hr" width="80%" color="lightgray"/> 212 <li><a href="#">玄墨录</a></li> 213 </ol> 214 </td> 215 </tr> 216 </table> 217 </div> 218 </aside> 219 </body> 220 </html>index-2
话题
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 float: left;
18 padding-left:100px;
19 }
20 #website{
21 font-style: italic;
22 font-size: 12px;
23 position: relative;
24 left: 710px;
25 top: 50px;
26 -webkit-transform: skew(-10deg, 10deg);
27 -moz-transform: skew(-10deg, 10deg);
28 }
29 nav{
30 background: #d8d4cb;
31 width: 1200px;
32 height: 35px;
33 border-radius: 0px 0px 30px 30px;
34 margin: auto;
35 margin-bottom: 10px;
36 }
37 nav ul{
38 font-family: arial;
39 font-size: 18px;
40 list-style: none;
41 padding-right: 80px;
42 }
43 nav ul li a:hover{
44 background-color: #e8e5dc;
45 }
46 nav ul li a {
47 display: block;
48 float: right;
49 color: black;
50 line-height: 35px;
51 text-decoration: none;
52 padding: 0 32px 0 32px;
53 border-radius: 10px 10px 0 0;
54 }
55 aside{
56 width: 1200px;
57 height: 800px;
58 background: #e8e5dc;
59 margin: auto;
60 border-radius: 30px;
61 position: relative;
62 }
63 aside .a-t{
64 width: 900px;
65 height: 200px;
66 background: #f5f6f0;
67 position: relative;
68 top: 30px;
69 left: 150px;
70 border-radius: 20px;
71
72 -webkit-column-count: 3;
73 -moz-column-count: 3;
74 -webkit-column-rule: 8px solid #e8e5dc;
75 -moz-column-rule: 8px solid #e8e5dc;
76 }
77 aside .a-t div{
78 height: 180px;
79 padding-left: 30px;
80 padding-top: 10px;
81 }
82 aside .a-t div p{
83 font-size: 16px;
84 font-weight: bolder;
85 padding-bottom: 8px;
86 }
87 aside .a-t div ul{
88 font-size: 14px;
89 padding-top: 6px;
90 }
91 aside .a-t div ul li{
92 padding-top: 8px;
93 }
94 aside .a-t div ul li a{
95 text-decoration: none;
96 color:#A9A9A9;
97 }
98 aside .a-l{
99 width: 200px;
100 height: 380px;
101 background: #f5f6f0;
102 position: absolute;
103 top: 260px;
104 left: 30px;
105 border-radius: 20px 0 20px 0;
106 }
107 aside .a-l p{
108 font-size: 16px;
109 font-style: italic;
110 font-weight: bolder;
111 position: absolute;
112 top: 12px;
113 left: 20px;
114 }
115 aside .a-l #a-l-1{
116 position: absolute;
117 top: 6px;
118 left: 90px;
119 }
120 aside .a-l hr{
121 position: absolute;
122 top: 38px;
123 left: 14px;
124 }
125 aside .a-l ol{
126 position: absolute;
127 top: 50px;
128 left: 40px;
129 color: lightcoral;
130 }
131 aside .a-l ol li{
132 margin-bottom: 10px;
133 }
134 aside .a-l ol li a{
135 text-decoration: none;
136 font-size: 14px;
137 font-style: italic;
138 color: black;
139 }
140 aside .a-l ol li a:hover{
141 color: lightcoral;
142 }
143
144 aside .a-r{
145 width: 870px;
146 height: 500px;
147 background: #f5f6f0;
148 position: relative;
149 top: 60px;
150 left: 280px;
151 border-radius: 0 0 30px 0;
152 border: 3px solid #c8d7d2;
153 }
154 aside .a-r #a-nav{
155 width: 375px;
156 height: 60px;
157 background: #e8e5dc;
158 position: absolute;
159 top: 10px;
160 left: 30px;
161 border-radius: 20px;
162 }
163 aside .a-r ul{
164 list-style: none;
165 position: absolute;
166 top: 20px;
167 left: 7px;
168 }
169 aside .a-r ul li{
170 float: left;
171 }
172 aside .a-r ul li a{
173 display: block;
174 text-decoration: none;
175 color: black;
176 padding: 5px 20px 5px 20px;
177 border-radius:100px ;
178 }
179 aside .a-r ul li a:hover{
180 background: #c8d7d2;
181 }
182 aside .a-r #a-r-1{
183 width: 375px;
184 height: 400px;
185 background: #e8e5dc;
186 position: absolute;
187 top: 80px;
188 left: 30px;
189 border-radius: 20px 0 0 0;
190 }
191
192 aside .a-r #a-r-2{
193 width: 375px;
194 height: 470px;
195 background: #e8e5dc;
196 position: absolute;
197 top: 10px;
198 left: 435px;
199 border-radius: 0 0 20px 0;
200 }
201 aside #d1{
202 width: 335px;
203 height: 160px;
204 border: 3px solid #c8d7d2;
205 position: absolute;
206 top: 20px;
207 left: 20px;
208 display: table;
209 }
210 aside .a-r-1 a{
211 text-decoration: none;
212 color: black;
213 }
214 aside .a-r-1 a:hover{
215 text-decoration: underline;
216 }
217 aside #pp1{
218 font-size: 16px;
219 font-weight:bolder;
220 padding-top: 4px;
221 padding-left: 8px;
222 padding-bottom: 4px;
223 }
224 aside #pp1 span{
225 color: lightcoral;
226 }
227 aside #pp2{
228 font-size: 12px;
229 padding: 4px;
230 }
231 aside #pp2 span{
232 padding: 2px;
233 background-color:#c8d7d2;
234 }
235 aside #pp3{
236 font-size: 12px;
237 padding: 4px;
238 }
239 aside #dd1{
240 position: absolute;
241 top: 30px;
242 left: 230px;
243 }
244 aside #dd1 #pp4{
245 font-size: 36px;
246 }
247 aside #pp4 span{
248 font-size: 12px;
249 padding: 2px;
250 background-color:#C8D7D2 ;
251 }
252 aside #pp5{
253 font-size: 10px;
254 }
255 aside #dd2{
256 padding-left: 2px;
257 padding-top: 8px;
258 }
259 aside #pp6{
260 font-size: 12px;
261 color: #A9A9A9;
262 padding-left: 16px;
263 padding-bottom: 4px;
264 }
265 aside #pp7{
266 font-size: 12px;
267 margin-left: 6px;
268 margin-right: 6px;
269 }
270 aside #dd3{
271 position: absolute;
272 top: 90px;
273 left: 252px;
274 font-size: 12px;
275 }
276 aside #dd4{
277 position: absolute;
278 top: 142px;
279 left: 190px;
280 font-size: 10px;
281 }
282
283 aside #d2{
284 width: 335px;
285 height: 160px;
286 border: 3px solid #c8d7d2;
287 position: absolute;
288 top: 210px;
289 left: 20px;
290 }
291 aside #d3{
292 width: 330px;
293 height: 160px;
294 border: 3px solid #c8d7d2;
295 position: absolute;
296 top: 20px;
297 left: 20px;
298 }
299 aside #d4{
300 width: 330px;
301 height: 160px;
302 border: 3px solid #c8d7d2;
303 position: absolute;
304 top: 210px;
305 left: 20px;
306 }
307 aside #d5{
308 width: 330px;
309 height: 40px;
310 border: 3px solid #c8d7d2;
311 position: absolute;
312 top: 400px;
313 left: 20px;
314 }
315 aside #d5 p{
316 position: absolute;
317 line-height: 40px;
318 font-size: 14px;
319 left: 120px;
320 }
321
index-3-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index3.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 15 <div id="website"> 16 <ruby> 17 万象小说网<rt><code>www.yanruijie.com</code></rt> 18 </ruby> 19 </div> 20 </header> 21 <nav> 22 <ul> 23 <li><a href="index6.html"><strong>漫改</strong></a></li> 24 <li><a href="index5.html"><strong>壁纸</strong></a></li> 25 <li><a href="index4.html"><strong>投稿</strong></a></li> 26 <li><a href="index3.html"><strong>话题</strong></a></li> 27 <li><a href="index2.html"><strong>排行</strong></a></li> 28 <li><a href="index.html"><strong>首页</strong></a></li> 29 </ul> 30 </nav> 31 <aside> 32 <div class="a-t"> 33 <div id="ul-1"> 34 <p>新人导航</p> 35 <hr style="width: 80%;" /> 36 <ul> 37 <li><a href="#">话题网友守则</a></li> 38 <li><a href="#">话题网友签到大楼</a></li> 39 <li><a href="#">话题与知道的历史</a></li> 40 <li><a href="#">跟帖评论自律管理承诺</a></li> 41 </ul> 42 </div> 43 <div id="ul-2"> 44 <p>官方公告栏</p> 45 <hr style="width: 80%;" /> 46 <ul> 47 <li><a href="#">[公告]话题反馈渠道整合公告</a></li> 48 <li><a href="#">[公告]话题楼主审批规则变更公告</a></li> 49 <li><a href="#">[公告]全民举报职能说明</a></li> 50 <li><a href="#">[公告]解封快速通道</a></li> 51 </ul> 52 </div> 53 <div id="ul-3"> 54 <p>常见问题解析</p> 55 <hr style="width: 80%;" /> 56 <ul> 57 <li><a href="#">[公告]恶意发布色情内容封禁警告</a></li> 58 <li><a href="#">[公告]话题APP新功能上线</a></li> 59 <li><a href="#">[申述]被撤销话题的申述反馈</a></li> 60 <li><a href="#">[会员]话题会员功能使用全科普</a></li> 61 </ul> 62 </div> 63 </div> 64 <div class="a-l"> 65 <p>热搜</p> 66 <div id="a-l-1"><input type="text" style="width: 70px;"/> <input type="image" img src="something/s-home/11.jpg" /></div> 67 <hr style="width: 80%;"/> 68 <div id="a-l-2"> 69 <ol> 70 <li><a href="#">#剑来故事线索梳理#</a></li> 71 <li><a href="#">#魔道祖师同人#</a></li> 72 <li><a href="#">#魏无羡话题群#</a></li> 73 <li><a href="#">#陈平安与宁姚在......#</a></li> 74 <li><a href="#">#我想不出#</a></li> 75 <li><a href="#">#还有什么#</a></li> 76 <li><a href="#">#可以乱扯#</a></li> 77 <li><a href="#">#话题集合#</a></li> 78 <li><a href="#">#巴拉巴拉#</a></li> 79 <li><a href="#">#鲁拉鲁拉#</a></li> 80 </ol> 81 </div> 82 </div> 83 <div class="a-r"> 84 <div id="a-nav"> 85 <ul> 86 <li><a href="#">热点</a> </li> 87 <li><a href="#">高笑</a> </li> 88 <li><a href="#">书评</a> </li> 89 <li><a href="#">同人</a> </li> 90 <li><a href="#">唇战</a> </li> 91 </ul> 92 </div> 93 <div class="a-r-1" id="a-r-1"> 94 <div id="d1"> 95 <p id="pp1"><span>剑来</span>小说评分</p> 96 <hr style="100%;" /> 97 <p id="pp2">作者： <span><a href="#">烽火戏诸侯</a></span></p> 98 <p id="pp3">类型： <span>玄幻奇幻</span></p> 99 <div id="dd1"> 100 <p id="pp4">4.5<span>5分</span></p> 101 <p id="pp5">来自4.3万人评分</p> 102 </div> 103 <div id="dd2"> 104 <p id="pp6">书友42712</p> 105 <p id="pp7">刚看完这章陈平安见到了心念已久的宁姑娘，巧的是今天我也跟老婆去领结婚证......</p> 106 </div> 107 <div id="dd3"> 108 <p>✮✮✮✮✮<span>5分</span></p> 109 </div> 110 <div id="dd4"> 111 <p><a href="#">查看全部410293条评论></a></p> 112 </div> 113 </div> 114 <div id="d2"> 115 <p id="pp1"><span>魔道祖师</span>小说评分</p> 116 <hr style="100%;" /> 117 <p id="pp2">作者： <span><a href="#">墨香铜臭</a></span></p> 118 <p id="pp3">类型： <span>玄幻奇幻</span></p> 119 <div id="dd1"> 120 <p id="pp4">5.0<span>5分</span></p> 121 <p id="pp5">来自10.3万人评分</p> 122 </div> 123 <div id="dd2"> 124 <p id="pp6">书友42712</p> 125 <p id="pp7">刚看完这章陈平安见到了心念已久的宁姑娘，巧的是今天我也跟老婆去领结婚证......</p> 126 </div> 127 <div id="dd3"> 128 <p>✮✮✮✮✮<span>5分</span></p> 129 </div> 130 <div id="dd4"> 131 <p><a href="#">查看全部410293条评论></a></p> 132 </div> 133 </div> 134 </div> 135 <div class="a-r-1" id="a-r-2"> 136 <div id="d3"> 137 <p id="pp1"><span>魔道祖师</span>小说评分</p> 138 <hr style="100%;" /> 139 <p id="pp2">作者： <span><a href="#">墨香铜臭</a></span></p> 140 <p id="pp3">类型： <span>玄幻奇幻</span></p> 141 <div id="dd1"> 142 <p id="pp4">5.0<span>5分</span></p> 143 <p id="pp5">来自10.3万人评分</p> 144 </div> 145 <div id="dd2"> 146 <p id="pp6">书友42712</p> 147 <p id="pp7">刚看完这章陈平安见到了心念已久的宁姑娘，巧的是今天我也跟老婆去领结婚证......</p> 148 </div> 149 <div id="dd3"> 150 <p>✮✮✮✮✮<span>5分</span></p> 151 </div> 152 <div id="dd4"> 153 <p><a href="#">查看全部410293条评论></a></p> 154 </div> 155 </div> 156 <div id="d4"> 157 <p id="pp1"><span>剑来</span>小说评分</p> 158 <hr style="100%;" /> 159 <p id="pp2">作者： <span>烽火戏诸侯</span></p> 160 <p id="pp3">类型： <span>玄幻奇幻</span></p> 161 <div id="dd1"> 162 <p id="pp4">4.5<span>5分</span></p> 163 <p id="pp5">来自4.3万人评分</p> 164 </div> 165 <div id="dd2"> 166 <p id="pp6">书友42712</p> 167 <p id="pp7">刚看完这章陈平安见到了心念已久的宁姑娘，巧的是今天我也跟老婆去领结婚证......</p> 168 </div> 169 <div id="dd3"> 170 <p>✮✮✮✮✮<span>5分</span></p> 171 </div> 172 <div id="dd4"> 173 <p><a href="#">查看全部410293条评论></a></p> 174 </div> 175 </div> 176 <div id="d5"> 177 <p><a href="#">-更多内容-</a></p> 178 </div> 179 </div> 180 </div> 181 </aside> 182 </body> 183 </html>index-3
投稿
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 float: left;
18 padding-left:100px;
19 }
20 #website{
21 font-style: italic;
22 font-size: 12px;
23 position: relative;
24 left: 710px;
25 top: 50px;
26 -webkit-transform: skew(-10deg, 10deg);
27 -moz-transform: skew(-10deg, 10deg);
28 }
29 nav{
30 background: #d8d4cb;
31 width: 1200px;
32 height: 35px;
33 border-radius: 0px 0px 30px 30px;
34 margin: auto;
35 }
36 nav ul{
37 font-family: arial;
38 font-size: 18px;
39 list-style: none;
40 padding-right: 80px;
41 }
42 nav ul li a:hover{
43 background-color: #e8e5dc;
44 }
45 nav ul li a {
46 display: block;
47 float: right;
48 color: black;
49 line-height: 35px;
50 text-decoration: none;
51 padding: 0 32px 0 32px;
52 border-radius: 10px 10px 0 0;
53 }
54
55 aside{
56 width: 1200px;
57 height: 600px;
58 background: #e8e5dc;
59 border-radius: 30px 30px 30px 30px;
60 margin: auto;
61 margin-top: 10px;
62 position: relative;
63 }
64 aside .t1{
65 position: absolute;
66 top: 30px;
67 margin-left: 20px;
68 margin-right: 20px;
69 border: 3px solid #f5f6f0;
70 }
71 aside #b-c{
72 background-color: #f5f6f0;
73 }
74
75 #mail{
76 color: #000000;
77 text-decoration: none;
78 }
79
index-4-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index4.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 15 <div id="website"> 16 <ruby> 17 万象小说网<rt><code>www.yanruijie.com</code></rt> 18 </ruby> 19 </div> 20 </header> 21 <nav> 22 <ul> 23 <li><a href="index6.html"><strong>漫改</strong></a></li> 24 <li><a href="index5.html"><strong>壁纸</strong></a></li> 25 <li><a href="index4.html"><strong>投稿</strong></a></li> 26 <li><a href="index3.html"><strong>话题</strong></a></li> 27 <li><a href="index2.html"><strong>排行</strong></a></li> 28 <li><a href="index.html"><strong>首页</strong></a></li> 29 </ul> 30 </nav> 31 <aside> 32 <form> 33 <table class="t1" border="1"> 34 <tr> 35 <td id="b-c"> 36 <table> 37 <tr> 38 <td class="td-w" style="width: 600px;height: 40px;"> 39 您的姓名：<input type="text" autofocus="on"/> 40 </td> 41 <td class="td-w" style="width: 600px;height: 40px;"> 42 您的笔名：<input type="text" /> 43 </td> 44 </tr> 45 </table> 46 </td> 47 </tr> 48 <tr> 49 <td> 50 <table> 51 <tr> 52 <td class="td-w" style="width: 600px;height: 40px;"> 53 您的性别： 54 男<input type="radio" name="sex" /> 55 女<input type="radio" name="sex" /> 56 </td> 57 <td class="td-w" style="width: 600px;height: 40px;"> 58 年龄：<input type="text" /> 59 </td> 60 </tr> 61 </table> 62 </td> 63 </tr> 64 <tr> 65 <td id="b-c" class="td-h" style="height: 40px;"> 66 您的联系方式：<input type="text" /> 67 </td> 68 </tr> 69 <tr> 70 <td class="td-h" style="height: 40px;"> 71 您擅长的领域： 72 </td> 73 </tr> 74 <tr> 75 <td id="b-c" class="td-h" style="height: 40px;"> 76 <table class="t2"> 77 <tr> 78 <td style="width: 111px;"><input type="checkbox" name="myCheck" />奇幻玄幻</td> 79 <td style="width: 111px;"><input type="checkbox" name="myCheck" />武侠仙侠</td> 80 <td style="width: 111px;"><input type="checkbox" name="myCheck" />历史军事</td> 81 <td style="width: 111px;"><input type="checkbox" name="myCheck" />都市娱乐</td> 82 <td style="width: 111px;"><input type="checkbox" name="myCheck" />竞技同人</td> 83 <td style="width: 111px;"><input type="checkbox" name="myCheck" />科幻游戏</td> 84 <td style="width: 111px;"><input type="checkbox" name="myCheck" />悬疑灵异</td> 85 <td style="width: 111px;"><input type="checkbox" name="myCheck" />花语女生</td> 86 </tr> 87 </table> 88 </td> 89 </tr> 90 <tr> 91 <td class="td-h" style="height: 40px;">您的作品：</td> 92 </tr> 93 <tr> 94 <td id="b-c" class="td-h" style="height: 40px;"> 95 <textarea rows="8" cols="121">上交至此</textarea> 96 </td> 97 </tr> 98 <tr> 99 <td> 100 <button style="position: absolute;left:420px;top: 420px; width: 80px;height: 50px;" type="submit"> 101 <a id="mail" href="mailto:1147954002@qq.com ? Subjext=content&1147954002@qq.com & bcc=1147954002@qq.com">提交</a> 102 </button> 103 <button style="position: absolute;left:620px;top: 420px; width: 80px;height: 50px" type="reset">重置</button> 104 105 </td> 106 </tr> 107 </table> 108 </form> 109 </aside> 110 </body> 111 </html>index-4
壁纸
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 float: left;
18 padding-left:100px;
19 }
20 #website{
21 font-style: italic;
22 font-size: 12px;
23 position: relative;
24 left: 710px;
25 top: 50px;
26 -webkit-transform: skew(-10deg, 10deg);
27 -moz-transform: skew(-10deg, 10deg);
28 }
29 nav{
30 background: #d8d4cb;
31 width: 1200px;
32 height: 35px;
33 border-radius: 0px 0px 30px 30px;
34 margin: auto;
35 }
36 nav ul{
37 font-family: arial;
38 font-size: 18px;
39 list-style: none;
40 padding-right: 80px;
41 }
42 nav ul li a:hover{
43 background-color: #e8e5dc;
44 }
45 nav ul li a {
46 display: block;
47 float: right;
48 color: black;
49 line-height: 35px;
50 text-decoration: none;
51 padding: 0 32px 0 32px;
52 border-radius: 10px 10px 0 0;
53 }
54
55 aside{
56 background: #e8e5dc;
57 border-radius: 30px 30px 30px 30px;
58 }
59 aside .picture{
60 -webkit-column-width:200px;
61 -moz-column-width:200px;
62 -webkit-column-gap:10px;
63 -moz-column-gap:10x;
64 position: relative;
65 text-align: center;
66 margin: 0px auto;
67 margin-left: 20px;
68 margin-right: 20px;
69 margin-top: 10px;
70 }
71 aside .pic-1{
72 background:#c8d7d2;
73 border:#f5f6f0 3px solid;
74 display:inline-block;
75 width:200px;
76 margin:5px;
77
78 }
index-5-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index5.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 15 <div id="website"> 16 <ruby> 17 万象小说网<rt><code>www.yanruijie.com</code></rt> 18 </ruby> 19 </div> 20 </header> 21 <nav> 22 <ul> 23 <li><a href="index6.html"><strong>漫改</strong></a></li> 24 <li><a href="index5.html"><strong>壁纸</strong></a></li> 25 <li><a href="index4.html"><strong>投稿</strong></a></li> 26 <li><a href="index3.html"><strong>话题</strong></a></li> 27 <li><a href="index2.html"><strong>排行</strong></a></li> 28 <li><a href="index.html"><strong>首页</strong></a></li> 29 </ul> 30 </nav> 31 <aside> 32 <div class="picture"> 33 <div class="pic-1"><img src="something/s-bizhi/1.jpeg"></div> 34 <div class="pic-1"><img src="something/s-bizhi/2.jpg"></div> 35 <div class="pic-1"><img src="something/s-bizhi/3.jpg"></div> 36 <div class="pic-1"><img src="something/s-bizhi/4.jpeg"></div> 37 <div class="pic-1"><img src="something/s-bizhi/5.jpg"></div> 38 <div class="pic-1"><img src="something/s-bizhi/7.jpg"></div> 39 <div class="pic-1"><img src="something/s-bizhi/8.jpg"></div> 40 <div class="pic-1"><img src="something/s-bizhi/9.jpeg"></div> 41 <div class="pic-1"><img src="something/s-bizhi/10.jpg"></div> 42 <div class="pic-1"><img src="something/s-bizhi/11.jpg"></div> 43 <div class="pic-1"><img src="something/s-bizhi/12.jpeg"></div> 44 <div class="pic-1"><img src="something/s-bizhi/5.jpg"></div> 45 <div class="pic-1"><img src="something/s-bizhi/7.jpg"></div> 46 <div class="pic-1"><img src="something/s-bizhi/8.jpg"></div> 47 <div class="pic-1"><img src="something/s-bizhi/9.jpeg"></div> 48 49 </div> 50 </aside> 51 </body> 52 </html>index-5
漫改
1 /*背景色:#d8d4cb , 次级色:#e8e5dc , 方框色:#f5f6f0 , 强调色:#c8d7d2*/
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 body{
7
8 }
9 header{
10 width: 1200px;
11 height: 280px;
12 background: #d8d4cb;
13 border-radius: 30px 30px 0px 0px;
14 margin: auto;
15 }
16 #logo{
17 float: left;
18 padding-left:100px;
19 }
20 #website{
21 font-style: italic;
22 font-size: 12px;
23 position: relative;
24 left: 710px;
25 top: 50px;
26 -webkit-transform: skew(-10deg, 10deg);
27 -moz-transform: skew(-10deg, 10deg);
28 }
29 nav{
30 background: #d8d4cb;
31 width: 1200px;
32 height: 35px;
33 border-radius: 0px 0px 30px 30px;
34 margin: auto;
35 margin-bottom: 10px;
36 }
37 nav ul{
38 font-family: arial;
39 font-size: 18px;
40 list-style: none;
41 padding-right: 80px;
42 }
43 nav ul li a:hover{
44 background-color: #e8e5dc;
45 }
46 nav ul li a {
47 display: block;
48 float: right;
49 color: black;
50 line-height: 35px;
51 text-decoration: none;
52 padding: 0 32px 0 32px;
53 border-radius: 10px 10px 0 0;
54 }
55
56 aside{
57 width: 1200px;
58 height: 400px;
59 background: #e8e5dc;
60 margin: auto;
61 border-radius: 30px 30px 0 0;
62
63 }
64 aside #a-d-1{
65 position: absolute;
66 left: 340px;
67 /*background-image:url(../something/s-mangai/33.jpg) ;*/
68 }
69 aside #a-d-2{
70 position: relative;
71 left: 480px;
72 top: 50px;
73 }
74 aside #a-d-3{
75 width: 120px;
76 height: 160px;
77 background: #f5f6f0;
78 border-radius: 20px 20px 20px 20px;
79 margin-left: 30px;
80 float: left;
81 animation-name: tu;
82 animation-duration: 8s;
83 animation-fill-mode: forwards;
84 animation-iteration-count: infinite;
85 animation-direction: alternate;
86 }
87 @keyframes tu{
88 0%{
89 margin: -80px 0 0 30px;
90 }
91 50%{
92 margin: -300px 0 0 30px;
93 }
94 100%{
95 margin: -80px 0 0 30px;
96 }
97 }
98 aside ul {
99 font-family: arial;
100 font-size: 18px;
101 /*list-style: none;*/
102 padding-left: 28px;
103 padding-top: 8px;
104 }
105 aside ul li a{
106 text-decoration: none;
107 color:black;
108 }
109 aside ul li a:hover{
110 color: #A9A9A9;
111 }
112 aside #a-d-4{
113 display: none;
114 }
115
116 section{
117 width: 1200px;
118 height: 500px;
119 background: #e8e5dc;
120 position: relative;
121 margin: auto;
122 border-radius: 0 0 30px 30px;
123 }
124 section #s-d{
125 border:5px solid #f5f6f0;
126 margin-left: 30px;
127 margin-right: 30px;
128 }
129 section #s-d-1{
130 padding-left:80px;
131 padding-top: 50px;
132
133 }
134 section #s-d-2{
135 position: absolute;
136 left: 300px;
137 top: 50px;
138 margin-left: 80px;
139 margin-right: 100px;
140 }
141 section #s-d-2 span{
142 background-color: #C8D7D2;
143 }
144 section #s-d-2 audio{
145 position: absolute;
146 top: 0px;
147 left: 300px;
148 }
149 section #s-d-3{
150 width: 700px;
151 height: 160px;
152 background: #f5f6f0;
153 position: absolute;
154 top: 220px;
155 left: 400px;
156 border: 3px solid #f5f6f0;
157 /*display: table;*/
158 }
159 section #s-d-3 #row{
160 font-size: 18px;
161 font-weight:inherit;
162 /*text-decoration: underline;*/
163 margin-left: 10px;
164 margin-bottom: 10px;
165 margin-top: 6px;
166 }
167 section #s-d-3 #cell{
168 float: left;
169 }
170 section #s-d-3 button{
171 width: 60px;
172 height: 40px;
173 margin-left: 10px;
174 margin-right: 10px;
175 margin-bottom: 8px;
176 }
177
178 @media (max-width:600px) {
179 aside{
180 width: 560px;
181 }
182 aside #a-d-1{
183 display: none;
184 }
185 aside #a-d-3{
186 display: none;
187 }
188 aside #a-d-2{
189 left: 30px;
190 top: 80px;
191 }
192 aside #a-d-4{
193 display:list-item;
194 width: 500px;
195 height: 80px;
196 background: #f5f6f0;
197 border-radius: 20px;
198 position: relative;
199 top: -300px;
200 left: 30px;
201 }
202 aside #a-d-4 ul{
203 list-style: none;
204 }
205 aside #a-d-4 ul li{
206 float: left;
207 padding-left: 10px;
208 }
209
210 section{
211 width: 560px;
212 height: 600px;
213 }
214 section #s-d-1{
215 padding-left: 10px;
216 padding-top: 40px;
217 }
218 section #s-d-2{
219 margin-left: 0px;
220 margin-right: 50px;
221 }
222 section #s-d-2 audio{
223 top: 220px;
224 left: 0px;
225 width: 200px;
226 }
227 section #s-d-3{
228 width: 520px;
229 height: 180px;
230 top: 360px;
231 left: 20px;
232 }
233 }
index-6-css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜睿杰_男_网络系_16级_网设班_1640217157</title> 6 <link rel="stylesheet" type="text/css" href="css/index6.css" /> 7 8 </head> 9 <body> 10 <header> 11 <div id="logo"> 12 <img src="logo/header(改).jpg"/> 13 </div> 14 <div id="website"> 15 <ruby> 16 万象小说网<rt><code>www.yanruijie.com</code></rt> 17 </ruby> 18 </div> 19 </header> 20 <nav> 21 <ul> 22 <li><a href="index6.html"><strong>漫改</strong></a></li> 23 <li><a href="index5.html"><strong>壁纸</strong></a></li> 24 <li><a href="index4.html"><strong>投稿</strong></a></li> 25 <li><a href="index3.html"><strong>话题</strong></a></li> 26 <li><a href="index2.html"><strong>排行</strong></a></li> 27 <li><a href="index.html"><strong>首页</strong></a></li> 28 </ul> 29 </nav> 30 <aside> 31 <div id="a-d-1"> 32 <img src="something/s-mangai/33.jpg"/> 33 </div> 34 <div id="a-d-2"> 35 <video width="500px" height="300px" controls autoplay> 36 <source src="something/s-mangai/111.mp4" type="audio/mp4"></source> 37 </video> 38 </div> 39 <div id="a-d-3"> 40 <ul class="ul"> 41 <li><a href="#">魔道祖师</a></li> 42 <li><a href="#">全职高手</a></li> 43 <li><a href="#">斗罗大陆</a></li> 44 <li><a href="#">择天记</a></li> 45 <li><a href="#">末日曙光</a></li> 46 <li><a href="#">更多>></a></li> 47 </ul> 48 </div> 49 <div id="a-d-4"> 50 <ul class="ul"> 51 <li><a href="#">魔道祖师</a></li> 52 <li><a href="#">全职高手</a></li> 53 <li><a href="#">斗罗大陆</a></li> 54 <li><a href="#">择天记</a></li> 55 <li><a href="#">末日曙光</a></li> 56 <li><a href="#">更多>></a></li> 57 </ul> 58 </div> 59 </aside> 60 <section> 61 <div id="s-d"> 62 <div id="s-d-1"> 63 <img src="something/s-mangai/1.png"/> 64 </div> 65 <div id="s-d-2"> 66 <h1>魔道祖师</h1> 67 <p class="p1"><span>已完结</span> 共15集</p> 68 <p class="p2">类型： <a href="#">古风</a> Ι <a href="#">玄幻</a> Ι <a href="#">剧情</a></p> 69 <p class="p21">简介：温氏横行，生灵涂炭。江湖仙门义士发动“射日之征”，合力讨伐温氏。“夷陵老祖”魏无羡虽在推翻温氏中立下了汗马功劳，却因修非常道且太过强大而遭...<a href="#">更多>></a></p> 70 <audio controls> 71 <source src="something/s-mangai/Aki阿杰 - 何以歌.mp3" type="audio/mp3"></source> 72 </audio> 73 </div> 74 <div id="s-d-3"> 75 <div id="row">选集</div> 76 <div id="cell"><button>1集</button></div> 77 <div id="cell"><button>2集</button></div> 78 <div id="cell"><button>3集</button></div> 79 <div id="cell"><button>4集</button></div> 80 <div id="cell"><button>5集</button></div> 81 <div id="cell"><button>6集</button></div> 82 <div id="cell"><button>7集</button></div> 83 <div id="cell"><button>8集</button></div> 84 <div id="cell"><button>9集</button></div> 85 <div id="cell"><button>10集</button></div> 86 <div id="cell"><button>11集</button></div> 87 <div id="cell"><button>12集</button></div> 88 <div id="cell"><button>13集</button></div> 89 <div id="cell"><button>14集</button></div> 90 <div id="cell"><button>15集</button></div> 91 </div> 92 </div> 93 </section> 94 </body> 95 </html>index-6
标签：top,aside,html,absolute,position,小说网,font,css,left 来源： https://www.cnblogs.com/Yan-night/p/11520140.html