1200字范文 > html淘宝首页静态页面（html+css）带源码

html淘宝首页静态页面（html+css）带源码

时间：2021-06-30 01:43:51

文章目录

源码前端基础阶段一、实现效果二、代码1.淘宝2.html2.6.css三、图片四、涉及知识点1.头部title添加图标icon总结：

源码

链接：/s/1KKo7i4y7d5Mzhlh5ksGHrg

提取码：3bbu

前端基础阶段

尝试手写淘宝页面是前端初学者的必练手项目，从网站的基础概念开始，带你了解运行机制，然后学习html,css知识，了解各种常用标签的意义以及基础用法。多做项目，说不定以后你也是大神哦！

实现的页面：淘宝官网首页（）

一、实现效果

二、代码

1.淘宝2.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淘宝</title><link rel="shortcut icon" type="image/x-icon" color="" href="images/taobao.png" ><link rel="stylesheet" href="6.css" type="text/css"></head><body><div class="header"><div class="header_cen "><div class="hl fl"><span class="og">亲,请登录</span><a href="#"><span>免费注册</span></a><a href="#"><span >手机逛淘宝</span></a></div><div class="hr fr"><a href=""><span>淘宝网首页</span></a><a href=""><span>我的淘宝</span></a><a href=""><span>购物车</span></a><a href=""><span>收藏夹</span></a><a href=""><span>商品分类</span></a><a href=""><span>卖家中心</span></a><a href=""><span>联系客服</span></a><a href=""><span>网站导航</span></a></div></div></div><div class="nav"><div class="nav_cen"><img src="images/tb.png" alt=""><div class="search"><input type="text" value="女装"><button>搜索</button></div><ul><li><a href="#" class="og">安踏</a> </li><li><a href="#" class="og">新款外套</a></li><li><a href="#" class="og">iphone</a></li><li><a href="#">休闲裤</a></li><li><a href="#">行李箱</a></li><li><a href="#">洗发水</a></li><li><a href="#">男士t恤</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></div><div class="nav2"><span class="sp">您是不是想找:</span><a href="#"><span>女裤</span></a><a href="#"><span>新款女装</span></a><a href="#"><span>女t恤</span></a><a href="#"><span>男士t恤</span></a><a href="#"><span>女外套</span></a><a href="#"><span>洗衣液</span></a><a href="#"><span>床</span></a><a href="#"><span>双肩包</span></a><a href="#"><span>香水</span></a><a href="#"><span>洗衣机</span></a><a href="#"><span>女鞋</span></a><a href="#"><span>休闲裤</span></a><a href="#"><span>mac</span></a><a href="#"><span>电动牙刷</span></a><a href="#"><span>项链</span></a><a href="#"><span>女手链</span></a><a href="#"><span>项链女</span></a><a href="#"><span>洗面奶</span></a><a href="#"><span>运动鞋</span></a><a href="#"><span>帆布鞋</span></a></div><div class="nav3"><div class="nav3_fl">价格: <input type="text" value="￥">-<input type="text" value="￥"><input type="text" value="发货地"></div><div class="nav3_right"><a href="#">包邮</a><a href="#">正品保障</a><a href="#">7天退换</a><a href="#">消费者保障</a></div></div><div class="clearfix "><div class="banner "><ul><li><a href="#"><img src="images/11.png" alt=""><h4>￥79.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#"><img src="images/22.png" alt=""><h4>￥134.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/33.png" alt=""><h4>￥388.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/44.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="images/55.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/66.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/77.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.7ⅴ"></div></a></li><li><a href="#"><img src="images/88.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/99.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.6ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="images/100.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/1022.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.6ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="images/1011.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li></ul></div></div><div ><a href="#" class="btn_top"></a></div><div class="next-btn"><a href="#" class="first">1</a><a href="#">2</a><a href="#">3</a><a style="border:0;text-decoration: none;">...</a><a href="#">100</a><a href="#" style="width: 70px;">下一页</a><a style="border:0; width: 100px;text-decoration: none;">共100页</a><a style="width: 100px;border: 0;text-decoration: none;">去第<input type="text" value="1" >页</a><a href="#">确定</a></div><div class="footer"><a style="color:#ff4400;font-size:16px;">掌柜热卖</a><a href="#"><span>女裤</span></a><a href="#"><span>新款女装</span></a><a href="#"><span>女t恤</span></a><a href="#"><span>男士t恤</span></a><a href="#"><span>女外套</span></a><a href="#"><span>洗衣液</span></a><a href="#"><span>床</span></a><a href="#"><span>双肩包</span></a><a href="#"><span>香水</span></a><a href="#"><span>洗衣机</span></a><a href="#"><span>女鞋</span></a><a href="#"><span>休闲裤</span></a><a href="#"><span>mac</span></a><a href="#"><span>电动牙刷</span></a><a href="#"><span>项链</span></a><a href="#"><span>女手链</span></a><a href="#"><span>项链女</span></a><a href="#"><span>洗面奶</span></a><a href="#"><span>运动鞋</span></a><a href="#"><span>帆布鞋</span></a></div><div class="footer2 clearfix"><div class="banner"><ul><li><a href="#"><img src="images/11.png" alt=""><h4>￥79.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#"><img src="images/22.png" alt=""><h4>￥134.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/33.png" alt=""><h4>￥388.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="images/44.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="images/55.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li></ul></div></div><div class="footer3"><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="#">1688</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="#">AliOS</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="#">UC</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><div class="last"><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><span>© -现在版权所有</span><li><a href="#">增值电信业务经营许可证：浙B2-0224</a></li><li><a href="#">增值电信业务经营许可证（跨地区）： B2-0210</a></li><span>浙网文（）1033-086号</span><span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span><span>互联网药品信息服务资格证书（浙）-经营性--0010</span><span>短消息类服务接入代码使用证书：号【】00154-A01</span><span>信息网络传播视听许可证：1109364号</span><span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span><span>浙公网安备 33010002000078号</span><span>广播电视节目制作经营许可证（浙）字第01012号</span><span>市场名称登记证：工商网市字3301004120号</span><span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[]第00004号</span></ul></div></body></html>

