网页设计----万象小说网（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             }

  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">古典仙侠  &nbsp;&Iota;&nbsp; 连载中</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">古代言情  &nbsp;&Iota;&nbsp; 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>

  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             

  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&nbsp;人气数</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&nbsp;人气数</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&nbsp;人气数</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>

  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             

  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;"/>&nbsp;<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">作者：&nbsp;<span><a href="#">烽火戏诸侯</a></span></p>
 98                         <p id="pp3">类型：&nbsp;<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条评论&gt;</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">作者：&nbsp;<span><a href="#">墨香铜臭</a></span></p>
118                         <p id="pp3">类型：&nbsp;<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条评论&gt;</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">作者：&nbsp;<span><a href="#">墨香铜臭</a></span></p>
140                         <p id="pp3">类型：&nbsp;<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条评论&gt;</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">作者：&nbsp;<span>烽火戏诸侯</span></p>
160                         <p id="pp3">类型：&nbsp;<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条评论&gt;</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>

 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