热门标签
热门文章
- 1以太网、局域网、广域网、因特网、互联网与万维网_因特网和以太网
- 2Stable Diffusion 3 文本生成图像 在线体验 原理分析_stablediffusion在线生成
- 3Zotero 6 文献管理 + 内置PDF阅读器 + 选中翻译_pdf-translate github
- 4Rabbitmq消息队列_rabbitmq 队列
- 5OpenCompass 大模型评测_基于opencompass下测试ds1000数据集总是卡顿是为什么
- 605-Python—列表、元祖、字典、集合操作大全:建议收藏_分别定义一个列表元组字典和集合
- 7MySQL8 中文参考（九十四）
- 8Mac OS安装Docker_macos 安装 docker
- 9云计算课堂笔记——参考模型_云计算参考模型有哪些
- 10Git 的常用命令_git常用指令
当前位置: article > 正文
【Html】 Html写静态淘宝页面_html制作淘宝登录页面
作者：知新_RL | 2024-08-18 08:07:04
赞
踩
html制作淘宝登录页面
将源文件放在资源中共大家免费下载
Html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘宝网-淘！我喜欢</title> <link rel="stylesheet" type="text/css" href="淘宝.css" /> </head> <body> <div class="wrapper"> <div class="firstdiv" > <div class="infirstdiv"> <table class="fd_table1"> <tr > <td class="one small"><a href="#">中国大陆</td></a> <td class="one title"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">亲，请登录</a></td> <td class="one small"><a href="enroll.html" target="_blank">免费注册</a></td> <td class="one onelong"><a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html?spm=a21bo.2017.1997563273.1.5af911d9vvGbtm">手机逛淘宝</a></td> </tr> </table> <table class="fd_table2"> <tr> <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">我的淘宝</a></td> <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">购物车</a></td> <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">收藏夹</a></td> <td class="one small"><a href="https://huodong.taobao.com/wow/tbhome/act/market-list?spm=a21bo.2017.1997563209.1.5af911d910ocmh">商品分类</a></td> <td class="one small"><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.2017.1997525059.1.5af911d9aFSpef&accessCode=tbopenshop_personal">免费开店</a></td> <td class="sig">|</td> <td class="one twolong"><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.2017.1997525059.1.5af911d9aFSpef&accessCode=tbopenshop_personal">千牛卖家中心</a></td> <td class="one small"><a href="https://consumerservice.taobao.com/online-help?spm=a21bo.2017.754895749.2.5af911d954TJ4x">联系客服</a></td> <td class="one small"><a href="#">网站导航</a></td> </tr> </table> </div> </div> <div class="seconddiv"> <div class="inseconddiv"> <div class="bannern"><a href="#"><img src="img/banner_1.png" height="95px" width="80px"></a></div> <div class="bannern" ><a href="#"><img src="img/banner_2.png" class="banner_n"></div> <div class="bannern" ><a href="#"><img src="img/banner_3.png" class="banner_n"></div> <div class="bannern" ><a href="#"><img src="img/banner_4.png" class="banner_n"></div> <div class="bannern" ><a href="#"><img src="img/banner_5.png" class="banner_n"></div> <div class="bannern" ><a href="#"><img src="img/banner_6.png" class="banner_n"></div> </div> </div> <div class="threediv"> <div class="inthreediv"> <div class="ininthreediv1"> <a href="http://www.taobao.com" ><img src="img/taobaologo.png" class="td_logo"></a> </div> <div class="ininthreediv2"> <div class="ininthreediv2_1"> <input type="text" class="sousuo" placeholder=" 请输入:" /> <a href="#" class="sousuobutton"><img src="img/sousuo.button.png" ></a> </div> <div class="ininthreediv2_2"> <ul class=" ininthreediv2_2_ul"> <a href="#"><li>新款连衣裙</li></a> <a href="#"><li>四件套</li></a> <a href="#"><li>潮流T恤</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> <a href="#"><li>耳机</li></a> <a href="#"><li>时尚女包</li></a> <a href="#"><li>沙发</li></a> </ul> </div> </div> <div class="ininthreediv3"> <a href="http://www.taobao.com" ><img src="img/ewm.png" class="td_ewm"></a> </div> </div> </div> <div class="fourdiv"> <div class="infourdiv"> <div class="ininfourdiv_1"> <h2>主题市场</h2> <ul class="ul_1"> <li> <a href="#">天猫</a> </li> <li> <a href="#">聚划算</a> </li> <li> <a href="#">天猫超市</a> </li> </ul> <ul class="ul_2"> <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> <ul class="ul_3"> <li> <a href="#">|</a> </li> <li> <a href="#">飞猪旅行</a> </li> <li> <a href="#">智能生活</a> </li> <li> <a href="#">苏宁易购</a> </li> </ul> </div> <div class="ininfourdiv_2"> <div class="ininfourdiv_2_1"> </a><div class="ininfourdiv_2_1_1"><a href="#">女装</a> /<a href="#"> 内衣</a> / <a href="#">家居</a></div> <div class="ininfourdiv_2_1_1"><a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a></div> <div class="ininfourdiv_2_1_1"><a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a></div> <div class="ininfourdiv_2_1_1"><a href="#">男装 </a>/ <a href="#">运动户外</a></div> <div class="ininfourdiv_2_1_1"><a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a></div> <div class="ininfourdiv_2_1_1"><a href="#">男装</a> / <a href="#">运动户外</a></div> <div class="ininfourdiv_2_1_1"><a href="#">美妆</a> /<a href="#">彩妆</a> / <a href="#">个护</a></div> <div class="ininfourdiv_2_1_1"><a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业</a></div> <div class="ininfourdiv_2_1_1"><a href="#">大家电</a> / <a href="#">生活电器</a></div> <div class="ininfourdiv_2_1_1"><a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a></div> <div class="ininfourdiv_2_1_1"><a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a></div> <div class="ininfourdiv_2_1_1"><a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a></div> <div class="ininfourdiv_2_1_1"><a href="#">图书音像</a> / <a href="#">文具</a></div> <div class="ininfourdiv_2_1_1"><a href="#">医药保健</a> / <a href="#">进口</a></div> <div class="ininfourdiv_2_1_1"><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> </div> <div class="ininfourdiv_2_1_1"><a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a></div> <div class="ininfourdiv_2_1_1"><a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a></div> <div class="ininfourdiv_2_1_2"> <a href="#"><img src="img/hover.png" class="hoverimg" /></a> </div> </div> <div class="ininfourdiv_2_2"> <a href="#"><img src="img/centerimg.png" class="centerimg"/></a> </div> <div class="ininfourdiv_2_3"> </div> </div> <div class="ininfourdiv_2"> <a href="#"><img src="img/fourdivbuttom.png" class="ininfourdiv_2_img" /></a> </div> </div> </div> <footer class="footerdiv"> <div class="ft_1"> <tr class="text3"> <a href="#"><td>阿里巴巴集团 </td></a> <td>|</td> <a href="#"><td> 淘宝网 </td></a> <td>|</td> <a href="#"><td> 天猫 </td></a> <td>|</td> <a href="#"><td> 聚划算 </td></a> <td>|</td> <a href="#"><td> 全球速卖通 </td></a> <td>|</td> <a href="#"><td> 阿里巴巴国际交易市场 </td></a> <td>|</td> <a href="#"><td> 1688 </td></a> <td>|</td> <a href="#"><td> 阿里妈妈 </td></a> <td>|</td> <a href="#"><td> 飞猪 </td></a> <td>|</td> <a href="#"><td> 淘小铺 </td></a> <td>|</td> <a href="#"><td> 阿里云计算 </td></a> <td>|</td> <a href="#"><td> ALiOS </td></a> <td>|</td> <a href="#"><td> 阿里通信 </td></a> <td>|</td> <a href="#"><td> 一淘 </td></a> <td>|</td> <a href="#"><td> 万网 </td></a> <td>|</td> <a href="#"><td> 高德 </td></a> <td>|</td> <a href="#"><td> UC </td></a> <td>|</td> <a href="#"><td> 友盟 </td></a> <td>|</td> <a href="#"><td> 阿里安全 </td></a> <td>|</td> <a href="#"><td> 虾米 </td></a> <td>|</td> <a href="#"><td> 大麦网 </td></a> <td>|</td> <a href="#"><td> 钉钉 </td></a> <td>|</td> <a href="#"><td> 支付宝 </td></a> <td>|</td> <a href="#"><td> 优酷 </td></a> <td>|</td> <a href="#"><td> 土豆 </td></a> <td>|</td> <a href="#"><td> 阿里健康 </td></a> <td>|</td> <a href="#"><td> 阿里影业 </td></a> <td>|</td> <a href="#"><td> 阿里体育 </td></a> <td>|</td> <a href="#"><td> 网商银行 </td></a> </tr> </div> <div class="hrr"><hr></div> <div class="ft_2"> <tr> <a href="#"><td>关于淘宝 </td></a> <a href="#"><td>合作伙伴 </td></a> <a href="#"><td>营销中心 </td></a> <a href="#"><td>廉政举报 </td></a> <a href="#"><td>联系客服 </td></a> <a href="#"><td>开放平台 </td></a> <a href="#"><td>诚征英才 </td></a> <a href="#"><td>联系我们 </td></a> <a href="#"><td>网站地图 </td></a> <a href="#"><td>隐私权政策 </td></a> <a href="#"><td>法律声明 </td></a> <a href="#"><td>知识产权 </td></a> <td>| </td> <p class="text_none">© 2003-现在 chinsheng 版权所有</p> </tr> </div> </footer> </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
Css
*{ margin: 0; padding: 0; text-decoration: none; } html,body{ width: 100%; height: 100%; background-color: #f4f4f4; color: #3c3c3c; overflow-x: hidden; } .wrapper{ width: 100%; height: 100%; } /***************************************ONE*******************************************/ .firstdiv{ background-color: #F5F5F5; height:40px; width:100%; top:0%; margin:0; } .infirstdiv{ width:76%; position:relative; color:#6c6c6c; left:5%; top:20%; } .fd_table1{ position:relative; left:19%; top:25%; width:35%; font-size: 13px; float:left; } .fd_table2{ position:relative; top:25%; width:45%; font-size: 13px; float: right; } .one:hover{color:orangered} .onelong{width:150px;} .twolong{width:70px;} .sig{width:10px;} .small{width:40px;} a{ color:#6c6c6c; text-decoration:none; } a:hover{color:orangered} a:active{color:orangered} .title{color:orangered;width:50px;} /***************************************TWO*******************************************/ .seconddiv{ height:100px; background-color: #ff84b6; } .inseconddiv{ height:100px; position:relative; width:63%; left:19%; display:flex; align-items: center; justify-content:space-between; } .bannern{ display:block; float:left; } .banner_n{ width:90%; height:80%; } /***************************************THREE*******************************************/ .threediv{ height:122px; width:100%; } .inthreediv{ width:63%; height:100%; position: relative; left:19%; display:flex; align-items:center; } .td_logo{ float:left; } .ininthreediv2{ width:60%; } .sousuo{ width:500px; height:36px; position:relative; left:9.6%; outline:none; -webkit-appearance: none; text-shadow: none ; border-radius: 15px 0 0px 15px; border-color: orangered; } .sousuobutton{ position:relative; top:15px; left:9%; } .ininthreediv2_2_ul li{ list-style-type: none; display: inline; } .ininthreediv2_2{ position: relative; left:10%; top:10px; font-size:13px; } .td_ewm{ width:50%; height:50%; position: relative; left:100%; } /***************************************FOUR*******************************************/ .fourdiv{ background-color:#f4f4f4; height:620px; } .wrapper .fourdiv .infourdiv{ width: 63%; height: 100%; position: relative; left:19%; } .wrapper .fourdiv .infourdiv .ininfourdiv_1{ width: 100%; height: 30px; background: linear-gradient(to right,#ff9000 0,#ff5000 100%); margin: 0 auto; } .wrapper .fourdiv .infourdiv .ininfourdiv_1 h2{ float: left; color: #fff; font-family: "等线 Light"; font-size: 18px; width: 180px; height: 100%; background-color: #ff5000; text-align: center; line-height: 30px; } .wrapper .fourdiv .infourdiv .ininfourdiv_1 ul{ float: left; list-style: none; } .wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li{ float: left; margin: 0 4px; padding: 0 4px; position: relative; } .wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li:hover::before{ content: ""; display: block; width: 30px; height: 30px; background: url('./img/up.png') no-repeat; background-size: center; position: absolute; top: -10px; left: 50%; margin-left: -15px; } .wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li a{ line-height: 30px; color: #fff; font-weight: 600; } .wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1{ width:178px; height: 479px; border:1px solid orangered; background-color: white; } .wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1{ width:100%; height:28px; font-size: 13px; text-align: center; line-height: 28px; } .wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1:hover{ background-color:#ffe4dc; } .wrapper .fourdiv .infourdiv .ininfourdiv_2{ display:flex; justify-content:flex-start; } .ininfourdiv_2_2{ float:left; } .centerimg{ width:680px; height:470px; } .hoverimg{ width:400px; height:480px ; } .wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_2{ position: absolute; left:180px; top:30px; display:none; } .wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1:hover .ininfourdiv_2_1_2{ display:block; } .ininfourdiv_2_3{ width:203px; height:480px; background-color: peru; } .ininfourdiv_2_img{ width:100%; height: 110px; position: relative; top:-5px; } /***************************************FIVE*******************************************/ .footerdiv{ background-color: white; height:150px; } .ft_1{ width:70%; height:70px; position: relative; left:15%; background-color: white; font-size: 15px; color:#6c6c6c ;display:flex; flex-wrap: wrap; justify-content:flex-start; align-content:space-around; /*word-break:break-all;*/ } .hrr{ width:70%; position: relative; left:15%; color:#dddddd; } .text3{ border-collapse:separate; border-spacing: 10px; } .ft_2{ width:70%; height:35px; position: relative; left:15%; background-color: white; font-size: 15px; color:#6c6c6c ; display:flex; flex-wrap: wrap; justify-content:flex-start; align-content:space-around; } .text_none{ color:#9c9c9c; float: left; }
- 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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/996706
