源码
链接：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="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="images/11.png" alt="">
<h4>￥79.00</h4>
<span>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>
<!--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="images/11.png" alt="">
<h4>￥79.00</h4>
<span>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>垂感微喇裤女裤子长裤2020春秋新款</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>© 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" >
总结：
一定要在敲代码前将思路理清楚，要使用到什么标签什么样式需要心中有数，样式不需要死记硬背，需要使用的时候查阅开发文档就可以了
码字不易，喜欢就点个赞吧！
版权声明：本文为yingshuangtu原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。