热门标签
热门文章
- 1 Git关联远程仓库
- 2SQL:DATE_FORMAT()函数_dateformat sql函数
- 3Python实战：wxauto与百度千帆大模型结合快速实现微信智能回复机器人_千帆大模型接入微信
- 4Hive和hdfs的关系与区别_hive hdfs
- 5Vue 2.0中封装Axios请求方法_vue2.0axios的写法
- 62024年Go最新怎么成为稚晖君？_稚辉君(2)，2024年最新2024Golang面试总结_宇树科技面经
- 7ZYNQ7000学习——OSERDESE2原语学习_oserdese2原语的使用
- 8NTFS读写软件——Paragon NTFS For Mac_安装好paragon ntfs for mac15如何读写ntfs
- 9fiddler抓取微信小程序包_fiddler抓包小程序
- 10Android app 录音回音消除两种方法_安卓回声消除
当前位置: article > 正文
淘宝主页+女装会场+详情页（html+css+js）_淘宝网页代码html
作者：秋刀鱼在做梦 | 2024-08-18 08:07:12
赞
踩
淘宝网页代码html
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
先看图吧，是个（html+css+js）阶段性作业
1.index.html
2.goods.html
3.goodsDetails.html
部分详细代码
<!DOCTYPE html>
<html>
<head>
<title>淘宝网-淘！我喜欢</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="myfont/myfont.css" />
<link rel="stylesheet" href="css/change_font.css" />
</head>
<body>
<!--隐藏的导航栏nav-->
<div id="nav">
<div id="navcont">
<div id="tbwang">
<h1>
<a href="https://www.taobao.com/" title="淘宝网">淘宝网</a>
</h1>
</div>
<div id="serchnav">
<div id="left_bb">
<div id="lbb">
</div>
<div id="rbb">
</div>
<!-- ul -->
<ul id="serchnav_ul">
<li>宝贝</li>
<li>天猫 <span id="redline"></span></li>
<li>店铺</li>
</ul>
</div>
<div id="ser_ab">
<input type="text" autofocus="autofocus" />
<div class="gap">
</div>
</div>
<button>搜索</button>
<!-- 绝对定位的内容 -->
<!-- 向下图标 -->
<div id="down">
<span id="down1" class="iconfont icon-xia"></span>
</div>
<!-- 搜索font -->
<i class="iconfont icon-sousuo"></i>
<!-- 相机font -->
<a href="script:;">
<em class="iconfont icon-zhaoxiangji"></em>
</a>
</div>
</div>
</div>
<!--头部：中国大陆版块-->
<div id="chdalu">
<div id="head_wrap1">
<!--左边模块-->
<div id="left_chdalu">
<ul>
<li id="cdl_li01">
<a href=""><span id="area_change">中国大陆</span><span class="iconfont icon-xia change"></span>
</a>
<!--地区列表-->
<div id="areasBox">
<ul id="areas">
<li>全球</li>
<li>中国大陆</li>
<li>中国香港</li>
<li>中国澳门</li>
<li>中国台湾</li>
<li>韩国</li>
<li>马来西亚</li>
<li>澳大利亚</li>
<li>新加坡</li>
<li>新西兰</li>
<li>加拿大</li>
<li>美国</li>
<li>日本</li>
<li>法国</li>
<li>德国</li>
<li>瑞士</li>
</ul>
</div>
</li>
<li><a href="">亲，请登录</a></li>
<li><a href="">免费注册</a></li>
<li><a href="">手机逛淘宝</a></li>
</ul>
</div>
<!--右边模块-->
<div id="rig_chdalu">
<li id="rig_chdalu_li01"><a href=""><span id="mytb">我的淘宝</span> <span class="iconfont icon-xia change1"></span></a>
<div id="mytbBox">
<ul id="mytbbox_ul01">
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
</li>
<li><a href=""><span class="iconfont icon-gouwuche1 change2"></span>购物车</a></li>
<li>
<a href="">
<span class="iconfont icon-start change4"></span>收藏夹
<span class="iconfont icon-xia change3"></span>
</a>
</li>
<li><a href="">商品分类</a></li>
<li id="shuxian">|</li>
<li><a href="">千牛卖家中心</a></li>
<li><a href="">联系客服</a></li>
<li><a href=""><span class="iconfont icon-daohang change8"></span> 网站导航</a></li>
</div>
</div>
</div>
<!--淘小铺版块-->
<div id="xiaopu">
<a href=""><img src="upload/taoxiaopu.png" width="1190px" alt="淘小铺" /></a>
</div>
<!--淘宝搜索栏版块-->
<div id="tbcom">
<div id="tbcom_wrap">
<!--淘宝logo-->
<div id="tblogo">
<h1>
<a href="https://www.taobao.com/?spm=a21bo.2017.201857.1.5af911d9SiQ4jf"></a>
</h1>
</div>
<!--宝贝 天猫 店铺 搜索栏-->
<div id="search_box">
<div id="words">
<ul id="words_ul01">
<li id="words_bb">宝贝</li>
<li id="words_tm">天猫</li>
<li id="words_dp">店铺</li>
</ul>
</div>
<!--左边的搜索栏 右边的按钮-->
<div id="searchbar">
<div id="left_searchbar">
<input id="inp" type="text" placeholder="p40手机壳" autofocus="autofocus" />
<i class="iconfont icon-sousuo change6"></i>
<div id="rleft_searchbar">
<a class="a1" href="">
<span class="iconfont icon-zhaoxiangji change5"></span>
</a>
</div>
</div>
<button>搜索</button>
</div>
<!--新款连衣裙...沙发-->
<div id="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>
<a href="">沙发</a>
</div>
</div>
<!--手机淘宝-->
<div id="phonetb">
<a href="">
<span>手机淘宝</span>
<img src="upload/phonetb.png" alt="手机淘宝下载" />
</a>
<!--小×号-->
<div id="x">×
</div>
</div>
</div>
</div>
<!--引入版心版块-->
<div class="typearea">
<!--主题市场版块-->
<div id="mkt">
<!--市场模块的左边版块 商品列表-->
<div id="left_mkt">
<!--左边版块的上部-->
<div id="top_left_mkt">主题市场</div>
<!--左边版块的下部-->
<div id="btm_left_mkt">
<ul>
<li><a href="./goods.html">女装</a>/<a href="">男装</a>/<a href="">内衣</a><span>></span></li>
<li><a href="">鞋靴</a>/<a href="">箱包</a>/<a href="">配件</a><span>></span></li>
<li><a href="">童装玩具</a>/<a href="">孕产</a>/<a href="">用品</a><span>></span></li>
<li><a href="">家电</a>/<a href="">数码</a>/<a href="">手机</a><span>></span></li>
<li><a href="">美妆</a>/<a href="">洗护</a>/<a href="">保健品</a><span>></span></li>
</ul>
</div>
</div>
<!--主题市场 右边模块-->
<div id="rig_mkt">
<!--右边模块的头部长条-->
<div id="head_rig_mkt">
<ul id ="left_head_rig_mkt">
<li><a href="">天猫</a></li>
<li><a href="">聚划算</a></li>
<li><a href="">天猫超市</a></li>
</ul>
<ul id ="rig_head_rig_mkt">
<li><span>|</span></li>
<li><a href="">淘抢购</a></li>
<li><a href="">电器城</a></li>
<li><a href="">司法拍卖</a></li>
<li><a href="">兴农脱贫</a></li>
<li><span>|</span></li>
<li><a href="">飞猪旅行</a></li>
<li><a href="">智能生活</a></li>
<li><a href="">苏宁易购</a></li>
</ul>
</div>
<!--右边模块的body-->
<div id="body_rig_mkt">
<!--两个焦点图 focus -->
<div id="focus_brm">
<!--焦点图1 focus1 -->
<div id="focus1_brm">
<ul id="ul01">
<li>
<a href="">
<img src="upload/focus1_01.jpg" width="520px" />
</a>
</li>
</ul>
<div id="leftbtn">
</div>
<div id="rigbtn">
</div>
<div id="cir_dot">
<ul id="ul02">
</ul>
</div>
</div>
<!--焦点图2 focus2-->
<div id="focus2_brm">
<div id="up_focus2_brm"><span>理想生活上天猫</span><i>1/6</i>
</div>
<div id="btm_focus2_brm">
<a href=""><img src="upload/focus2_0101.jpg" /></a>
<a href=""><img src="upload/focus2_0102.jpg" /></a>
</div>
</div>
</div>
<!--卖 mai-->
<div id="mai_brm">
<!--特卖 temai-->
<div id="temai_brm">
<a href=""><img src="upload/temai.webp.jpg" width="160px" alt="特卖" /></a>
</div>
<div class="daymai">今日热卖</div>
<!--热卖 remai-->
<div id="remai_brm">
<a href=""><img src="upload/remai.jpg" height="202px" alt="热卖" /></a>
</div>
</div>
<!--右边body rig_brm-->
<div id="rig_brm">
<div id="rig_brm1">
<div id="toux_rig_brm1">
<div id="yuan_toux_rig_brm1">
<a href=""><img src="upload/toux.jpg" /></a>
</div>
</div>
<div id="nihao_rig_brm1">Hi! 你好
</div>
<div id="club_rig_brm1">
<a href="">领淘金币抵钱</a>
<a href="">会员俱乐部</a>
</div>
<div id="denglu_rig_brm1">
<button>登录</button>
<button>注册</button>
<button>开店</button>
</div>
</div>
<a href id="rig_brm2">
<span>网上有害信息举报专区</span>
<div></div>
</a>
<div id="rig_brm3">
<!--头部head 公告 规则 论坛 ...-->
<div id="rig_brm3_head">
<ul id="rig_brm3_head_ul01">
<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>
<div id="rig_brm3_body">
<ul id="rbb3_ul01">
<li>
<a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a>
</li>
<li>
<a href="">淘宝造物节之城市秘密</a>
</li>
<li>
<a href="">聚划算88红包省钱卡</a>
</li>
</ul>
</div>
</div>
<!--充话费 旅行 车险 游戏...彩票 理财-->
<div id="rig_brm4">
<ul id="rig_brm4_ul">
<li>
<a href="">
<span class="iconfont icon-chonghuafei"><span>
<p>充话费</p>
</a>
<div id="rig_brm4_box1">
<div id="rig_brm4_box1cont">
<div id="rb4b1c_01">
<a href="script:;">充话费</a>
<a href="script:;">充流量</a>
<a href="script:;">充固话</a>
<a href="script:;">充宽带</a>
</div>
<div id="scrollBox11">
<div id="rb4b1c_02">
<input type="text" name="pnhonenum" placeholder="请输入手机号" autocomplete="on" />
<div id="autoc">
</div>
<span class="iconfont icon-chonghuafei"><span>
</div>
<div id="rb4b1c_03">
<input type="text" name="tablelist" value="50元" title="50元" readonly="readonly" />
<!--readonly表示这个输入框是只读属性 即用户不能选中 不能更改value内容 不能输入-->
<span class="iconfont icon-xia"></span>
</div>
<div id="rb4b1c_04">
<i>售价</i>
<i>¥</i>
<i>49-49.8</i>
</div>
<button id="rb4b1c_btn">立即充值</button>
</div>
</div>
<em id="x2">×</em>
</div>
</li>
<li>
<a href="">
<span class="iconfont icon-feizhu"><span>
<p>旅行</p>
</a>
<div id="rig_brm4_box2">
<div id="rig_brm4_box1cont">
<div id="rb4b1c_02">
<a href="script:;">国内机票</a>
<a href="script:;">国际机票</a>
<a href="script:;">酒店客栈</a>
<a href="script:;">度假门票</a>
<a href="script:;">火车票</a>
</div>
<div id="scrollBox21">
<form id="form1">
<input type="radio" name="travel" checked="checked" id="单" />
<label for="单">单程</label>
<input type="radio" name="travel" id="双" />
<label for="双">往返</label>
<span>中国港澳台请选择国际机票</span>
</form>
<div id="fromTo1">
<div id="left_fromTo1">
<div id="left2_fromTo1" class="disp">
<div id="left11_fromTo1">
<label for="go2">返程</label>
</div>
<input type="text" placeholder="日期" id="go2" name="f_city" />
<span class="iconfont icon-rili-y" id="location"></span>
</div>
</div>
</div>
<button id="chazhao_btn">查找</button>
</div>
</div>
<em id="x2">×</em>
</div>
</li>
<li>
<a href="">
<span class="iconfont icon--"><span>
<p>车险</p>
</a>
</li>
<li>
<a href="">
<span class="iconfont icon-youxi"><span>
<p>游戏</p>
</a>
</li>
<li>
<a href="">
<span class="iconfont icon-caipiao"><span>
<p>彩票</p>
</a>
</li>
</ul>
</div>
<!--阿里app 淘宝 天猫 支付宝 钉钉 淘小铺-->
<div id="rig_brm5">
<div id="rig_brm51">
<span>阿里APP</span>
<a href="">
<span>更多</span>
<span class="iconfont icon-dayu"></span>
</a>
</div>
<div id="rig_brm52">
<ul>
<a href="">
<img src="upload/app05.webp" />
</a>
<div id="saotb">
<img src="upload/saotb.jpg" />
<p>扫一扫淘小铺</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--底部结尾 footer-->
<div id="footer">
<img src="upload/footer.png" />
</div>
</div>
<!-- 侧边固定栏 -->
<div id="sidebar">
<span id="sb_font1" class="iconfont icon-taobao"></span>
<ul id="sb_ul">
<li>
<a href="" class="sb_ula1">
爱逛好货
</a>
<i></i>
</li>
</ul>
</div>
<script src="js/taobao.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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/996708
