Hello everybody, long time no see, I miss you very much, the reason why I haven’t updated my blog for four days is the title of this article, yes, our teacher arranged the project design, and my big complaint chose the content of the Taobao home page There are so many that it took me four days to complete it as a novice, so today I will share with you the process of completing this project (I declare in advance that the degree of restoration of my work has not reached 100%, if it is not good, please everyone Do not spray (QAQ)), let me show you the final result first:
The rendering of the final result:
Next, I will talk about my global layout ideas and how to implement this interface with code from the beginning.
1. Structural layout:
Structural layout is a very important point at the beginning of a project. We must have an overall idea and divide the whole into small parts, so as to facilitate our later production and modification.
The above is a screenshot of Taobao’s official website. After observing the overall structure, I divided it into three parts, namely the top navigation bar, the search box bar below the navigation bar, and the product details bar below. These three parts in the code It is three big boxes, which are all wrapped contents. Then we start with these three big boxes and solve them one by one.
1.1 Navigation bar layout:
The reason why the navigation bar is written as a big box alone is because the content of the navigation bar also has a drop-down menu, so this drop-down menu has to be wrapped in the text of the navigation bar, so for convenience I use the entire navigation bar as a The big box is operated inside, and then the text on the left and right sides is divided into two middle boxes, and finally the drop-down menu is wrapped in the middle box as a small box.
1.2 Search bar layout:
I regard the navigation bar part as a big box, which contains three middle boxes to wrap the content of the middle three parts, and then wrap the inside of the middle box with two small boxes, and then fill in the content and layout.
1.3 Content column layout:
The content in the content column is rich and complicated, so the layout is particularly important here. If the layout is not good, it will cause constant trouble when writing the content later. First, I regard the content area as a big box, and the content wrapped inside is divided into upper and lower parts. Middle box, the middle box below is used to contain detailed products, the middle box above contains two small boxes, and the small box on the right contains three smaller boxes for storing content and a carousel.
2. Code implementation:
After the tg layout is completed, we need to use code to realize the detailed content of each part and the expression style of the content. This is a cumbersome process, and we must be patient, careful, attentive and focused.
2.1 Navigation bar code
I named the navigation bar part with header, and then wrapped it with two ul list tags, wrapped text in li, and wrapped the drop-down menu with div boxes and named them respectively. The code is as follows:
<header>
<div class="hbox">
<ul class="hu1">
<li class="hl1">
<a href="#"
>中国大陆<img src="./图片素材/下拉箭头.png" alt="#"
/></a>
</li>
<div class="hsbox1">
<p>全球</p>
<p>中国大陆</p>
<p>中国香港</p>
<p>中国台湾</p>
<p>中国澳门</p>
<p>中国韩国</p>
<p>中国马来西亚</p>
<p>中国澳大利亚</p>
<p>中国新加坡</p>
<p>中国新西兰</p>
<p>中国加拿大</p>
<p>中国日本</p>
<p>中国越南</p>
<p>中国泰国</p>
<p>中国菲律宾</p>
<p>中国柬埔寨</p>
</div>
<li>
<a href="#" style="color: rgb(242, 46, 0)">亲，请登录</a>
</li>
<li>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
<li>
<a href="#">网页无障碍</a>
</li>
</ul>
<ul class="hu2">
<li class="hl2">
<a href="#"
>我的淘宝<img src="./图片素材/下拉箭头.png" alt="#"
/></a>
</li>
<div class="hsbox2">
<p>已买到的宝贝</p>
<p>我的足迹</p>
</div>
<li>
<a href="#"><img src="./图片素材/购物车.png" alt="#" />购物车</a>
</li>
<li class="hl3">
<a href="#"><img src="./图片素材/收藏夹.png" alt="#" />收藏夹</a>
</li>
<div class="hsbox3">
<p>收藏的宝贝</p>
<p>收藏的店铺</p>
</div>
<li>
<a href="#">商品分类</a>
</li>
<li>
<a href="#">免费开店</a>
</li>
<li style="width: 100px" class="hl4">
<a href="#"
>千牛卖家中心<img src="./图片素材/下拉箭头.png" alt="#"
/></a>
</li>
<div class="hsbox4">
<p>开店入住</p>
<p>已卖出的宝贝</p>
<p>出售中的宝贝</p>
<p>卖家服务市场</p>
<p>卖家培训中心</p>
<p>体验中心</p>
</div>
<li class="hl5">
<a href="#"
>联系客服<img src="./图片素材/下拉箭头.png" alt="#"
/></a>
</li>
<div class="hsbox5">
<p>消费者客服</p>
<p>卖家客服</p>
<p>意见反馈</p>
<p>网页版旺旺</p>
</div>
</ul>
</div>
</header>2.2 Search bar code:
In the code of the search bar, a large box is used to wrap three middle boxes, and then the middle box is wrapped again with two small boxes. Inside the small boxes, the knowledge points of the select box, the input box input and the button button are used. The code of this part is as follows Shown:
<div class="topbox">
<div class="tbbox">
<div class="tmbox1">
<a href="#"><img src="./图片素材/淘宝图标.png" alt="#" /></a>
</div>
<div class="tmbox2">
<div class="tsbox1">
<select name="wuping">
<option value="baobei" selected>宝贝</option>
<option value="baobei">天猫</option>
<option value="baobei">店铺</option>
</select>
<span style="color: rgb(243, 240, 240)"> | </span>
<input
type="text"
style="width: 589px; height: 24px"
id="shurukuang"
placeholder="iPhone13"
/>
<button id="sousuo" style="color: white">搜索</button>
</div>
<div class="tsbox2">
<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>
</div>
</div>
<div class="tmbox3">
<a href="#"><img src="./图片素材/淘宝下载二维码.png" alt="#" /></a>
</div>
</div>
</div>2.3 Content column code:
In the content column, I divided it into two parts. The upper part contains some complicated and cumbersome content and the lower part contains pure commodity content. A small box with fixed length and width, inside the small box contains information such as pictures of products, text descriptions and prices;
The content of the upper part is also made into a big box, and then the content is divided into two middle boxes on the left and right. The middle box on the right contains three small boxes, one of which is used to set the carousel image, and the other two are normally set as The content filled box, the implementation code is as follows:
Upper content bar:
<div class="mbbox">
<div class="mmbox1">
<h3
style="margin: 0 0 15px 0; padding: 16px 0 0 20px; font-weight: 600"
>
分类
</h3>
<ul class="mmul" style="padding-left: 20px">
<li>
<i class="iconfont"></i>
<a href="#">女装 </a><span>/</span> <a href="#">内衣 </a
><span>/</span>
<a href="#">奢品 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">女鞋 </a><span>/</span> <a href="#">男鞋 </a
><span>/</span>
<a href="#">箱包 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">美妆 </a>
<span>/</span>
<a href="#">饰品 </a>
<span>/</span>
<a href="#">洗护 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">男装 </a><span>/</span> <a href="#">运动 </a
><span>/</span>
<a href="#">百货 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">手机 </a><span>/</span> <a href="#">数码 </a
><span>/</span>
<a href="#">企业礼品 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">家装 </a><span>/</span> <a href="#">电器 </a
><span>/</span>
<a href="#">车品 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">食品 </a><span>/</span> <a href="#">生鲜 </a
><span>/</span>
<a href="#">母婴 </a>
</li>
<li>
<i class="iconfont"></i>
<a href="#">医药 </a><span>/</span> <a href="#">保健 </a
><span>/</span>
<a href="#">进口 </a>
</li>
</ul>
</div>
<div class="mmbox2">
<div class="msbox1">
<ul>
<li>
<a href="#" style="margin-left: 17px; color: rgb(255, 0, 54)"
>天猫</a
><span>|</span>
</li>
<li>
<a href="#" style="color: rgb(255, 0, 54)">聚划算</a
><span>|</span>
</li>
<li>
<a href="#" style="color: rgb(51, 201, 0)">天猫超市</a
><span>|</span>
</li>
<li><a href="#">司法拍卖</a><span>|</span></li>
<li><a href="#">飞猪旅行</a><span>|</span></li>
<li><a href="#">天天特卖</a><span>|</span></li>
<li><a href="#">极有家</a><span>|</span></li>
<li><a href="#">淘宝直播</a></li>
</ul>
</div>
<div class="msbox2">
<div class="lunbotu">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./图片素材/轮播图1.png" alt=""></div>
<div class="swiper-slide"><img src="./图片素材/轮播图2.jpg" alt=""></div>
<div class="swiper-slide"><img src="./图片素材/轮播图3.jpg" alt=""></div>
<div class="swiper-slide"><img src="./图片素材/轮播图4.jpg" alt=""></div>
<div class="swiper-slide"><img src="./图片素材/轮播图5.jpg" alt=""></div>
</div>
<div class="swiper-button-prev prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-button-next next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-pagination pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
</div>
</div>
<div class="mssbox">
<div class="nihao">
<img
src="./图片素材/tb.jpg"
style="border-radius: 50%; margin: 32px 128px 0 128px"
/>
<p style="text-align: center">Hi! 你好</p>
</div>
<div class="mssbutton">
<button
style="
background-color: rgb(255, 93, 0);
color: white;
margin-left: 30px;
"
>
登录
</button>
<button
style="background-color: rgb(255, 118, 0); color: white"
>
注册
</button>
<button
style="
background-color: white;
color: rgb(255, 80, 0);
border: 1px solid rgb(255, 80, 0);
"
>
开店
</button>
</div>
<ul class="mssbaobeishoucang">
<li>
<i class="iconfont"></i><br /><a href="#">宝贝收藏</a>
</li>
<li>
<i class="iconfont"></i><br /><a href="#">买过的店</a>
</li>
<li>
<i class="iconfont"></i><br /><a href="#">收藏的店</a>
</li>
<li>
<i class="iconfont"></i><br /><a href="#">我的足迹</a>
</li>
</ul>
<div class="mssredian">
<a href="#"
><span
style="color: red; background-color: rgb(255, 239, 239)"
>热点 </span
>淘宝平台妲己流量造假、黑公关、网络
</a>
</div>
</div>
</div>
</div>
</div>The lower part of the content column:
<div class="shangpingbox">
<h3 style="font-weight: 500; font-size: 22px; margin: 20px 0 0 25px">
猜 你 喜 欢
<img
src="./图片素材/个性推荐.png"
alt="#"
style="height: 20px; vertical-align: bottom; margin-bottom: 4px"
/>
</h3>
<div id="shangpingbox">
<a class="sp-x">
<div class="sp-1">
<img
src="./图片素材/sp-1.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
夏季七分袖衬衫男宽松中国风男装防晒开衫外套薄
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div>
</a>
<a class="sp-x">
<div class="sp-1">
<img
src="./图片素材/sp-2.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
铁艺带挂钩办公桌三角花架置物架办公室收纳挂架
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div>
</a>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-3.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
康佳筋膜枪肌肉按摩器迷你肌膜枪十大品牌放
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-4.webp"
alt="#"
style="height: 150px; width: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
包邮S.M.HOME外贸出口纯棉贡缎柔软蓬松型单人
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-5.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
美国西屋轻音破壁机家用加热全自动小型豆浆
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-6.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
日式特大号加厚家用编织框脏衣篮玩具收纳筐零食
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-7.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
卡通水果叉家用不锈钢月饼小叉水果签可爱陶瓷叉
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-8.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
特价出口60支埃及棉纯棉贡缎长绒棉活性印染加大
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
<a class="sp-x"
><div class="sp-1">
<img
src="./图片素材/sp-9.webp"
alt="#"
style="height: 150px; border-radius: 12px"
/>
</div>
<div class="sp-2">
<p style="margin: 0 0 0 0">
滴露衣物除菌液柠檬3L2洗衣杀菌非消毒液官方
</p>
<p
style="
margin: 0 0 0 0;
font-size: 18px;
font-weight: 600;
color: rgb(255, 80, 0);
margin-top: 70px;
"
>
<span style="font-size: 12px">￥</span> 69
</p>
</div></a
>
</div>
</div>2.4 Sidebar:
I wrote the sidebar outside the box, because fixed positioning is used, the code is very simple, as shown below:
<div class="cebianlan">
<ul>
<li>
<a href="#"><i class="iconfont"></i><span>消息</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>官方客服</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>消息</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>官方客服</span></a>
</li>
</ul>
</div>By the way, the pictures in my code are all obtained from the Ali vector library. When a friend wants to get a web design picture, he may go there to find it. It is very convenient and easy to find the picture he wants. The URL is: iconfont-Alibaba Vector Icon Library
So let’s stop here today. I’ve finished talking about the framework and the code of the main part of the Taobao website project today. Tomorrow I will talk about the content of the cascading style sheet and the carousel part. Finally, I will release the complete source code of the entire project. , Thank you all for watching!