2.6.css

代码如下（示例）：

ul{padding: 0;margin: 0;}li{list-style: none;float:left;}body{height: 2340px;}/*header开始*/.header{height: 35px;width:100%;background-color: #f5f5f5;border-top:2px solid #eeeeee;border-bottom:2px solid #eeeeee;}.header .header_cen{width: 1352px;height: 35px;margin: 0 auto;}.og{color:#ff4200 !important;}.header .header_cen span{padding-left:15px;font-size:13px;}.header .header_cen a {text-decoration: none;color: #939393;text-align: center;line-height: 35px;}.header .header_cen a:hover{color:#ff4200;}.header .header_cen .hl{height: 35px;width: 240px;}.header .header_cen .hr{float: right; overflow: hidden;height: 35px;width: 575px;}/*清除浮动*/.clearfix:before, .clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}clearfix{*zoom:1;}.fl{float:left;}/*header结束*//*第一个nav开始*/.nav{height: 85px;/*background-color: pink;*/}.nav .nav_cen{width: 1352px;height:85px;margin: 27px auto 0;/*background-color: yellow;*/}/*#675f5b*/.nav .nav_cen img{display: block;width: 214px;height: 62px;padding:0;float:left;}.nav .nav_cen .search{height: 40px;width: 978px;margin:0 0 6px 279px;}.nav .nav_cen div input{display: block;height: 34px;width: 882px;float:left;/*border-right:0;*/border:2px solid #ff4200;}.nav .nav_cen div button{height:40px;width: 92px;float:right;border:0;margin-left:0;background-color: #ff4200;font-family: "宋体";font-size: 16px;color:#fff;}.nav .nav_cen div input[type=text]{font-size: 16px;text-indent:1em;font-family: "宋体";}.nav .nav_cen ul{margin-left:279px;}.nav .nav_cen li a{text-decoration: none;font-size: 12px;color:#333333;margin-right:10px;}.nav .nav_cen li a:hover{color:#ff4200;}/*第一个nav结束*//*nav2开始*/.nav2{font-size: 12px;width: 1352px;height: 38px;background-color: #f5f5f5;margin:0 auto;border:2px solid #eeeeee;}.nav2 a{color: #333333;text-decoration: none;padding:0 10px;text-align: center;line-height: 38px;border-right:1px solid #333333;}.nav2 a:hover{color:#ff4200;}.nav2 .sp{/*加上nav2权重更大*/color: #747474;padding-left:20px;}.nav3 {width: 1352px;font-size: 12px;height: 38px;margin: 12px auto;border: 2px solid #eeeeee;}.nav3 .nav3_fl {height: 38px;width: 230px;float:left;color: #747474;text-align: center;line-height: 38px;}.nav3 input{margin-left:5px;width: 42px;height: 20px;border:1px solid #cccccc;}.nav3 input[type="text"]{color: #747474;}.nav3 .nav3_right{height: 38px;width: 290px;/*background-color: yellow;*/float:right;}.nav3 .nav3_right a{/*float: right;*/text-decoration: none;padding-right: 10px;text-align: center;line-height: 38px;color: #333333;}.nav3 .nav3_right a:hover{color:#ff4200;}/*nav3结束*//*banner开始*/.banner{width: 1355px;margin:0 auto;}.banner li a {float: left;display: block;text-decoration:none;height: 369px;width: 253px;border: 1px solid #eeeeee;margin: 10px 20px 0 0;}.banner li a img{display: block;margin: 16px auto;}.banner li a span {color: #000000;padding-left: 16px;font-size: 12px;}.banner li a p {padding-left:16px;color: #888888;line-height: 10px;text-decoration: underline;font-size: 12px;}.banner li a h4{color:#ff4200;margin:30px 0 0 16px;}.banner li a .last{width: 220px;height: 20px;/*background-color: pink;*/margin:0 auto;}.banner li a .tm{height: 18px;margin: 0;float:left;}.banner li a input{display: block;float:right;color:#888888;margin-right:5px;width: 105px;height: 16px;border:1px solid #cccccc;}.banner li a:hover{color:#000000;border-color:#ff4200;text-decoration: underline;}.banner li .no_rb{margin: 10px 0;}.banner li a h5:hover{color:#000000;}/*banner结束*/.btn_top{position:fixed;right:10px;bottom:50px;width: 43px;height: 50px;background:url("images/btn.png");}.next-btn{height: 37px;width: 500px;margin:50px auto;/*background-color: pink;*/}.next-btn .first{background-color:#ff4200;color:#fff ;/*margin: 0 auto;*/}.next-btn a{float: left;width: 35px;height: 35px;display: block;color: #333333;font-size: 13px;border: 1px solid #cccccc;text-align: center;line-height: 35px;text-decoration: none;}.next-btn input{height: 18px;width: 45px;}.next-btn a:hover{text-decoration: underline;}.footer{height: 38px;width: 1357px;margin: 0 auto;background-color: #f2f2f2;}.footer a{color: #666666;/*text-decoration: none;*/font-size:13px;padding-left:10px;text-align: center;line-height: 38px;}.footer a:hover{color:#f85300;}.footer3{width: 1194px;height: 70px;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;margin:50px auto;}.footer3 li a {text-decoration: none;text-align: center;line-height: 35px;color: #6c6c6c;border-right: 1px solid #dddddd;font-size: 13px;padding-right:10px;padding-left:10px;}.last{width: 1194px;height: 200px;margin:0 auto;}.last li a{text-decoration: none;text-align: center;line-height: 35px;color: #6c6c6c;font-size: 13px;padding-right:5px;padding-left:5px;}.last li a:hover{color:#f85300;}.last span{border-right: 1px solid #dddddd;text-align: center;line-height: 35px;font-size: 13px;padding-right:5px;padding-left:5px;color:#9c9c9c;}