热门标签
热门文章
- 1刷一道leetcode花了一天，这正常吗？_力扣写一道题花一天时间
- 213（PHP连接Mysql）_php连接mysql数据库代码
- 3定时从linux获取文件,CentOS 6.4下定时通过ftp获取数据库服务器上的文件
- 4Docker 的安装使用_docker apt-get
- 5Flask Web开发：使用render_template渲染动态HTML模板
- 6c# 实习面试题_c#实习面试
- 7AI绘画：实例-利用Stable Diffusion ComfyUI实现多图连接：区域化提示词与条件设置_comfyui区域条件
- 8Python: 如何绘制核密度散点图和箱线图？_python 箱线图
- 9GitHub主页设计_给github主页装修
- 10GPU快速排序笔记_gpu quick sort
当前位置: article > 正文
淘宝网首页仿写(html+css+js）_淘宝页面源代码
作者：Cpp五条 | 2024-05-23 09:08:19
赞
踩
淘宝页面源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<title>淘宝网首页</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入样式文件 -->
<link href='css/style.css' type="text/css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/js.js"></script>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="bg">
<!-- 顶栏菜单栏 -->
<div class="top">
<div class="top-l">
<a href="#" style="color:red;">亲,请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="top-r">
<ul>
<li><a href="#" style="color:red;">淘宝网首页</a></li>
<li><a href="#">我的淘宝</a></li>
<li><a href="#"><span></span>购物车</a></li>
<li><a href="#"><span></span>收藏夹</a></li>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#"><span></span>网站导航</a></li>
</ul>
</div>
</div>
<div class="top-x">
<img src='img/tianmao2.png'>
</div>
<!-- 搜索栏 -->
<div class="sousuo">
<img src='img/logo.jpg'>
<input type="text" value=" 春节年货档" maxlength="30">
<ul>
<li><a href="#" style="color:red;">一淘限时抢</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>
<button class="btnFind">搜索</button>
<!-- 超市平台 -->
<div class="daily">
<ul>
<li><a href="#">每日爆品 1元起</a></li>
<li><a href="#">聚划算</a></li>
<li><a href="#">淘抢购</a></li>
<li><a href="#">天猫超市</a></li>
<li><a href="#">天猫国际官方直营</a></li>
</ul>
</div>
<!-- 商品类别区 -->
<div class="xia-l">
<img src="upload/鞋_箱包.png" alt="">
<table>
<tr>
<td>双肩背包</td>
<td>托特包</td>
<td> zara</td>
<td>背包</td>
</tr>
<tr>
<td class="color">行李箱</td>
<td>腰包</td>
<td>斜挎男包</td>
<td>挎包</a></td>
</tr>
</table>
<table>
<img src="upload/数码.png" alt="">
<tr>
<td>空调</td>
<td>冰箱</td>
<td> 耳机</td>
<td class="color">格力空调</td>
</tr>
<tr>
<td>投影仪</td>
<td>键盘</td>
<td>小冰箱</td>
<td>饮水机</td>
</tr>
</table>
<table>
<img src="upload/女装.png" alt="">
<tr>
<td>凉鞋</td>
<td>半身裙</td>
<td>上衣夏</td>
<td>套装夏</td>
</tr>
<tr>
<td>鞋子</td>
<td>高跟鞋</td>
<td>半身裙夏</td>
<td class="color">旗袍</td>
</tr>
</table>
<table>
<img src="upload/服饰-男装-线性.png" alt="">
<tr>
<td>短裤</td>
<td>电动车</td>
<td>帆布鞋</td>
<td>打火机</td>
</tr>
<tr>
<td>眼镜</td>
<td class="color"> 头盔</td>
<td>男士衬衫</td>
<td>男裤</td>
</tr>
</table>
<table>
<img src="upload/母婴.png" alt="">
<tr>
<td>饼干</td>
<td>文具盒</td>
<td>婴儿床</td>
<td class="color">护膝</a></td>
</tr>
<tr>
<td>奶粉</td>
<td>妈咪包</td>
<td>月子服</td>
<td>铅笔盒</td>
</tr>
</table>
<table>
<img src="upload/家居家纺.png" alt="">
<tr>
<td>床垫子</td>
<td>拖鞋女</td>
<td> 枕头</td>
<td class="color">四件套</td>
</tr>
<tr>
<td>衣架</td>
<td>毛巾</td>
<td>洗脸巾</td>
<td>夏凉被</td>
</tr>
</table>
<table>
<img src="upload/美食.png" alt="">
<tr>
<td>咖啡</td>
<td>饼干</td>
<td>茶叶</td>
<td>零食礼包</td>
</tr>
<tr>
<td class="color">巧克力</td>
<td>牛肉干</a></td>
<td>白酒</a></td>
<td> 矿泉水</td>
</tr>
</table>
<table style="border-bottom:0;">
<img src="upload/美妆类目.png" alt="">
<tr>
<td>沐浴乳</td>
<td class="color">防晒霜</td>
<td> 香水</td>
<td>口红</td>
</tr>
<tr>
<td>防晒喷雾</td>
<td>眼影盘</td>
<td>眼影盒</td>
<td>美甲</td>
</tr>
</table>
</div>
<div class="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="product"></div>
<!-- 我的淘宝 -->
<div class="my">
<table>
<tr>
<td colspan="2" style="border-top-style:none;">
<img src="img/五角星.jpg" class="star">
<a href="#" class="star">
<span>我的淘宝</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="img/天猫logo.jpg"></a>
</td>
<td>
<a href="#"><img src='img/淘宝网logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/聚划算logo.jpg'></a>
</td>
<td>
<a href="#"><img src='img/天猫国际logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/9.9logo.jpg'></a>
</td>
<td>
<a href="#"><img src='img/淘抢购logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/天猫超市logo.jpg'></a>
</td>
<td>
<a href="#"><img src='./img/大药房logo.jpg'></a>
</td>
</tr>
</table>
</div>
<!-- 超值专区 -->
<div class="chaozhi">
<p>超值活动专区</p>
<em>每天10点更新</em>
</div>
<div class="fashion">
<img src='img/时尚.jpg'>
<img src='img/女装特惠.jpg' style="padding-left:5px;">
</div>
<div class="station">
<img src='img/一站式.jpg'>
</div>
<!-- 一站式购物 -->
<div class="yizhanshi">
<a href="#">
<p>
<img src='img/男装.jpg'>
<em>酱心十足 下饭开胃</em>
</p>
</a>
<a href="#">
<p>
<img src='img/家居1.jpg'>
<em>海尔净水品牌团</em>
</p>
</a>
<a href="#">
<p>
<img src='img/聚划算.jpg'>
<em>聚划算天天折上折</em>
</p>
</a>
<a href="#">
<p>
<img src='img/活动.jpg'>
<em>海尔净水品牌团</em>
</p>
</a>
</div>
<!-- 商品展区 -->
<div class="like">
<h3>猜你喜欢</h3>
<div class="tuijian1">
<a href="#">
<img src='img/1.jpg'>
<p style="margin:-15px 0px 0px 164px;">月销3</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/2.jpg'>
<p style="margin:-15px 0px 0px 145px;">月销2981</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/3.jpg'>
<p style="margin:-15px 0px 0px 132px;">月销5.13万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/4.jpg'>
<p style="margin:-15px 0px 0px 133px;">月销5.28万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/5.jpg'>
<p style="margin:-15px 0px 0px 152px;">月销143</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/6.jpg'>
<p style="margin:-15px 0px 0px 133px;">月销2.08万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/7.jpg'>
<p style="margin:-15px 0px 0px 150px;">月销327</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/8.jpg'>
<p style="margin:-15px 0px 0px 145px;">月销5106</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/9.jpg'>
<p style="margin:-15px 0px 0px 150px;">月销384</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/10.jpg'>
<p style="margin:-15px 0px 0px 132px;">月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/11.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/15.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/12.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/13.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/14.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/16.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/17.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/18.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/19.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/20.jpg'>
<p>月销3.22万</p>
</a>
</div>
</div>
</div>
<div class="number">
<a href="#" class="main">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<div class="menu">
<img src="img/新年-龙头.png" class='newYear'>
<span class="gotop"">年货节</span>
<span>促销</span>
<span>热卖</span>
<span>反馈</span>
<span class=" goback"></span>
</div>
<!-- 底栏 -->
<div class="footer">
<a href="#">
<p>联系客服</p>
</a>
<a href="#">
<p>开放平台</p>
</a>
<a href="#">
<p>法律声明</p>
</a>
<p>Taobao.com版权所有2003-现在</p>
<a href="#">
<p>增值电信业务经营许可证</p>
</a>
<img src='img/公安.jpg' style="float:left;height:20px;margin:0 -12px 0 10px;">
<p>浙公网安备 33010002******号</p>
<a href="#">
<p>阿里云计算</p>
</a>
<a href="#">
<p>AliOS</p>
</a>
<a href="#">
<p>阿里通信</p>
</a>
<a href="#">
<p>高德</p>
</a>
<a href="#">
<p>阿里巴巴集团</p>
</a>
<a href="#">
<p>淘宝网</p>
</a>
<a href="#">
<p>天猫</p>
</a>
<a href="#">
<p>聚划算</p>
</a>
<a href="#">
<p>全球速卖通</p>
</a>
<a href="#">
<p>阿里巴巴国际交易市场</p>
</a>
<a href="#">
<p>1688</p>
</a>
<a href="#">
<p>阿里妈妈</p>
</a>
<a href="#">
<p>飞猪</p>
</a>
<a href="#">
<p>UC</p>
</a>
<a href="#">
<p>友盟</p>
</a>
<a href="#">
<p>虾米</p>
</a>
<a href="#">
<p>阿里星球</p>
</a>
<a href="#">
<p>钉钉</p>
</a>
<a href="#">
<p>支付宝</p>
</a>
<a href="#">
<p>达摩院</p>
</a>
<div class="symbol">
<img src='img/police.jpg'>
<img src='img/徽.jpg'>
<img src='img/police1.jpg'>
</div>
</div>
</div>
<script src="js/js.js"></script>
</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
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 黑体;
}
/* 字体图标引用 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?a5ern');
src: url('fonts/icomoon.eot?a5ern#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?a5ern') format('truetype'),
url('fonts/icomoon.woff?a5ern') format('woff'),
url('fonts/icomoon.svg?a5ern#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body {
overflow-x: hidden;
}
/* 背景设置 */
.bg {
position: relative;
width: 1520px;
height: 2270px;
/* background-color: #F2F5F1; */
}
/* 顶部栏设置 */
.top {
height: 33px;
font-size: 11px;
padding-left: 290px;
line-height: 33px;
background-color: #F5F5F5;
overflow: hidden;
}
.top-l {
float: left;
margin-left: 20px;
}
.top-r ul {
float: right;
margin-right: 300px;
}
.top-r ul li {
float: left;
margin-right: 15px;
}
.top-r span {
font-family: 'icomoon';
font-size: 10px;
color: #808080;
}
.top-r span:hover {
color: #F03726;
}
.top a {
color: gray;
}
.top a:hover {
color: #FF0000;
}
/* 天猫超市一站式购齐 */
.top-x {
position: relative;
/* width: 1500px; */
height: 80px;
/* background-color: #4ad2aa; */
background-color: #f4430d;
}
.top-x img {
display: block;
width: 1070px;
height: 80px;
margin: 0 auto;
}
/* 搜索栏 */
.sousuo input {
float: left;
width: 530px;
height: 35px;
margin-left: 30px;
margin-top: 2px;
color: #999;
border: 2.5px solid #FF0000;
border-right: none;
outline: none;
}
.btnFind {
position: absolute;
top: 135px;
right: 33%;
width: 70px;
height: 35px;
font-size: 14px;
border: 0;
background: #ec4c3e;
color: #fff;
}
.sousuo {
float: left;
width: 1020px;
height: 75px;
margin: 20px 0px 0px 230px;
}
.sousuo img {
float: left;
width: 170px;
height: 75px;
}
.sousuo ul {
float: left;
margin: 5px 0px 0px 30px;
}
.sousuo ul li {
float: left;
padding-right: 12px;
font-size: 14px;
}
.sousuo a {
color: #808080;
}
.sousuo a:hover {
text-decoration: underline;
color: #f03726;
}
.sousuo a:active {
border: 1px dashed #F03726;
}
/* 每日爆品 */
.daily {
width: 1520px;
height: 30px;
margin-top: 120px;
background-color: #f03726;
}
.daily a {
color: #FFFFFF;
}
.daily ul {
margin-left: 225px;
}
.daily ul li {
float: left;
padding-right: 50px;
font-size: 14px;
line-height: 30px;
}
/* 商品种类 */
.xia-l {
width: 235px;
height: 480px;
font-size: 22px;
margin-left: 225px;
border-color: #F03726;
border-style: solid;
border-width: 0 1px 1px;
background-color: white;
overflow: hidden;
}
.xia-l img {
position: absolute;
width: 28px;
margin: 18px 0 3px 10px;
color: #F03726;
z-index: 9999;
}
.xia-l table {
position: relative;
width: 235px;
height: 15px;
/* margin-bottom: 8px; */
margin-top: 8px;
border-bottom: 1px solid #F5F5F5;
}
.xia-l table tr {
display: block;
margin-left: 40px;
line-height: 25.3px;
}
.xia-l td:hover {
text-decoration: underline;
}
.xia-l table td {
padding-left: 10px;
font-size: 12px;
}
.xia-l .color {
color: #F03726;
}
.banner {
float: left;
width: 465px;
height: 240px;
margin: -481px 0px 0px 470px;
}
.carousel,
.carousel img {
width: 100%;
height: 240px !important;
}
.product {
position: absolute;
top: 11.6%;
right: 29%;
width: 130px;
height: 240px;
background-color: pink;
background: url("../img/产品.jpg") no-repeat;
}
/* 我的淘宝 */
.my {
float: right;
width: 208px;
height: 238px;
margin: -480px 224px 0px 0px;
border: 1px solid #F5F5F5;
text-align: center;
}
.my table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
.my span {
font-size: 14px;
color: #F03726;
}
.my .star {
width: 21px;
vertical-align: bottom;
}
.my img {
width: 70px;
}
/* 超值活动专区 */
.chaozhi {
float: left;
width: 465px;
height: 26px;
margin: -230px 0px 0px 470px;
color: #F03726;
font-size: 13px;
border-bottom: 2px solid #F03726;
}
.chaozhi p {
float: left;
margin-top: 5px;
color: #A9A9A9;
}
.chaozhi em {
float: right;
margin-top: 5px;
font-style: normal;
}
.fashion {
float: left;
width: 465px;
height: 190px;
margin: -190px 0px 0px 470px;
}
.fashion img {
float: left;
width: 230px;
height: 190px;
}
.station {
position: absolute;
top: 524px;
right: 440px;
width: 130px;
}
.station img {
width: 130px;
height: 221px;
}
.yizhanshi {
position: relative;
float: right;
width: 208px;
height: 221px;
margin: -220px 224px 0px 0px;
border: 1px solid #F5F5F5;
}
.yizhanshi img {
float: left;
height: 15px;
margin: -1px 5px 10px 7px;
}
.yizhanshi p {
float: left;
margin-top: 5px;
font-size: 10px;
}
.yizhanshi em {
font-style: normal;
}
.yizhanshi a {
color: #808080;
}
.yizhanshi a:hover {
color: #F03726;
}
/* 商品展示区 */
.like {
width: 1072px;
margin: 25px auto;
}
.like h3 {
margin-bottom: 5px;
font-family: 幼圆;
font-size: 15px;
color: #F03726;
}
.tuijian1,
.tuijian2 {
position: relative;
float: right;
width: 212px;
height: 330px;
margin-left: -1px;
border: 1px solid #F5F5F5;
}
.tuijian1:hover,
.tuijian2:hover {
z-index: 1;
border-color: #F03726;
}
.tuijian1 img,
.tuijian2 img {
width: 180px;
height: 285px;
margin: 17px;
border-bottom: 1px solid #f5f5f5;
}
.tuijian1 img:hover,
.tuijian2 img:hover {
transform: scale(1.01);
}
.tuijian1 p {
font-size: 13px;
color: #A9A9A9;
}
/* .tuijian2 img {
width: 175px;
height: 285px;
margin: 19px;
} */
.tuijian2 p {
margin: -18px 0px 0px 127px;
font-size: 13px;
color: #A9A9A9;
}
.number {
position: relative;
top: -100px;
text-align: center;
}
.number a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: #F03726;
text-align: center;
text-decoration: none;
border: 1px solid #F03726;
}
.number .main {
border: 1px solid #F03726;
background-color: #fff;
color: #000;
}
/* 侧边栏 */
.menu {
position: absolute;
top: 80%;
right: 100px;
width: 65px;
height: 250px;
background-color: #fffefc;
border-radius: 10px;
border: 1px solid #f03726;
}
.menu span {
display: block;
width: 65px;
height: 50px;
color: #f03726;
font-family: Mircosoft Yahei;
font-size: 14px;
text-align: center;
line-height: 50px;
border-bottom: 1px solid #f03726;
}
.menu .gotop {
color: #f03726;
font-weight: 700;
user-select: none;
}
.menu .goback {
border-bottom: 0;
}
.common {
background-color: #FF6905;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
.square {
background-color: #FF6905;
color: #fff;
cursor: pointer;
}
.newYear {
position: absolute;
top: -30px;
width: 60px;
/* z-index:9999; */
}
/* 底栏 */
.footer {
position: relative;
width: 1072px;
height: 180px;
margin: 0 auto;
font-size: 12px;
}
.footer p {
float: left;
margin-left: 15px;
line-height: 20px;
}
.footer p,
a {
color: #808080;
}
.symbol {
position: absolute;
top: 60px;
left: 10px;
width: 150px;
}
.symbol img {
width: 30px;
}
- 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
var top_x = document.querySelector('.top-x');
var input = document.querySelector('.sousuo').querySelector('input');
var btnFind = document.querySelector('.btnFind');
input.onfocus = function () {
if (this.value === " 春节年货档") {
this.value = '';
}
this.style.color = '#333';
}
input.onblur = function () {
if (this.value === "") {
this.value = " 春节年货档";
}
this.style.color = '#999';
}
var menu = document.querySelector('.menu');
var banner = document.querySelector('.banner');
var main = document.querySelector('.like');
var goback = document.querySelector('.goback');
var bannerTop = banner.offsetTop;
var menuTop = menu.offsetTop - bannerTop;
var mainTop = main.offsetTop;
document.addEventListener('scroll', function () {
// window.pageYOffset 和 window.pageXOffset IE9开始支持
if (window.pageYOffset >= bannerTop) { // 如果距页面上方的偏移量大于等于banner距父元素的偏移，
menu.style.position = "fixed"; // 则变为固定定位，
menu.style.top = menuTop + 'px'; // 并且给top赋menu距离banner顶部的距离，也就是固定到原始位置
} else {
menu.style.position = "absolute"; // 否则，变为绝对定位
menu.style.top = '60%'; // 并且让top变为原始的top值
}
if (window.pageYOffset >= mainTop) {
goback.style.display = 'block';
goback.innerText = '↑顶部'
} else {
goback.innerText = '﹀';
}
})
goback.addEventListener('click', function () {
// window.scroll(0, 0);
if (goback.innerText == "↑顶部") {
animate(window, 0);
}
});
// 简单动画函数封装 obj目标对象 target目标位置
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器里且步长值的计算不能出现小数
// 如果多个元素都是用这个动画特效，每次都要var声明定时器，比较浪费内存资源并且每次声明名字都一样会引起歧义
// 此时需要给不同元素记录不同定时器，可以用obj.timer来代替var timer
// var step= Math.ceil((target - obj.offsetLeft) / 15); // Math.ceil向上取整
var step = (target - window.pageYOffset) / 2;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //实现盒子前进后退的功能
//缓动动画公式：（ 目标值 - 现在的位置 ) / 10 10是步长，可以改变
//匀速动画公式：盒子当前位置 + 固定的值（比如10）
if (window.pageYOffset == target) {
clearInterval(obj.timer);
// if (callback) {
// callback();
// }
callback && callback();
} else {
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step)
}
}, 100)
}
var spans = menu.querySelectorAll('span');
var gotop = document.querySelector('.gotop');
for (var i = 1; i < spans.length - 1; i++) {
spans[i].addEventListener('mouseover', function () {
this.className = 'square';
this.style.color = '#fff';
});
spans[i].addEventListener('mouseleave', function () {
this.className = 'none';
this.style.color = '#f03726';
})
}
goback.addEventListener('mouseover', function () {
this.className = 'common';
this.style.color = '#fff';
this.style.borderRadius = "0 0 10px 10px";
})
goback.addEventListener('mouseout', function () {
this.className = 'none';
this.style.color = '#f03726';
this.style.border = "0";
})
var xia_l = document.querySelector('.xia-l');
var tables = xia_l.querySelectorAll('table');
var imgs = xia_l.querySelectorAll('.imgs');
var colors = xia_l.querySelectorAll('.color');
var index=0;
for (var i = 0; i < tables.length; i++) {
tables[i].addEventListener('mouseenter', function () {
this.style.backgroundColor = '#ff694f';
this.style.color = '#fff';
this.style.cursor = 'pointer';
index=i;
});
tables[i].addEventListener('mouseleave', function () {
this.style.backgroundColor = '#fff';
this.style.color = '#000';
});
//banner滚动延时
$('.carousel').carousel({
interval: 2000
})
- 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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/612235
推荐阅读
相关标签
