网页设计----万象小说网（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">古典仙侠  &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>

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&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>

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;"/>&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>

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="#">更多&gt;&gt;</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="#">更多&gt;&gt;</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>&nbsp;共15集</p>
68                     <p class="p2">类型：&nbsp;<a href="#">古风</a>&nbsp;&Iota;&nbsp;<a href="#">玄幻</a>&nbsp;&Iota;&nbsp;<a href="#">剧情</a></p>
69                     <p class="p21">简介：温氏横行，生灵涂炭。江湖仙门义士发动“射日之征”，合力讨伐温氏。“夷陵老祖”魏无羡虽在推翻温氏中立下了汗马功劳，却因修非常道且太过强大而遭...<a href="#">更多&gt;&gt;</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

秒客网

网页设计----万象小说网（html+css）

相关文章