文章目录

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

源码

链接：https://pan.baidu.com/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>
<!--header开始-->
<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>
<!--header结束-->
</div>
<!--header结束-->
<!--nav开始-->
<div class="nav"><div class="nav_cen"><img src="data: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>
<!--nav结束-->
<!--nav2开始-->
<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>
<!--nav2结束-->
<!--nav3开始-->
<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>
<!--nav3结束-->
<!--banner开始-->
<div class="clearfix ">
<div class="banner "><ul><li><a href="#"><img src="data:images/11.png" alt=""><h4>￥79.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#"><img src="data:images/22.png" alt=""><h4>￥134.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/33.png" alt=""><h4>￥388.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/44.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="data:images/55.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/66.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/77.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.7ⅴ"></div></a></li><li><a href="#"><img src="data:images/88.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/99.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.6ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="data:images/100.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/1022.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.6ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="data:images/1011.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li></ul>
</div>
</div>
<!--banner结束-->
<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="data:images/11.png" alt=""><h4>￥79.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#"><img src="data:images/22.png" alt=""><h4>￥134.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/33.png" alt=""><h4>￥388.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.9ⅴ"></div></a></li><li><a href="#"><img src="data:images/44.png" alt=""><h4>￥88.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data:images/tm.png" alt="" class="tm"><input type="text" value="如实描述：4.8ⅴ"></div></a></li><li><a href="#" class="no_rb"><img src="data:images/55.png" alt=""><h4>￥67.00</h4><span>垂感微喇裤女裤子长裤2020春秋新款</span><p>幸福良辰旗舰店</p><div class="last"><img src="data: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>© 2003-现在 Taobao.com 版权所有</span><li><a href="#">增值电信业务经营许可证：浙B2-20080224</a></li><li><a href="#">增值电信业务经营许可证（跨地区）： B2-20150210</a></li><span>浙网文（2019）1033-086号</span><span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span><span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span><span>短消息类服务接入代码使用证书：号【2016】00154-A01</span><span>信息网络传播视听许可证：1109364号</span><span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span><span>浙公网安备 33010002000078号</span><span>广播电视节目制作经营许可证（浙）字第01012号</span><span>市场名称登记证：工商网市字3301004120号</span><span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第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;
}

三、图片

tm.png

77.png

1022.png

66.png

99.png

100.png

55.png

88.png

44.png

11.png

tb.png

taobao.png

btn.png

33.png

22.png

四、涉及知识点

1.头部title添加图标icon

<title>淘宝</title><link rel="shortcut icon" type="image/x-icon"  color="" href="images/taobao.png" >

实现效果：

有两种写法,均放置在 head中

<link rel="shortcut icon" href="图片地址" />
<link rel="icon" href="图片地址" type="image/gif" />

type可以设置多种类型，href为图片的链接地址

静态的图标文件使用：

<link rel="shortcut icon" href="img.png" type="image/x-icon" />

动态图 gif（动画也是16*16）使用：

<link rel="icon" href="img.gif" type="image/gif" >

总结：

一定要在敲代码前将思路理清楚，要使用到什么标签什么样式需要心中有数，样式不需要死记硬背，需要使用的时候查阅开发文档就可以了
码字不易，喜欢就点个赞吧！

html淘宝首页静态页面（html+css）带源码相关推荐

HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
静态HTML网页设计作品——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现四.学习资料五.完整源码一.作品展示二.文件目录三.代码实现 <!DOCTYPE html ...
淘宝首页的HTML以及CSS技术点
1. 一个网页的开发流程内容结构,比如js.css 页面结构.自上而下,从左往右.(内容.颜色块.间距.边框) 2. line-height的5种设置方式及区别 normal || 1.5 || 1 ...
web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码...
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码... 1
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
淘宝代购系统、海外代购系统·代购源码、代购程序、电商API、淘宝API开发
新余市万邦科技有限公司是一家专业提供全方位代购系统.代购源码.代购程序.电商API.淘宝API.转运系统.外贸网站建设服务的公司.万邦经过近10年的实际运营改进,不断完善,功能非常强大,业务流程合理, ...
淘宝API接口，爬虫API接口源码数据汇总
API地址: https://api-gw.onebound.cn/taobao/ 调用示例: https://api-gw.onebound.cn/taobao/item_search/?key=& ...

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