网页设计----万象小说网(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:[email protected] ? Subjext=content&[email protected] & [email protected]">提交</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

原文地址:https://www.cnblogs.com/Yan-night/p/11520140.html

时间: 2024-11-10 13:13:46

网页设计----万象小说网(html+css)的相关文章

网页设计中11 款最好CSS框架

网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来.此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中. 网页设计员和研发者可用的最好工具之一便是 CSS 框架,它提供高端解决方案来适应高端网页研发需求.CSS 框架减化了编码结构.减少了编码时间,为研

网页设计制作CSS实现隔行换色两种方法

网页设计制作CSS实现隔行换色两种方法 2007-12-21 20:59:44  来源:网页教学网 网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type="text/css">UL.myul1 LI{}</style><ul class="myul1"><li id="li1">111</li><li id="li2"

手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比 例(initia

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

手机web——自适应网页设计(html/css控制)http://mobile.51cto.com/ahot-409516.htm

http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等

手机web——自适应网页设计(html/css控制) - 51CTO.COM

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比 例(initia

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 分类: PHP 2012-12-12 15:01 4256人阅读 评论(0) 收藏 举报 文西马龙:http://blog.csdn.net/wenximalong/ 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键,来控制图片的位置 这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或

HTML学习笔记——标准网页设计+使用CSS、Javascript

一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离.   内容 + 表现 = 页面  ---  即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HTML.XHTML,而怎么对内容排版.显示使用CSS. 2.标准网页设计的优点: (1)代码更少,更容易维护. (2)页面下载更快,宽带要求更低,硬盘容量要求更少. (3)排版更加方便. (4)可以提高易用性和可扩展性(可以适应很多其它的设备:搜索蜘蛛/屏幕阅读器/打印机/手持设备/移动设备等). (

(转)手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial