话不多说，定制小程序开发费用我用的软件是制作的网页。定制小程序开发费用样式是这样的
定制小程序开发费用相信学过的都会做这个页面；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>页面跳转</title> <style type="text/css"> *{ /*margin: 0px; padding: 0px;*/ } h2{ color: darkblue; padding: 40px; } .one{ text-align: center;/*text-align定制小程序开发费用属性只能针对文本文字和img标签 居中*/ } li{ letter-spacing:3px; } ul { /*display:block;*/ list-style-type:none; margin:100px; } </style> </head> <body> <h1 align="center" >定制小程序开发费用作业页面链接</h1> <hr color="aquamarine" width="600" align="center" size="5"/> <div class="one"> <ul> <li><a href="电商网/电商网页.html" >页面一 《电商网》</a> </li><br/> <li><a href="淘宝网/定制小程序开发费用淘宝网完整版.html" >页面二 《淘宝网》</li><br/> <li><a href="人民网/定制小程序开发费用人民网完整版.html"> 页面三 《人民网》</a></li><br/> <li><a href="图片变形/guodu.html" >页面四 《图形变换》</a></li><br/> <li><a href="网易云/唱片练习.html" >页面五 《定制小程序开发费用网易云唱片》</a></li><br/> <li><a href="期末作业/个人主页.html" >页面六 《个人主页》</a></li><br/> <li><a href="期末作业/表单.html" >页面七 《表单》</a></li><br/> <li><a href="期末作业/我的.html" >页面八 《我的》</a></li><br/> <li><a href="期末作业/注册页面.html" >页面九 《注册页面》</a></li><br/> <li><a href="期末作业/花.html" >页面十 《花》</a></li><br/> </ul> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
定制小程序开发费用这是一个简单方便老师定制小程序开发费用检查的页面。
定制小程序开发费用根据页面提示第一个是定制小程序开发费用我学的电商网页。定制小程序开发费用直接上代码；
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>电商网</title> <link rel="stylesheet" type="text/css" href="css/ux_1446629159_9522004/demo.css"/> <link rel="stylesheet" type="text/css" href="css/ux_1446629159_9522004/iconfont.css"/> <style type="text/css"> *{ padding: 0px; margin: 0px; list-style: none; } .bigtop{ width: 100%; height: 30px; background-color: #333333; position: absolute; z-index: 2; } .bigtop .top{ width: 1000px; margin: auto; } .fl{ float: left; } .fr{ float: right; } .bigtop .top .right a{ text-decoration: none; color: #ccc; display: inline-block; height: 30px; line-height: 30px; margin-left: 10px; } .bigtop .top .right a:hover{ color: white; } .bigbox{ width: 100%; height: 680px; border: 1px solid black; overflow: hidden; position: relative; } .bigbox video{ width: 100%; min-width: 1280px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); z-index: 1; } .bignav{ width: 100%; height:70px; background-color: rgba(0,0,0,0.2); position: absolute; left: 0px; top: 30px; z-index: 3; line-height: 70px; } .bignav .nav{ width: 1000px; margin: auto; } .bignav .nav .right a{ width: 32px; height: 32px; display: inline-block; /*background-color: red;*/ line-height: 32px; text-align: center; border-radius: 50%; box-shadow: 0 0 0 1px #fff inset; -webkit-transition: all 1s ease; color: white; } .bignav .nav .right a:hover{ box-shadow: 0 0 0 16px #fff inset; color: chartreuse; } .bignav .nav .center input{ width: 200px; height: 30px; padding-left: 30px; background: url(top/search.png) no-repeat 2px 2px; border-radius: 20px; border: 1px solid #fff; margin-left: 323px; } .try{ width: 100%; height: 270px; background-color: #83ba8b; margin-top: 30px; } .try ul{ width: 960px; margin: 40px auto; /*background-color: lightblue;*/ } .try ul li{ width: 291px; height: 251px; position: relative; float: left; margin-left: 20px; -webkit-perspective: 2300px; } .try ul li img{ position: absolute; left: 0px; top: 0px; -webkit-backface-visibility: hidden; -webkit-transition: ease 2s all; } .try ul li .fan{ -webkit-transform: rotateX(-180deg); } .clear{ clear: both; } .try header{ text-align: center; } .try ul li:hover .fan{ -webkit-transform: rotateX(0deg); } .try ul li:hover .zheng{ -webkit-transform: rotateX(180deg); } /*test*/ .test{ width: 100%; height: 800px; background: lightgray; } .test ul{ margin: 40px auto 0; width: 960px; } .test header{ text-align: center; } .test ul li{ width: 195px; height: 195px; border: 1px solid black; border-radius: 50%; position: relative; float: left; margin-right: 3%; margin-bottom: 40px; } .test ul li img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .test ul li .tihuan{ opacity: 0; transition: all 1s ease-in 0.2s; } .test ul li:hover .tihuan{ opacity: 1; -webkit-transform: translate(-50%, -50%) scale(0.75); } .test ul li .tu{ transition: all 1s ease-in 0s; } .test ul li:hover .tu{ opacity: 0; } /*new*/ .new ul{ width: 960px; margin: auto; } .new ul li{ width: 266px; height: 250px; float: left; border: 1px solid #ccc; position: relative; overflow: hidden; margin-left: 20px; } .new ul li .up{ width: 266px; height: 250px; position: absolute; left: 0px; top: -250px; background-color: rgba(0,0,0,0.5); text-align: center; } .new p{ color: white; } .new ul li:hover .up{ position: absolute; top: 0px; left: 0px; -webkit-transition: ease 1s all; padding-top: 5px; } .new .jiantou{ top: 140px; left: 124px; position: absolute; } .new .anniu{ position: absolute; top: 190px; left: 100px; } .new ul li p:nth-child(1){ position: absolute; top: 60px; left:100px; font-size: 18px; } .new ul li p:nth-child(2){ position: absolute; top: 90px; left: 100px; font-size: 18px; } .new header{ text-align:center; } .bigbox .pic{ width: 570px; height: 220px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; } .bigbox .pic ul li{ width: 180px; height: 56px; /* background-color: brown;*/ border-radius: 30px; line-height: 56px; -webkit-transition: all 1s ease; color: darkgray; font-size: 15px; } .bigbox .pic ul{ position: relative; /*border: 1px solid white;*/ } .bigbox .pic ul .left{ position: absolute; left: -800px; top: 40px; } .bigbox .pic ul .right{ position: absolute; left: 1200px; top: 40px; } body:hover .bigbox .pic ul .left{ position: absolute; left: 100px; top: 40px; } body:hover .bigbox .pic ul .right{ position: absolute; left: 300px; top: 40px; } .bigbox .pic ul li span{ width: 40px; height: 40px; display: inline-block; border-radius: 50%; line-height: 40px; text-align: center; margin-left: 8px; margin-right: 5px; box-shadow: 0 0 0 1px #fff inset; -webkit-transition: all 1s ease; } .bigbox .pic ul li span:hover{ box-shadow: 0 0 0 20px #fff inset; color: red; } .bigbox .pic p{ color: lightseagreen; font-size: 13px; text-align: center; } .bottom{ width: 100%; background-color: #545861; border: 1px solid white; } .bottom img{ display: block; margin: auto; } .bottom .nav1{ width: 1000px; height: 300px; border-top:1px solid darkgray; margin: auto; position: relative; } .bottom .nav1 ul li:nth-child(1){ position: absolute; top: 10px; left: 30px; } .bottom .nav1 ul li:nth-child(2){ position: absolute; top: 10px; left: 270px; } .bottom .nav1 ul li:nth-child(3){ position: absolute; top: 90px; left: 30px; } .bottom .nav1 ul li:nth-child(4){ position: absolute; top: 90px; left: 270px; } .bottom .nav1 ul li:nth-child(5){ position: absolute; top: 170px; left: 30px; } .bottom .nav1 ul li:nth-child(6){ position: absolute; top: 10px; left: 600px; } .bottom .nav1 ul li input{ width: 200px; height: 25px; border-radius: 5px; } .bottom .nav1 ul p{ color: white; } .bq{ width: 100%; background-color: black; } .bq p{ color:white; text-align: center; } </style> </head> <body> <div class="bigbox"> <video src="video/home_loop_720p.mp4" autoplay="autoplay" loop="loop"<!-- controls="controls"-->></video> <audio src="audio/home.ogg" autoplay="autoplay" loop="loop" <!--controls="controls"-->></audio> <div class="bigtop"> <div class="top"> <div class="left fl"><img src="top/logo.png"/></div> <div class="right fr"> <a href="#">登录</a> <a href="#">注册</a> </div> </div> </div> <div class="bignav"> <div class="nav"> <div class="left fl"> <a href="#"> <img src="top/sanxian.png"/> <span style="color: white;margin-left: 5px;">选项</span> <img src="top/sanjiao.png"/> </a> </div> <div class="center fl"> <form action=""> <input type="search" name="search" id="search" value="" placeholder="遥控器" /> </form> </div> <div class="right fr"> <a href="" class="iconfont icon-wangpanyinle"></a> <a href="" class="iconfont">󰄪</a> <a href="" class="iconfont icon-gezi2"></a> <a href="" class="iconfont"></a> </div> </div> </div> <div class="pic"> <img src="top/wenzi.png"/> <p>Select the right resolution for your PC and dive in! (定制小程序开发费用请为您的电脑选择正确的分辨率)</p> <ul> <li class="left"><span class="iconfont icon-jiantou1"></span>STANDARD标准</li> <li class="right"><span class="iconfont icon-jiantou1 "></span>HD高清</li> </ul> </div> </div> <div class="new"> <header> <img src="img/new/new.jpg"/ > <p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p> </header> <ul> <li> <img src="img/new/pic1.jpg" alt="" /> <div class="up"> <p>补水保湿</p> <p>提亮肤色</p> <p><img src="img/new/jiantou.png" class="jiantou"/></p> <p><img src="img/new/anniu.png" class="anniu"/></p> </div> </li> <li> <img src="img/new/pic2.jpg" alt="" /> <div class="up"> <p>低敏配方</p> <p>收缩毛孔</p> <p><img src="img/new/jiantou.png" class="jiantou"/></p> <p><img src="img/new/anniu.png" class="anniu"/></p> </div> </li> <li> <img src="img/new/pic3.jpg" alt="" /> <div class="up"> <p>滋养容颜</p> <p>美丽自己</p> <p><img src="img/new/jiantou.png" class="jiantou"/></p> <p><img src="img/new/anniu.png" class="anniu"/></p> </div> </li> <div class="clear"></div> </ul> </div> <div class="try"> <!--<img src="img/效果图.PNG"/>--> <header> <img src="img/shizhuang.jpg"/ style="border-radius: 40px 40px 40px 40px;"> <p>美化容貌 增添自信 突出个性</p> </header> <ul> <li> <img src="img/try1.jpg" alt="" class="zheng"/> <img src="img/try4.jpg" alt="" class="fan"/> </li> <li> <img src="img/try2.jpg" alt="" class="zheng"/> <img src="img/try5.jpg" alt="" class="fan"/> </li> <li> <img src="img/try3.jpg" alt="" class="zheng"/> <img src="img/try6.jpg" alt="" class="fan"/> </li> <div class="clear"></div> </ul> </div> <div class="test"> <header> <img src="img/test/cp.jpg"/> <p>评测 定制小程序开发费用我们更专业 定制小程序开发费用用户更放心</p> </header> <ul> <li> <img src="img/test/cp1.jpg" alt="" class="tu"/> <img src="img/test/th1.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp2.jpg" alt="" class="tu"/> <img src="img/test/th2.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp3.jpg" alt="" class="tu"/> <img src="img/test/th3.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp4.jpg" alt="" class="tu"/> <img src="img/test/th4.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp5.jpg" alt="" class="tu"/> <img src="img/test/th5.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp6.jpg" alt="" class="tu"/> <img src="img/test/th6.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp7.jpg" alt="" class="tu"/> <img src="img/test/th7.png" alt="" class="tihuan"/> </li> <li> <img src="img/test/cp8.jpg" alt="" class="tu"/> <img src="img/test/th8.png" alt="" class="tihuan"/> </li> <div class="clear"></div> </ul> </div> <div class="bottom"><img src="top/logo1.jpg"/> <div class="nav1"> <form action=""> <ul> <li> <p>姓名：</p> <input type="text" name="" id="" value="" /> </li> <li> <p>邮箱：</p> <input type="text" name="" id="" value="" /> </li> <li> <p>电话：</p> <input type="text" name="" id="" value="" /> </li> <li> <p>密码：</p> <input type="text" name="" id="" value="" /> </li> <li> <a href=""><img src="top/but.jpg"/></a> </li> <li> <p>留言：</p> <textarea name="" rows="10" cols="50"></textarea> </li> </ul> </form> </div> </div> <div class="bq"> <p><strong>@定制小程序开发费用版权归属于工学部软件定制小程序开发费用工程专业学号1801120072周杰所有</strong></p> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
样式图，定制小程序开发费用由于缩小图太丑，定制小程序开发费用我就截取一部分；
定制小程序开发费用这个当中有很多的图片、定制小程序开发费用音乐等各种样式插入进定制小程序开发费用去不是很方便，定制小程序开发费用最后给大家一个链接。自取。
定制小程序开发费用第二个代码，定制小程序开发费用学习的淘宝网；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>淘宝模块</title> <style type="text/css"> header{ width: 1190px; margin: auto; } *{ margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } nav{ width: 1190px; height: 30px; border:1px solid #ccc ; margin: auto; } nav ul{ float: left; width: 1000px; background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%); list-style-type: none; } nav li{ display: inline-block; height: 30px; width: 90px; line-height: 30px; text-align: center; } nav li a{ text-decoration: none; } nav h2{ float: left; width: 190px; height: 30px; font-size: 16px; background-color: #ff5000; text-align: center; line-height: 30px; color: white; } nav a{ color: white; font-weight: 800; } .box{ width: 1190px; margin: auto; } .box .left{ width: 188px; height: 510px; border: 1px solid #ff5000; padding-top:5px ; padding-bottom:3px ; text-align: center; line-height: 33px; color: white; font-size: 16px; position: relative; } .box .left a{ text-decoration: none; color: #666; } .box .left li{ line-height: 32px; height: 32px; padding-left: 22px; padding-right: 19px; padding-top: 1px; font-size: 14px; font-weight: 400; width: 145px; color: #666; } .box .left .arrow1{ position: absolute; right: 8px; font-size: 12px; font-family: iconfont!important; font-style: normal; display: inline-block; text-decoration: none; -webkit-font-smoothing: antialiased; z-index: 1; } .box .left .tanchu{ position:absolute; left: 190px; top: 0px; display: none; z-index: 1; } .box .left a:hover .tanchu{ display: block; z-index: 1; } header .logtop a{ text-decoration: none; color: #FF5000 ; font-family: "微软雅黑"; font-size: 12px; } header .bottom a{ text-decoration: none; font-family: "微软雅黑"; color: black; font-size: 12px; } header .left{ float: left; } header .center{ float: left; padding-top: 35px; } header .right{ float: right; padding-top: 35px; padding-right: 50px; } .clear{ clear: both; } header .search{ width: 540px; height: 35px; border:2px solid #FF5000; border-radius: 30px 0px 0px 30px; color: #999999; padding-left: 20px; background-image: url(img/icon1.PNG),url(img/icon2.PNG) ; background-repeat: no-repeat; background-position: left,right; outline: none; float: left; } header .btn1{ color: white; font-size: 16px; font-family: "微软雅黑"; font-weight: 900; width: 75px; height: 35px; border: 2px solid #FF5000; border-radius: 0px 30px 30px 0px; background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%); color: #FFFFFF; cursor: pointer; border: 0px; float: left; } header .innerlogo{ width: 1190px; margin: auto; } header .logtop a:hover{ padding: 5px; background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);color: white; border-radius: 5px 5px 0px 0px; } header .logtop{ padding-left: 10px; } .banner{ width:100%; background-image: url(img/banner.png); } .banner a{ display: inline-block; width: 210px; height: 75px; position: relative; color: white; } .binner{ width: 1190px; margin: auto; } .banner .bl{ float: left; margin-left:20px ; margin-top: 15px; } .banner .br{ float: left; position: absolute; left: 140px; top: 10px; } .banner .br img{ width: 50px; height: 50px; } .ad{ width: 1190px; margin: auto; } .ad li{ display: inline-block; } .goods{ width: 1190px; margin: auto; padding-top: 20px; } .goods a{ display: inline-block; width: 180px; margin-left: 13px; } .goods a:hover h4{ color: red; } .goods h3 img{ width: 74px; height: 24px; float: left; } .goods h3{ font-size: 12px; font-weight: 400; color: #999; margin-bottom: 15px; margin-left: 13px; } .goods h4{ font-size: 16px; font-weight: 400; color: #3c3c3c; margin-bottom: 5px; } .goods p{ font-size: 14px; font-weight: 400; margin-top: 10px; } .goods p:first-of-type{color: #999;} .goods p:last-of-type{color: #35b1ff;} .goods .top{ position: relative; } .goods .imgtop{ width: 178px; height: 177px; background-color: rgba(0,0,0,0.1); position: absolute; left: 0px; top: 0px; } .goods .top:hover .imgtop{ background-color: rgba(0,0,0,0.2); } @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1604663585663'); /* IE9 */ src: url('iconfont.eot?t=1604663585663#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABtwAAALWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBZIFbATYCJAMICwYABCAFhG0HMhsDBhHVk3lkf4Q4xnZAKw0Eqa4pU20FOtme9Bst35xy4NpG24K7AloKfgUSAAAAACCI+P1Ys/8tJtI0mkkliWjCk0foGgpUO4u0Cw0hyN19/aK2yAMOMAs0gcA8m11bUiAxVW0touSP/JWe/C83ZbhUVpgXiiW5avAdUyXwYWXd811e1Og2SMJH/bb5qsQEubh5IgWmAXYe0upbACZ7X21SO+FQIk8hIBzg9IG8IvgthKEAuDhUzQQKyHyQxGXugQEM5zwXoLFWu8lakAJ4h7ELXuBpCHAUKpmsgrI67Cl7kgC5w4Pd2BeclLKIPWHbsDJFdrFhX9asJ2En+n35miFgsanYOVUD+X1kfdCJMfgBbQEC1nJ6gK0DA5KBQnZjsAJDGM5wpFSRQKnngz8/gRo56j8PadjpzgCCIfOZWB77UUssAOrZw7nAIMbq7TbdOSDtfrnk6zY86/DLoOtr2tGPtT1XFz6VffHH9tMNh97XPsw9btzP3nXFOT8njM1zaIHsHdSjYa8Md7m39/r5/SAN031u9mkn2XVYOnFrW1kfPc7z5IhdOupgphweo+srrZbGoe4mhZQMT9Mi4Z7yzxCcYjp2t1EAfntXNOYHinmA/R2YBH+yk8YAyjl20Eqgo1qAJRebO6xw5Ah+CFk9/Zsq9bntqLDnc/NmOyEZGPaikYpNBhtOUsGWvUxwlKRwvRMvIxiSDkCiJQDC3TVYXD2C4e4Zqdi/YMPXf7DlHgyOGmS7o5PY0CaRUDL2oL4wdd5pV8Miztzj8DSS8pwIf0ZaJw+UWVGOtOiQlpizvoaKWYMmb6EB56ExHgL5GTvORuZQ57lu+qas8zYSJJSMPagvTJ13OmjNovLzexyeRlJHQ536jLRO3UOZFQOQrdANaniU16yvoWLWoMlbaMAwNMZDaB42Y8fZOMEf6txppocKs+3F9u+2EUUCW5aIk2MwOklvPIOLIgAA') format('woff2'), url('iconfont.woff?t=1604663585663') format('woff'), url('iconfont.ttf?t=1604663585663') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1604663585663#iconfont') format('svg'); /* iOS 4.1- */}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-xiaolian:before { content: "\e627";}.sale{ width: 1190px; margin: auto;}.sale .item a{ display: block; color: #999; font-size: 12px;}.sale .item{ width: 197px; height: 310px; padding: 18px; border: 1px solid #f4f4f4 ; float: left; position: relative;}.sale .item:hover{ border: 1px solid #FF5000;}.sale .item img{ width: 197px; height: 197px; }.sale .item .left{ position: absolute; left: 18px; bottom: 18px;}.sale .item .right{ position: absolute; right: 18px; bottom: 18px;}.sale .item a:nth-of-type(3){ color: #FF5000;}.sale .item a:nth-of-type(3) em{ font-size: 22px; font-style: normal;}.sale h3:before{ content: ""; width: 4px; height: 16px; background-color: #FF0000; display: inline-block; margin-right:10px ; margin-left: 18px;}.sale h3{ color: #FF5000; margin-bottom: 10px;}.sale .sale-nav a{ color: #999; font-size: 12px; width: 50px; height: 35px; display: inline-block; text-align: center; line-height: 35px;}.bigtop{ width: 100%; background-color: #f5f5f5;}.bigtop .top{ width: 1190px; height: 35px; margin: auto; position: relative; }.bigtop .left{ width: 300px; height: 35px; float: left; }.bigtop .right{ width: 700px; height: 35px; float: right; }.bigtop li{ display: inline-block; line-height: 35px;}.bigtop a{ font-size: 12px; color: #6c6c6c;}.bigtop .item{ width: 70px; }.bigtop .long{ width: 100px;}.bigtop .orange{ color: #DF5000; margin-right: 4px;}.bigtop .left{ } .bigtop .ml{ margin-left: 6px; color: #9c9c9c; } .bigtop .toptanchu1{ width: 250px; height: 200px; overflow: scroll; display: none; } .bigtop .toptanchu1 li{ width: 100%; } .bigtop li:hover .toptanchu1{ display: block; position: absolute; left: 0px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu2{ width: 100px; height: 100px; overflow: scroll; display: none; } .bigtop .toptanchu2 li{ width: 100%; } .bigtop li:hover .toptanchu2{ display: block; position: absolute; left: 490px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu3{ width: 200px; height: 70px; overflow: scroll; display: none; } .bigtop .toptanchu3 li{ width: 100%; } .bigtop li:hover .toptanchu3{ display: block; position: absolute; left: 565px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu4{ width: 150px; height: 100px; overflow: scroll; display: none; } .bigtop .toptanchu4 li{ width: 100%; } .bigtop li:hover .toptanchu4{ display: block; position: absolute; left: 640px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu5{ width: 200px; height: 300px; overflow: scroll; display: none; } .bigtop .toptanchu5 li{ width: 100%; } .bigtop li:hover .toptanchu5{ display: block; position: absolute; left: 875px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu6{ width: 100px; height: 100px; overflow: scroll; display: none; } .bigtop .toptanchu6 li{ width: 100%; } .bigtop li:hover .toptanchu6{ display: block; position: absolute; left: 980px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu7{ width: 1190px; height: 400px; overflow: scroll; display: none; } .bigtop .toptanchu7 li{ width: 100%; } .bigtop li:hover .toptanchu7{ display: block; position: absolute; left: 0px; top: 35px; background-color: white; z-index: 10000001; } .bigtop .toptanchu7 .zuo{ width: 292.5px; height: 400px; float: left; } .bigtop .toptanchu7 .zhong1{ width: 292.5px; height: 400px; float: left; } .bigtop .toptanchu7 .zhong2{ width: 292px; height: 400px; position: absolute; right: 293px; } .bigtop .toptanchu7 .you{ width: 292.5px; height: 400px; float: right; } .boxmain{ width: 1000px; height: 520px; position: relative; background-color: lightblue; background-image: url(cat/2.jpg); } .boxmain .boxtitle li a{ width: 20px; height: 5px; background-color: darkgrey; display: inline-block; } .boxmain .boxtitle li{ display: inline-block; } .boxmain .boxtitle{ position: absolute; bottom: 20px; left: 40%; } .boxmain img{ width: 1000px; height: 520px; } .boxmain .boximage{ display: none; } .boxmain .boximage:target{ display: block; } .box .right{ position: absolute; top: 0pc; left: 190px; z-index: 0; } .box{ position: relative; } .box .right .boxmain .boximage:target{ display: block; z-index: 0; } .box .right .boxmain .boximage{ display: none; z-index: 0; } .aside{ width: 40px; height: 250px; padding: 10px; background-color: lightgray; position: fixed; right: 120px; top: 200px; } .aside a{ display: block; width: 40; height: 40px; margin: 3px; } .aside a:hover{ background-color: orange; } .bigtop .left .item span{ display: inline-block; -webkit-transition: ease 1s all; } .bigtop .left .item span:hover{ -webkit-transform: rotate(180deg); } </style> <link rel="stylesheet" href="css/iconfont.css" type="text/css" /> </head> <body> <div class="aside"> <a href="#">热卖单品</a> <a href="#">热卖单品</a> <a href="#">热卖单品</a> <a href="#">热卖单品</a> <a href="#">热卖单品</a> <a href="bigtop">返回商品</a> </div> <div class="bigtop" id="bigtop"> <div class="top"> <div class="left"> <ul> <li class="item"><a href="#">中国大陆</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu1"> <ul> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> <li><a href="#">中国香港</a></li> </ul> </div> </li> <li class="item"><a href="#" style="color: #FF5000;">亲，请登录</a></li> <li class="item"><a href="#">免费注册</a></li> <li class="item"><a href="#">定制小程序开发费用手机逛淘宝</a></li> </ul> </div> <div class="right"> <ul> <li class="item"><a href="#">我的淘宝</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu2"> <ul> <li><a href="#">已买到的宝贝</a></li> <li><a href="#">我的足迹</a></li> </ul> </div> </li> <li class="item"><a href="#"><span class="iconfont orange"></span>购物车</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu3"> <ul> <li><a href="#">你购物车里还没有任何宝贝！</a></li> </ul> </div> </li> <li class="item"><a href="#"><span class="iconfont orange"></span>收藏夹</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu4"> <ul> <li><a href="#">收藏的宝贝</a></li> <li><a href="#">收藏的店铺</a></li> </ul> </div> </li> <li class="item"><a href="#">商品分类</a></li> <li class="item"><a href="#">免费开店</a></li> <li>丨</li> <li class="item long"><a href="#">千牛卖家中心</a><span class="iconfont icon-xiajiantou"></span> <div class="toptanchu5"> <ul> <li><a href="#">免费开店</a></li> <li><a href="#">已卖出的宝贝</a></li> <li><a href="#">出售中的宝贝</a></li> <li><a href="#">卖家服务市场</a></li> <li><a href="#">卖家培训中心</a></li> <li><a href="#">体验中心</a></li> <li><a href="#">问商友</a></li> </ul> </div> </li> <li class="item"><a href="#">联系客服</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu6"> <ul> <li><a href="#">消费者客服</a></li> <li><a href="#">卖家客服</a></li> </ul> </div> </li> <li class="item long"><a href="#"><span class="iconfont orange"></span>网站导航</a><span class="iconfont icon-xiajiantou ml"></span> <div class="toptanchu7"> <div class="zuo"> <h3><span style="color: #FF0000;">主题市场</span></h3> <ul> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>111111</li> <li><a href="#"></a>1111111</li> </ul> </div> <div class="zhong1"> <h3><span style="color:green;">特色市场</span></h3> <ul> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>11111</li> </ul> </div> <div class="zhong2"> <h3><span style="color:purple;">阿里APP</span></h3> <ul> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111111</li> </ul> </div> <div class="you"> <h3><span style="color: lightskyblue;">精彩推荐集</span></h3> <ul> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>11111</li> <li><a href="#"></a>1111111</li> <li><a href="#"></a>11111111</li> </ul> </div> </div> </li> </ul> </div> </div> </div> <div class="banner"> <div class="binner"> <a href="#" style="width: 90px;"><img src="img/banlogo.png" /></a> <a href="#" style="background-image:url(img/b1.png)"> <div class="bl"> <h4>超值囤货</h4> <p>1元抢百元券</p> </div> <div class="br"> <img src="img/b4-4.PNG"/> </div> </a> <a href="#" style="background-image:url(img/b2.png)"> <div class="bl"> <h4>秋冬好衣</h4> <p>爆款不止3折</p> </div> <div class="br"> <img src="img/b4-4.PNG"/> </div> </a> <a href="#" style="background-image: url(img/b3.png)"> <div class="bl"> <h4>运动新品</h4> <p>尖货新品直降</p> </div> <div class="br"> <img src="img/b4-4.PNG"/> </div> </a> <a href="#" style="background-image:url(img/b4.png)"> <div class="bl"> <h4>以旧换新</h4> <p>最高补贴3000</p> </div> <div class="br"> <img src="img/b4-4.PNG"/> </div> </a> <a href="#" style="background-image:url(img/b5.png)"> <div class="bl"> <h4>运动爆款</h4> <p>限量5折抢</p> </div> <div class="br"> <img src="img/b4-4.PNG"/> </div> </a> </div> </div> <header> <div class="top"></div> <div class="logo"> <div class="left"><img src="img/290-130.gif"/></div> <div class="center"> <div class="logtop"> <p> <a href="#">宝贝</a> <a href="#">天猫</a> <a href="#">店铺</a> </p> </div> <div class="middle"> <from> <input type="search" name="search" id="search" class="search" placeholder="鹿阿姨"/> <input type="button" name="ss" id="ss" value="搜索" class="btn1"/> </from> </div> <div class="bottom"> <p> <a href="#">新款连衣裙</a> <a href="#">四件套</a> <a href="#"><span style="color: #FF5000;">潮流体恤</span></a> <a href="#">时尚女鞋</a> <a href="#">短裤</a> <a href="#">半身裙</a> <a href="#">男士外套</a> <a href="#">墙纸</a> <a href="#">行车记录仪</a> <a href="#">新款男鞋</a> <a href="#">耳机</a> <a href="#">时尚女包</a> <a href="#">沙发</a> </p> </div> </div> <div class="right"><img src="img/二维码.PNG"/></div> <div class="clear"></div> </div> </header> <nav> <h2>主题市场</h2> <ul> <li><a href="#">天猫</a></li> <li><a href="#">聚划算</a></li> <li><a href="#">天猫超市</a></li> <li><a href="#">海抢购</a></li> <li><a href="#">电器城</a></li> <li><a href="#">司法拍卖</a></li> <li><a href="#">淘宝心选</a></li> <li><a href="#">飞猪旅行</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">苏宁易购</a></li> </ul> </nav> <article> <div class="box"> <div class="left"> <ul> <li><a href="#">女装 / 内衣 / 家居 <img src="img/tan1.PNG" alt="" class="tanchu"/> </a> <i class="arrow1">></i> </li> <li><a href="#">女鞋 / 男鞋 / 箱包 <img src="img/tan2.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">母婴 / 童鞋 / 玩具 <img src="img/tan3.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">男装 / 运动户外 <img src="img/tan4.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">美妆 / 彩妆 / 个护 <img src="img/tan5.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">手机 / 数码 / 企业 <img src="img/tan6.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">大家电 / 生活电器 <img src="img/tan7.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">零食 / 生鲜 / 茶酒 <img src="img/tan8.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">厨具 / 收纳 / 清洁 <img src="img/tan9.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">家访 / 家饰 / 鲜花 <img src="img/tan10.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">图书音像 / 文具 <img src="img/tan11.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">医药保健 / 进口 <img src="img/tan12.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">汽车 / 二手车 / 用品 <img src="img/tan13.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">房产 / 装修家居 / 建材 <img src="img/tan14.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> <li><a href="#">手表 / 眼睛 / 珠宝饰品 <img src="img/tan15.PNG" alt="" class="tanchu"/></a> <i class="arrow1">></i> </li> </ul> </div> <div class="right"> <div class="boxmain"> <div class="boxtitle"> <ul> <li><a href="#boximage1"></a></li> <li><a href="#boximage2"></a></li> <li><a href="#boximage3"></a></li> <li><a href="#boximage4"></a></li> <li><a href="#boximage5"></a></li> <li><a href="#boximage6"></a></li> </ul> </div> <div class="boximage" id="boximage1"><a href="#"><img src="cat/1.webp" alt="" /></a></div> <div class="boximage" id="boximage2"><a href="#"><img src="cat/2.webp" alt="" /></a></div> <div class="boximage" id="boximage3"><a href="#"><img src="cat/3.webp" alt="" /></a></div> <div class="boximage" id="boximage4"><a href="#"><img src="cat/4.webp" alt="" /></a></div> <div class="boximage" id="boximage5"><a href="#"><img src="cat/5.webp" alt="" /></a></div> <div class="boximage" id="boximage6"><a href="#"><img src="cat/6.webp" alt="" /></a></div> </div> </div> <div class=""></div> </div> </article> <div class="ad"> <ul> <li><a href="#"></a><img src="img/a1.png"/></li> <li><a href="#"></a><img src="img/a2.png"/></li> <li><a href="#"></a><img src="img/a3.png"/></li> <li><a href="#"></a><img src="img/a4.png"/></li> <li><a href="#"></a><img src="img/a5.png"/></li> </ul> </div> <!-- 货物展示的结构代码 --> <div class="goods"> <h3><img src="img/148-48.png"/><span style="display: inline-block;height: 24px;line-height: 24px;margin-left: 15px;margin-top: 10px;">与品质生活不期而遇</span></h3> <div class="ginner"> <a href="#"> <div class="top"><img src="img/p1.PNG"/><div class="imgtop"></div></div> <div class="bottom"> <h4>大豆家 方头奶奶鞋</h4> <p>一脚蹬设计，方便日常的穿</p> <p><span class="iconfont icon-xiaolian"></span>3758人说好</p> </div> </a> <a href="#"> <div class="top"><img src="img/p1.PNG"/><div class="imgtop"></div></div> <div class="bottom"> <h4>佳宝路转角水槽</h4> <p>304不锈钢，表面光洁坚固</p> <p><span class="iconfont icon-xiaolian"></span> 123人说好 </p> </div> </a> <a href="#"> <div class="top"><img src="img/p3.PNG"/><div class="imgtop"></div></div> <div class="bottom"> <h4>肖优秀真皮细高跟过膝</h4> <p>细跟尖头设计更显优雅女人</p> <p><span class="iconfont icon-xiaolian"></span>68人说好</p> </div> </a> <a href="#"> <div class="top"><img src="img/p4.PNG"/><div class="imgtop"></div></div> <div class="bottom"> <h4>LANCOME秋冬限量迷雾</h4> <p>雾面质感暗红色管身，优雅</p> <p><span class="iconfont icon-xiaolian"></span>16人说好</p> </div> </a> <a href="#"> <div class="top"><img src="img/p5.PNG"/><div class="imgtop"></div></div> <div class="bottom"> <h4>汽车盲点变道辅助系</h4> <p>行车安全盲区监测系统，</p> <p><span class="iconfont icon-xiaolian"></span>24人说好</p> </div> </a> <a href="#"> <div class="top"><img src="img/p5.PNG"/> <div class="imgtop"></div> </div> <div class="bottom"> <h4>PUMA芥末绿复古老爹鞋</h4> <p>芥末绿色的鞋面视觉上给人</p> <p><span class="iconfont icon-xiaolian"></span>7人说好</p> </div> </a> </div> </div> <div class="over"> <div class="sale" id="bigtop"> <h3>热卖单品</h3> <div class="sale-nav"> <a href="#">连衣裙</a> <a href="#">女手表</a> <a href="#">女裤休闲</a> <a href="#">耐克</a> <a href="#">床</a> <a href="#">女t恤</a> <a href="#">平板电脑</a> <a href="#">女秋装</a> <a href="#">休闲裤</a> <a href="#">水杯</a> <a href="#">口红</a> <a href="#">男士T恤</a> <a href="#">男拖鞋</a> <a href="#">防晒霜</a> <a href="#">手链</a> <a href="#">沐浴露</a> <a href="#">平板电脑</a> <a href="#">男手表</a> <a href="#">女手表</a> <a href="#">项链</a> <a href="#">冰箱</a> </div> <div class="sale-bd"> <ul> <li class="item"> <a href="#"><img src="img/11.webp" /></a> <a href="#">欧美外贸原单春秋款高腰包腹显瘦孕妇长裤小脚裤子修身打底裤</a> <a href="#" class="left">¥<em>99</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/22.webp" /></a> <a href="#">职业阿玛施特牛仔外套女装正品2020秋新款正品宽松休闲卡通</a> <a href="#" class="left">¥<em>239</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/古装.png" /></a> <a href="#">汉服女中国风仙气初中学生古装改良版连衣裙</a> <a href="#" class="left">¥<em>44</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/2.webp" /></a> <a href="#">重生立领斜襟领口金边大袖衫一片式马面裙</a> <a href="#" class="left">¥<em>99</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/1.webp" /></a> <a href="#">碧落梨花渡汉服女原创齐胸对襟襦裙春夏绣花</a> <a href="#" class="left">¥<em>279</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/帐篷.png" /></a> <a href="#">骆驼户外帐篷全自动速开露营野营超轻便帐蓬</a> <a href="#" class="left">¥<em>313</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/意大利.png" /></a> <a href="#">2014 意大利S家秋冬新品 七分袖蝴蝶结纯色连衣裙</a> <a href="#" class="left">¥<em>88</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/3.webp" /></a> <a href="#">【暖房】清sang 原89元mystic原d全蕾丝刺绣夏新款缎拼接短</a> <a href="#" class="left">¥<em>66</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/霓裳.png" /></a> <a href="#">远山乔汉服原创齐腰裙半臂坦领汉服女套装</a> <a href="#" class="left">¥<em>189</em></a> <a href="#" class="right">月销3595笔</a> </li> <li class="item"> <a href="#"><img src="img/11.webp" /></a> <a href="#">酥容 宽松chic高腰少女裤 显瘦bf风黑阔腿裤休闲学生运动黑色</a> <a href="#" class="left">¥<em>80</em></a> <a href="#" class="right">月销3595笔</a> </li> </ul> </div> </div> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
样式图
第三个人民网；
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>人民网-模块设计</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body{ background-image: url(img2/2020gq.jpg); background-repeat: no-repeat; background-position: center top; } .red { color: red; } .rm { width: 48px; height: 33px; /*border: 1px solid black;*/ display: inline-block; background-image: url(img2/rm.jpg); background-repeat: no-repeat; margin-right: 2px; } .w1000 { width: 1000px; margin: auto; border: 1px solid black; } .mok1 { height: 1280px; } .mok2 { height: 380px; } .box { width: 278px; padding: 15px; border: 1px solid black; } .mok1 .box { height: 378px; } .mok2 .box { height: 348px; } .fr { float: right; } .fl { float: left; } .ml35 { margin-left: 35px; } .mb { margin-bottom: 25px; } .box h3 { font-size: 24px; border-bottom: 1px solid black; padding-bottom: 10px; font-family: "microsoft yahei"; margin-bottom: 15px; } .box ul { list-style-type: none; } .box li { font-size: 14px; font-family: simsun; line-height: 39px; } .box a { text-decoration: none; color: black; } .box a:hover { color: red; } .box p { width: 275px; height: 160px; position: relative; } .box p span { display: ; width: 275px; height: 35px; position: absolute; left: 0px; bottom: 0px; background-image: url(img2/1.jpg); color: white; text-align: center; font-size: 14px; line-height: 35px; } .ad { height: 90px; position: relative; margin-bottom: 10px; margin-top: 10px; } .mok3{ height: 627px; } .mok3 .box{ height: 596px; } .mok4{ height: 450px; margin-bottom: 10px; margin-top: 300px; background: #FFFFFF; } .mok4 div{ height: 50px; background: #FF0000; align-content: center; font-family: "微软雅黑"; } .mok4 div a{ margin: 20px; margin-top: 100px; text-decoration: none; color: black; line-height: 50px; } .box h3 img:hover{ transform: rotate(180deg); transition: all 3s; </style> </head> <body> <div class="w1000 mok4"> <img src="img2/headimg1.PNG"/> <div class="w1000"> <a href="">滚动 </a> <a href="">时政</a> <a href="">国际 </a> <a href="">财经 </a> <a href="">台湾 </a> <a href="">军事 </a> <a href="">观点</a> <a href="">领导</a> <a href="">视频</a> <a href="">人事</a> <a href="">理论</a> <a href="">法治</a> <a href="">社会</a> </div> <img src="img2/headimg2.PNG"/> </div> <div class="w1000 mok3"> <div class="box fl"> <a> <h3>国际 一带一路 人民智云<img src="img2/jiaicon.png" align="right"/></h3></a> <p> <img src="img2/MAIN202010100910260779540089298.jpg"> <span>韩国大白菜飙涨至62元一颗</span> <ul> <a href="#"> <li> 雪深达6厘米 中国最冷小镇开启"童话模式" </li> <a href="#"> <li> 青岛新增3例新冠肺炎无症状感染者 </li> <a href="#"> <li> 北京"十四五"建言超千条 近四成关注交通 </li> <a href="#"> <li> 世卫:全球累计新冠确诊病例达36754395例 </li> <a href="#"> <li> 湖北仙桃村民中毒 初判饮水钡金属超标 </li> <a href="#"> <li> 古特雷斯呼吁纳卡冲突各方尊重停火协议 </li> <a href="#"> <li> 拉美学界:拉美需要同中国开展有益合作 </li> </a> <a href="#"> <li> 世界镇痛日:面对疼痛 千万别忍忍就算了 </li> </a> <a href="#"> <li> 青岛新增3例新冠肺炎无症状感染者 </li> </a> <a href="#"> <li> 王毅分别同菲律宾外长、伊朗外长举行会谈 </li> </a> </ul> </div> <div class="box ml35 fl"> <a> <h3>人民 体育<img src="img2/jiaicon.png" align="right"/></h3></a> <p> <img src="img2/MAIN202010111426041199449322953.jpg"> <span>2020法网：斯维亚特克夺女单冠军</span> </p> <ul> <a href="#"> <li> 美国新冠肺炎确诊病例数超765万 </li> </a> <a href="#"> <li> 疫情下在美中国留学生创业:"危"中求"机" </li> </a> <a href="#"> <li> 白宫医生预期特朗普即将重返公共活动 </li> </a> <a href="#"> <li> 美制裁18家伊朗银行 伊方批“政治宣传” </li> </a> <a href="#"> <li> 景区热气球带飞工作人员 双腿悬空险坠落 </li> </a> <a href="#"> <li> 退休老师做担保帮贷18万后学生失联 </li> </a> <a href="#"> <li> 巨大海象迷路后误闯小镇 穿过10个街区 </li> </a> <a href="#"> <li> 3岁儿童闯入车流之中 被民警一把抱起 </li> </a> <a href="#"> <li> 澳洲一男子被鲨鱼尾随 无人机助其脱险 </li> </a> <a href="#"> <li> 巧夺天工！小伙用6400根筷子拼出母校 </li> </a> </ul> </div> <div class="box fr"> <a> <h3>财经 产经<img src="img2/jiaicon.png" align="right"/></h3></a> <p> <img src="img2/MAIN202008110811140709048729554.jpg"> <span>近1.16亿元 央行开出国内支付机构最大罚单</span> </p> <ul> <a href="#"> <li> 西藏昌都各族各界隆重庆祝解放70周年 </li> </a> <a href="#"> <li> 湖北省78746名干部驻贫困村开展帮扶 </li> </a> <a href="#"> <li> 中国-东盟跨境医疗合作平台正式启动 </li> </a> <a href="#"> <li> 海南政务便民服务站新增77项便民事项 </li> </a> <a href="#"> <li> 专题|决战决胜脱贫攻坚地方策 </li> </a> <a href="#"> <li> 全国巾帼助农创业浙江基地落户义乌 </li> </a> <a href="#"> <li> 福建闽清：漫山橄榄树“种出”山区致富路 </li> </a> <a href="#"> <li> 深圳全面强化“一核一带一区”主引擎作用 </li> </a> <a href="#"> <li> 今年四川高职扩招 “八类群体”可报名 </li> </a> <a href="#"> <li> "互联网+中华文明"展在首都博物馆开幕 </li> </a> </ul> </div> </div> <div class="w1000 ad"> <img src="img2/hf.jpg" /> <img src="img2/ad1.png" style="position: absolute; top: 0px; right: 0px;" /> </div> <div class="w1000 mok1"> <div class="box fl mb"> <a> <h3>旅游<img src="img2/jiaicon.png" align="right"/></h3></a> <p> <img src="img2/MAIN202009290907015519298894528.jpg"> <span>“逛博物馆”成为新时尚</span> </p> <ul> <a href="#"> <li> 文旅部再次提醒游客注意安全 </li> </a> <a href="#"> <li> 湖北30家重点景区单日接待31.1万人次 </li> </a> <a href="#"> <li> 工业旅游：在安源，走过百年矿道 </li> </a> <a href="#"> <li> 坐着高铁看中国——快旅慢游 美丽中国 </li> </a> </ul> </div> <div class="box fl ml35 mb "> <h3>美丽乡村<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202009290927253652947130195.jpg"> <span>大凉山里“暖流”涌</span> </p> <ul> <a href="#"> <li> 让每个乡村收获幸福 </li> </a> <a href="#"> <li> 丰收中国，希望田野的最美画卷 </li> </a> <a href="#"> <li> 村民喜增收 村寨大变样 </li> </a> <a href="#"> <li> 沪郊乡村成市民休闲“网红点” </li> </a> </ul> </div> <div class="box fr mb"> <h3>汽车<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202009300947078514519843992.jpg"> <span>交通部：抓好疫情防控 保障群众安全出行</span> </p> <ul> <a href="#"> <li> 国庆首日发送旅客6586.23万人次 </li> </a> <a href="#"> <li> 新疆15项措施加速汽车消费回暖 </li> </a> <a href="#"> <li> 中国农村公路里程已达420万公里 </li> </a> <a href="#"> <li> 交通部：严格公路口岸运输管理 </li> </a> </ul> </div> <div class="box fl mb"> <h3>教育<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202009301006528402481528620.jpg"> <span>名校入驻"回天" 32个项目完成近半</span> </p> <ul> <a href="#"> <li> 职业教育进入提质培优新阶段 </li> </a> <a href="#"> <li> 大学食堂自选称重 节俭已成新风尚 </li> </a> <a href="#"> <li> 村里来了科技扶贫“智囊团” </li> <a href="#"> <li> 面临高三首次月考 做好复习计划最重要 </li> </a> </ul> </div> <div class="box fl ml35 mb"> <h3>科普<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202010030903418170587910993.jpg"> <span>国庆期间准备结婚？婚前检查先了解一下</span> </p> <ul> <a href="#"> <li> 这种米能减肥还对心血管好，赶快吃起来 </li> </a> <a href="#"> <li> 总是在夜间腿抽筋？这些情况需要注意了 </li> </a> <a href="#"> <li> 新冠病毒完整结构图到底多牛 </li> </a> <a href="#"> <li> 除了坠毁和回收 老旧航天器还有第三种归宿 </li> </ul> </div> <div class="box fr mb"> <h3>传媒 知识产权<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202010030917177589740016314.jpg" width="280"> <span>国庆档三天收获票房二十亿</span> </p> <ul> <a href="#"> <li> 文化街区里的“旧时光” </li> </a> <a href="#"> <li> 时代精神是影视创作的永恒动力 </li> </a> <a href="#"> <li> 思政节目赋能思政课 </li> </a> <a href="#"> <li> 陕西日报：走好群众路线 做好深融大文章 </li> </a> </ul> </div> <div class="box fl"> <h3>书画<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202009291344107138785317736.jpg" width="280" height="160"> <span>用绘画讴歌光辉时刻——画里的“国庆”</span> </p> <ul> <a href="#"> <li> 黄金周“文艺游”攻略 好展任你看 </li> </a> <a href="#"> <li> 月到中秋分外明 古今中外共此时 </li> </a> <a href="#"> <li> “互联网+中华文明”展览开幕 </li> </a> <a href="#"> <li> 中国漫画家大会在穗召开 </li> </a> </ul> </div> <div class="box fl ml35"> <h3>军事<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202010040933496276149319620.jpg"> <span>大学生“后浪”汇入强军洪流</span> </p> <ul> <a href="#"> <li> 祝福母亲，他们在边防一线守望家与国 </li> </a> <a href="#"> <li> 第74集团军某旅问卷调查掌握官兵用餐需求 </li> </a> <a href="#"> <li> 坝上小村庄 阔步奔小康 </li> </a> <a href="#"> <li> 将国防观念深植学生心中 </li> </a> </ul> </div> <div class="box fr"> <h3><sapn class="rm"></sapn>健康<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN202010040725246502787924626.jpg"> <span>疲劳背痛?5种运动专治假日各种不适</span> </p> <ul> <a href="#"> <li> 截至6月底医保跨省就医直接结算669万人次 </li> </a> <a href="#"> <li> 世卫：全球累计新冠确诊病例达34495176例 </li> </a> <a href="#"> <li> 糖友尿酸高，首选双胍 </li> </a> <a href="#"> <li> 三名科学家获2020年诺贝尔生理学或医学奖 </li> </ul> </div> </div> <div class="w1000 ad"> <img src="img2/hf2.jpg" /> <img src="img2/ad1.png" style="position: absolute; top: 0px; right: 0px;" /> </div> <div class="w1000 mok2"> <div class="box fl "> <h3>人民日报 人民网<img src="img2/jiaicon.png" align="right"/></h3> <p> <img src="img2/MAIN201912261145299809222635520.jpg" height="125px" align="left"> <a href="#">2019年12月6日，李宝善社长会见韩国江原道知事崔文洵一行。[阅读]</a> </p> <ul> <a href="#"> <li> 李宝善社长会见巴基斯坦驻华大使哈什米 </li> </a> <a href="#"> <li> 人民日报全媒体亮相服贸会 </li> </a> <a href="#"> <li> “大道康庄”人民网全媒体调研行在京启动 </li> </a> <a href="#"> <li> 《70问解码“中国之治”》出版 </li> </a> </ul> </div> <div class="box fl ml35"> <h3>人民服务<img src="img2/jiaicon.png" align="right"/></h3> <ul> <a href="#"> <li> 人民日报图文数据库 </li> </a> <a href="#"> <li> 政务密钥 </li> </a> <a href="#"> <li> 金报电子 </li> </a> <a href="#"> <li> 领导人活动报道集 </li> </a> <a href="#"> <li> 人民日报社论、言论 </li> </a> <a href="#"> <li> 省部长言论 </li> </a> <a href="#"> <li> 中国共产党重大事件人物库 政府工作报告 </li> </a> <a href="#"> <li> 中国共产党重要文献 中共历次全会文献 </li> </a> </ul> </div> <div class="box fr"> <h3>资料<img src="img2/jiaicon.png" align="right"/></h3> <ul> <a href="#"> <li> 高层领导人报道集 </li> </a> <a href="#"> <li> 地方领导资料库 历次党代会 </li> </a> <a href="#"> <li> 十九届四中全会电子书 </li> </a> <a href="#"> <li> 2020年全国两会 外交部发言人 </li> </a> <a href="#"> <li> 中央重拳打击腐败 人事任免 </li> </a> <a href="#"> <li> 开国将帅名录 党史人物纪念馆 </li> </a> <a href="#"> <li> 历年访谈汇总 2020两会访谈录 </li> </a> <a href="#"> <li> 高考 考公务员 图解新闻 </li> </a> </ul> </div> </div> </div> <p> <h3 align="center" style="color: black;">周杰 1801120072 软件工程二班</h3></p> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
样式图
第四个网页：图形变换；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>过渡和变形</title> <style type="text/css"> *{ padding: 0px; margin: 0px; list-style: none; } body{ background-color: #000000; } .box{ width: 1200px; margin: auto; } .box li{ display: inline-block; margin: 38px; } .box .image{ width: 200px; height: 200px; border: 10px solid white; border-radius: 15px; margin-top: 30px; overflow: hidden; -webkit-transition: ease 2s all; -webkit-animation-name: faguang; -webkit-animation-duration: 2s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } .box h2{ color: white; background-color: rosybrown; text-align: center; text-shadow: 2px 2px gray; border-radius: 20px; width: 100px; height: 40px; margin: auto; line-height: 40px; -webkit-animation-name: faguang; -webkit-animation-duration: 2s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } @-webkit-keyframes faguang{ from{ box-shadow: 0px 0px 10px 10px green; } to{ box-shadow: 0px 0px 10px 10px gold ; } } .box .trans:hover{ border-radius: 50%; } .box img{ -webkit-transition: ease 2s all; -webkit-transform-origin: left top; } .box .scale:hover img{ -webkit-transform: scale(2); } .box .rotate:hover{ -webkit-transform: rotate(20deg); } .box .color:hover img{ -webkit-filter: grayscale(100%); } </style> </head> <body> <div class="box"> <ul> <li> <h2>过渡</h2> <div class="image trans"><img src="images/image1.jpg"/></div> </li> <li> <h2>缩放</h2> <div class="image scale"><img src="images/image2.jpg"/></div> </li> <li> <h2>旋转</h2> <div class="image rotate"><img src="images/image3.jpg"/></div> </li> <li> <h2>灰度</h2> <div class="image color"><img src="images/image4.jpg"/></div> </li> </ul> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
样式图
第五个网页：网易云唱片；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>media</title> <style type="text/css"> .zz{ width: 100%; height: 100%; margin: auto; position: relative; } .cd{ width: 600px; height: 600px; border: 10px solid #ccc; border-radius: 50%; background-image: repeating-radial-gradient(circle at 50% 50%,#333 0%,#000 1%);重复径向渐变 /*background-image: repeating-linear-gradient(to right,#333 0%,#000 1%);*/ /*margin: auto;*/ position: relative; margin-left: 150PX; } .in{ /*border-radius: 50%;*/ width: 422px; height: 422px; position:relative; /*position: absolute;*/ left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); overflow: hidden; } .in img { border-radius: 50%; /*-webkit-animation: xuanzhuan 4s infinite;*/ } .song{ /*position: relative;*/ width: 500px; height: 600px; top: 0px; /*left:0px;*/ } .song h1{ color: darkblue; } @font-face { font-family: "jianzi"; src: url(font/FZJZJW.TTF); } h1{ font-family: "jianzi"; } p{ font-family: "jianzi"; } .fl{ float: left; } .fr{ float: right; } .xz{ animation: move 4s linear infinite; -webkit-animation: move 4s linear infinite; display: inline-block; } @keyframes move{ from{transform:rotate(0deg) ;} to{transform:rotate(360deg) ;} } </style> </head> <body> <div class="zz"> <div class="cd fl "> <div class="in"><img src="img/cd_img.jpg" class="xz" /></div> </div> <div class="song fr"> <h1>我和我的祖国</h1> <p> 作词 : 张藜</p> <p> 作曲 : 秦咏诚</p> <p>我和我的祖国一刻也不能分割</p> <p>无论我走到哪里都流出一首赞歌</p> <p>我歌唱每一座高山我歌唱每一条河</p> <p>袅袅炊烟小小村落路上一道辙</p> <p>啦……</p> <p>你用你那母亲的脉搏和我诉说</p> <p>我的祖国和我像海和浪花一朵</p> <p>浪是海的赤子海是那浪的依托</p> <p>每当大海在微笑我就是笑的旋涡</p> <p> 我分担着海的忧愁分享海的欢乐</p> <p> 啦…..</p> <p> 永远给我碧浪清波心中的歌</p> <details> <summary>展开</summary> <p>啦…….</p> <p>永远给我碧浪清波心中的歌</p> <p> 你用你那母亲的脉搏和我诉说</p> <p>我的祖国和我像海和浪花一朵</p> <p>浪是海的赤子海是那浪的依托</p> <p>每当大海在微笑我就是笑的旋涡</p> <p>我分担着海的忧愁分享海的欢乐</p> </details> </div> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
样式图
以上五个是课上学习的练习。
以下五个是自己借鉴一些模板自己改的，我也是刚刚学习，做的不是很好。
第六个网页：个人主页；
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>个人简历</title> <style type="text/css">* { margin: 0; padding: 0}.home { height: 100%; overflow: hidden;}.content { perspective: 340px; width: 100%; position: relative;}h1 { color: white; text-align: center;}span { display: block; text-align: center;}.stars { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; z-index: 999; border-radius: 50%; box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2; animation: fly 15s linear infinite; transform-style: preserve-3d;}.stars:before,.stars:after { content: ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit;}.stars:before { transform: translateZ(-300px); opacity: .6;}.stars:after { transform: translateZ(-600px); opacity: .4;}@keyframes fly { from { transform: translateZ(0px); opacity: .6; } to { transform: translateZ(200px); opacity: .8; }}.title { position: absolute; display: flex; justify-content: center; left: 0; right: 0; top: 300px; margin: auto; bottom: 0; color: #fff; font-size: 24px; font-weight: 500;}.titles { position: absolute; display: flex; justify-content: center; left: 0; right: 0; top: 350px; margin: auto; bottom: 0; color: #fff; font-size: 20px; font-weight: 500;}.icon { width: 15px; height: 15px; padding: 5px; border: 2px solid #fff; border-radius: 100%; position: absolute; left: 49%; bottom: 50px; animation: downs 2s linear infinite;}@keyframes downs { from { transform: translatey(0px); opacity: .6; } to { transform: translatey(30px); opacity: .8; }}.ribbon { display: flex; justify-content: center; position: absolute; right: 300px; top: 50px; margin: auto;}.ribbon:after,.ribbon:before { margin-top: 0.5em; content: ""; display: flex; ; border: 1.5em solid #fff;}.ribbon:after { border-right-color: transparent;}.ribbon:before { border-left-color: transparent;}.ribbon a:link,.ribbon a:visited { color: #000; text-decoration: none; height: 3.5em; overflow: hidden;}.ribbon span { background: #fff; display: inline-block; line-height: 3em; padding: 0 1.5em; margin-top: 0.5em; position: relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s;}.ribbon a:hover span { background: #FFD204; margin-top: 0;}.ribbon span:before { content: ""; position: absolute; top: 3em; left: 0; border-right: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff;}.ribbon span:after { content: ""; position: absolute; top: 3em; right: 0; border-left: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff;}.introduce { display: flex; flex-direction: column;}.introduce_item { display: flex; justify-content: center; margin-top: 60px;}.introduce_item_img { width: 800px; height: 500px;}.introduce_item_title { width: 300px; font-size: 18px; line-height: 36px; align-self: center; padding-left: 100px;}.introduce_item_titles { width: 300px; font-size: 18px; line-height: 36px; align-self: center; padding-right: 100px;}audio { position: fixed; bottom: 50px; right: 0;}.music_img { position: fixed; bottom: 50px; right: 50px; width: 40px; height: 30px; animation: muscis 5s linear infinite;}@keyframes muscis { from { transform: rotate (0deg); opacity: .6; } to { transform: rotate(360deg); opacity: .8; }}.icons { display: flex; justify-content: space-between; padding: 0 400px; box-sizing: border-box; overflow: hidden;}.icons_items { display: flex; flex-direction: column; font-size: 20px; margin-top: 80px; width: 200px;}.icons_items_imgs { width: 200px; margin-bottom: 30px;}</style></head><body> <div class="home"> <div class="content"> <div class="stars"></div> <img class="bgc" src="img/注册背景图1.jpg" width="100%" alt=""> <h3 class="title">欢迎来到我的个人网站</h3> <h3 class="titles">今天也要加油鸭</h3> <img class="icon" src="img/小图.png" alt=""> <div class='ribbon'> <a href='个人主页.html'><span>Home</span></a> <a href='我的.html'><span>About</span></a> <a href='表单.html'><span>Form</span></a> </div> </div> <div class="icons"> <div class="icons_items"> <img class="icons_items_imgs" src="img/教学楼.png" alt=""> <span>教学楼是我们每天必去取经之地</span> </div> <div class="icons_items"> <img class="icons_items_imgs" src="img/餐厅.png" alt=""> <span>每天都要在食堂里面纠结到底吃什么</span> </div> <div class="icons_items"> <img class="icons_items_imgs" src="img/校内风景图2.png" alt=""> <span>午饭过后可以躺着休息晒晒太阳的小山坡</span> </div> <div class="icons_items"> <img class="icons_items_imgs" src="img/宿舍.png" alt=""> <span>忙碌的一天结束啦爬上小床跟世界说晚安</span> </div> </div> <div class="introduce"> <div class="introduce_item"> <img class="introduce_item_img" src="img/第一张图.png" alt=""> <span class="introduce_item_title">天空还是一片浅蓝,转眼间东方出现了一道红霞,红霞慢慢地在扩大，不大一会就染红了小半边天。颜色红得可爱， 又 过了一会儿,在那个地方出现了太阳的小半边脸。</span> </div> <div class="introduce_item"> <span class="introduce_item_titles">当清晨的阳光洒进我们温馨的寝室，忙碌的一天又开始了，闹钟开始响起，每个人睡眼惺忪，从床上爬起，忙忙碌碌的穿梭在食堂与教室之间</span> <img class="introduce_item_img" src="img/第二张图.png" alt=""> </div> <div class="introduce_item"> <img class="introduce_item_img" src="img/第三张图.png" alt=""> <span class="introduce_item_title">温暖的阳光照耀着大地，远处的小山都金灿灿的美轮美奂，它穿梭于微隙的气息。舒倘，漫长。紫檀的香味，弥漫在春日，把天地间一切空虚盈满，阳光下，是一道纤绝的尘陌，呢喃着天真，充盈着那抹曾经深不可测的孤清而飘逸的影。</span> </div> <div class="introduce_item"> <span class="introduce_item_titles">当晚自习结束后，抬头望向天空，几颗大而亮的星星挂在夜空，仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了，裹紧衣裳，在这优美的夜色中慢慢的走回寝室。</span> <img class="introduce_item_img" src="img/第四张图.png" alt=""> </div> </div> <audio autoplay="autoplay" id="audio" loop="loop"> <source src="img/段戈—Geromion.mp3" type="audio/MP3"> </audio> <img class="music_img" src="" alt=""> </div></body><script> let mucics = document.getElementById('audio') document.body.addEventListener('mousemove', function() { setTimeout(() => { mucics.play(); }, 2000); }, false);</script></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
第七个网页：表单；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单</title> <style type="text/css">* { margin: 0; padding: 0}.from { overflow: hidden; position: relative;}.bgc { width: 100%;}.submit { position: absolute; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; margin: auto; margin-top: 150px; width: 500px; height: 500px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; color: #fff; display: flex; flex-direction: column;}.form_title { text-align: center; margin-top: 40px; font-size: 18px;}.form_input { padding: 0 30px; box-sizing: border-box; display: flex; margin-top: 20px;}.inputs { height: 40px; width: 300px; border-radius: 5px; border: none; background-color: #eee; color: #666; padding-left: 20px;}.form_input span { width: 85px; align-self: center;}.btn_submit { align-self: center;}.btn { border: none; width: 80px; height: 40px; color: #fff; border-radius: 5px; background: #999; margin-top: 40px;}.btn:hover { background: #666;}.back { margin-left: 10px;}.home_href { border: none; width: 80px; height: 40px; color: #fff; border-radius: 5px; background: #FFD204;} </style> </head> <body> <div class="from"> <img class="bgc" src="img/表单背景.png" alt=""> <div class="submit"> <span class="form_title">个人信息提交</span> <div class="form_input"> <span>姓名：</span> <input class="inputs" type="text" value="周艺人"> </div> <div class="form_input"> <span>班级:</span> <input class="inputs" type="text" value="软件工程清华二班"> </div> <div class="form_input"> <span>学号：</span> <input class="inputs" type="text" value="1801120072"> </div> <div class="form_input"> <span>系部：</span> <input class="inputs" type="text" value="工学部"> </div> <div class="form_input"> <span>课程名称：</span> <input class="inputs" type="text" value="网页设计与制作"> </div> <div class="btn_submit"> <a href="注册页面.html"> <button class="btn">提交</button></a> <a href="个人主页.html" class="back"><button class="home_href">首页</button></a> </div> </div> </div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
第八个网页：我的；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我的</title> <style type="text/css">* { margin: 0; padding: 0;}.about { width: 100%; height: 100%; overflow: hidden;}.about_bgc { width: 100%}.about_tit { position: absolute; top: 280px; left: 0; right: 0; font-size: 28px; font-weight: 550; bottom: 0; width: 800px; margin: auto; text-align: center;}.ribbon { display: flex; justify-content: center; position: absolute; right: 300px; top: 50px; margin: auto;}.ribbon:after,.ribbon:before { margin-top: 0.5em; content: ""; display: flex; ; border: 1.5em solid #fff;}.ribbon:after { border-right-color: transparent;}.ribbon:before { border-left-color: transparent;}.ribbon a:link,.ribbon a:visited { color: #000; text-decoration: none; height: 3.5em; overflow: hidden;}.ribbon span { background: #fff; display: inline-block; line-height: 3em; padding: 0 1.5em; margin-top: 0.5em; position: relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s;}.ribbon a:hover span { background: #FFD204; margin-top: 0;}.ribbon span:before { content: ""; position: absolute; top: 3em; left: 0; border-right: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff;}.ribbon span:after { content: ""; position: absolute; top: 3em; right: 0; border-left: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff;}.me { display: flex; justify-content: center; margin-top: 60px; overflow: hidden;}.me_tit { width: 600px; line-height: 36px; font-size: 18px; margin-left: 100px; margin-top: 50px;}.me_img { width: 800px; height: 600px;}.animate { padding-left: 20px; width: 500px; font-size: 16px; color: #000; animation: 10s wordsLoop linear infinite normal;}@keyframes wordsLoop { 0% { transform: translateY(100px); -webkit-transform: translateY(100px); } 100% { transform: translateY(-100%); -webkit-transform: translateY(-100%); }}.videos { display: flex; margin-top: 60px; padding-bottom: 80px;}.videos span { width: 400px; margin-right: 100px; margin-left: 300px; color: #FFD204} </style> </head> <body> <div class="about"> <h3 class="about_tit">要不断的努力，才能成为更好的自己</h3> <img class="about_bgc" src="img/我的背景图片2.png" alt=""> <div class='ribbon'> <a href='个人主页.html'><span>Home</span></a> <a href='我的.html'><span>About</span></a> <a href='表单.html'><span>Form</span></a> </div> <div class="me"> <img class="me_img" src="img/我的背景图片.png" alt=""> <span class="me_tit animate ">我是一名大三的学生，平时爱好打游戏，外出游玩可惜没钱，学习一下专业知识， 为以后毕业做些小打算。跟大多数人一样，对未来些许迷茫，当忽然之间脑海里闪现出来一些关于几年前的某个片段时， 会情不自禁的回想那个时候的自己，关于那个曾经的所有点点滴滴也渐渐浮现出一些画面，突然拼命的想要去找一点在那个记忆点里的某些东西， 寻找的过程中脑海里的思绪早已沉溺在回忆里面，忘了的还有那些忘不了的感触在这一刻全都涌了出来，我觉得最后寻找的结果或许已不重要了， 因为这突如其来想要寻找的一些东西的念头，让自己突然变得好安静，莫名的思绪蔓延开来了，它又带我回到了现在已经体会不到的那种怦然心动的时候， 仿佛打开了老旧的抽屉，里面装满了当初的成长，青涩，遗憾与那一种想起来会不禁忽然笑出来的感觉，可能想笑的是那时的自己， 又或许是笑那带有遗憾结尾的时光，怀念真好。 又一年即将过去了，生活一如既往的推着自己往前走，在行人眼里穿梭，而不时会回头看看的，还是那个仿佛不知在追逐着什么的自己， 此刻的空气很好，它不会留下痕迹。（备注：都是假的骗自己开心的，整点悲伤的事，不然就不是文案。） </span> </div> <div class="videos"> <span> 这是我很喜欢的一个动漫电影，玩具总动员里面的第四部，讲述的事胡迪深知自己在这个世界上的使命，就是照顾他的主人， 无论是原来的安迪还是新主人邦妮。当邦妮将不情愿成为玩具的“叉叉”带回家时，胡迪又担起了教导叉叉接受自己新身份的责任。 然而当邦妮将所有玩具带上房车家庭旅行时，胡迪与伙伴们将共同踏上全新的冒险之旅，领略房间外面的世界有多广阔， 甚至偶遇老朋友牧羊女。在多年的独自闯荡中，牧羊女已经变得热爱冒险，不再只是一个精致的洋娃娃。 正当胡迪和牧羊女发现彼此对玩具的使命的意义大相径庭时，他们很快意识到更大的威胁即将到来。 （备注：网上找的，我喜欢打游戏，为啥找这个？因为给上面的文案比较配） </span> <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="img/网页制作视频.mp4"></video> </div> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
第九个网页：注册页面；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url(img/注册背景图1.jpg) no-repeat center; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; margin-top: 15px; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color: #FFD026; font-size: 25px; } .rg_left > p:last-child{ color: #A6A6A6; font-size: 25px; } .rg_center{ /*border: 1px solid red;*/ float: left; width: 450px; } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a{ color: pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username,#birthday,#checkcode,#email,#name,#password,#tel{ width: 251px; height: 23px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px ; padding-right: 10px; } #img_check{ height: 32px; vertical-align: middle; } #checkcode{ width: 110px; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"/></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"/></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="emsil" id="email" placeholder="请输入邮箱"/></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"/></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="password" name="tel" id="tel" placeholder="请输入手机号码"/></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"><input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"/></td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/> <img id="img_check" src="img/验证码.jpg" width="40" height="25"/> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"/></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="个人主页.html">立即登陆</a></p> </div> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
样式图
第十个网页：花；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url(img/注册背景图1.jpg) no-repeat center; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; margin-top: 15px; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color: #FFD026; font-size: 25px; } .rg_left > p:last-child{ color: #A6A6A6; font-size: 25px; } .rg_center{ /*border: 1px solid red;*/ float: left; width: 450px; } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a{ color: pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username,#birthday,#checkcode,#email,#name,#password,#tel{ width: 251px; height: 23px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px ; padding-right: 10px; } #img_check{ height: 32px; vertical-align: middle; } #checkcode{ width: 110px; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"/></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"/></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="emsil" id="email" placeholder="请输入邮箱"/></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"/></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="password" name="tel" id="tel" placeholder="请输入手机号码"/></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"><input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"/></td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/> <img id="img_check" src="img/验证码.jpg" width="40" height="25"/> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"/></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="个人主页.html">立即登陆</a></p> </div> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
样式图
好多都是从网上找的资料有任何的违规侵权请联系我删除；
QQ：1364190767
链接：https://pan.baidu.com/s/1eF4SnQjJ3Ht4u7Yh2Kix4w
提取码：3ylo
复制这段内容后打开百度网盘手机App，操作更方便哦
这是完整的网页作业，包含代码，样式，图片音乐，字体。大家自取。
第一次写这个东西，大家多多关照。
完全免费；完全免费；完全免费；重要的事情说三遍！哈哈哈！！！