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