仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面
作为一个前端开发，布局+样式已经成为了必备的技能，你做得好是应该的，做的不好可以原谅，但当你意识到不足时，补足它
这是我刚"入坑"的时候写的Demo，因为当时貌似很流行模仿淘宝、音乐类网站，毕竟他们本身展示的内容足够多，可以在一个页面内体现出许多东西，且难度适中，希望能帮到大家。
目录
- 优先阅读
- 一、效果展示+基本布局结构分析
- 二、基本布局结构代码+完整代码展示
- 写在最后
优先阅读
* 190920：第一次编辑 - 访问量一般 * 200619：貌似不少人还愿意研究一下，所以我给出下面的几个选项，大家可以参考： 1. 我会通过标注的方式，将代码的布局展示出来，给大家提供参考，不至于看到一大块的代码无从下手； 2. 我会将每一块的实现方式标注出来，让大家遇到类似的场景时可以有一些思路； 3. 大家说出来自己想要的布局方式或场景，我来看看能不能在官网的栗子中体现出来； 4. 更多建议等待大家留言评论哦！！！- 这里是另一个静态页面（小米官网）
- 传送门小米静态页面
一、 仿淘宝官网页面（静态）最终效果图
淘宝官网预览地址
html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝网-淘！我喜欢title>
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div class="web-shop">
<div class="header">
<div class="container">
<ul class="nav">
<li>
<a href="javascript:;" class="arrow">中国大陆a>
li>
<li class="orange">
<a href="javascript:;">亲，请登录a>
li>
<li>
<a href="javascript:;">免费注册a>
li>
<li>
<a href="javascript:;">手机逛淘宝a>
li>
ul>
<ul class="nav">
<li>
<a href="javascript:;" class="arrow">我的淘宝a>
li>
<li>
<a href="javascript:;" class="arrow">购物车a>
li>
<li>
<span class="start" class="arrow">span>
<a href="javascript:;">收藏夹a>
li>
<li>
<a href="javascript:;" class="arrow">商品分类a>
li>
<li>
<a href="javascript:;" class="arrow">卖家中心a>
li>
<li>
<a href="javascript:;" class="arrow">联系客服a>
li>
<li>
<a href="javascript:;" class="arrow">网站导航a>
li>
ul>
div>
div>
<div class="body-1">
<div class="search">
<div class="search-logo">
<a href="https://www.taobao.com/">a>
div>
<div class="search-box">
<ul class="search-tab">
<a href="javascript:;" class="choose1">淘宝a>
<a href="javascript:;">天猫a>
<a href="javascript:;">店铺a>
ul>
<form class="search-input">
<input class="box1" type="text" name="search">
<button class="btn" type="submit">搜索button>
form>
<div class="search-choose">
<a href="javascript:;">新款连衣裙a>
<a href="javascript:;">四件套a>
<a href="javascript:;" class="tx">潮流T恤a>
<a href="javascript:;">时尚女鞋a>
<a href="javascript:;">短裤a>
<a href="javascript:;">半身裙a>
<a href="javascript:;">男士外套a>
<a href="javascript:;">墙纸a>
<a href="javascript:;">新款男鞋a>
<a href="javascript:;">耳机a>
div>
div>
<div class="search-code">
<a href="javascript:;">
<img src="./img/jnh.png" alt="">
a>
div>
div>
<ul class="nav">
<li class="left-nav">主题市场li>
<li class="li">天猫li>
<li class="li">聚划算li>
<li class="li">|li>
<li class="li">天猫商城li>
<li class="li">司法拍卖li>
<li class="li">淘宝心选li>
<li class="li">|li>
<li class="li">飞猪旅行li>
<li class="li">智能生活li>
<li class="li">苏宁易购li>
ul>
<div class="shop" id="">
<ul class="left-items" id="left-items">
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">鞋靴a> /
<a href="javascript:;">箱包a> /
<a href="javascript:;">配件a>
li>
<li class="left-items-li">
<a href="javascript:;">童装a> /
<a href="javascript:;">孕产a> /
<a href="javascript:;">玩具a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<li class="left-items-li">
<a href="javascript:;">女装a> /
<a href="javascript:;">男装a> /
<a href="javascript:;">内衣a>
li>
<div class="left-items-content" id="left-items-content">
div>
ul>
<div class="img-box">
<div>
<img src="./img/tu1.jpg" alt="">
<img src="./img/tu2.jpg" alt="">
div>
<div>
<img src="./img/tu3.jpg" alt="">
<img src="./img/tu4.jpg" alt="">
div>
div>
<div class="tu-right">
<div class="right-icon">
<img src="./img/hi.png" alt="">
div>
<div class="right-btn">
<a href="javascript:;">登录a>
<a href="javascript:;">注册a>
<a href="javascript:;">开店a>
div>
<div class="right-warn">网上有害信息举报专区div>
<div class="right-info">
<ul class="info-top">
<li><a href="javascript:;">公告a>li>
<li><a href="javascript:;">规则a>li>
<li><a href="javascript:;">论坛a>li>
<li><a href="javascript:;">安全a>li>
<li><a href="javascript:;">公益a>li>
ul>
<ul class="info-bottom">
<li>公益阿里、腾讯等六家公司同台联合做公益li>
<li>淘宝造物节之城市秘密、聚划算88红包省钱卡li>
ul>
div>
<ul class="right-rechage">
<li><a class="icon icon-1" href="javascript:;">a>
<p>充话费p>
li>
<li><a class="icon icon-2" href="javascript:;">a>
<p>旅行p>
li>
<li><a class="icon icon-3" href="javascript:;">a>
<p>车险p>
li>
<li><a class="icon icon-4" href="javascript:;">a>
<p>游戏p>
li>
<li><a href="javascript:;" class="icon icon-1">a>
<p>充话费p>
li>
<li><a href="javascript:;" class="icon icon-2">a>
<p>旅行p>
li>
<li><a href="javascript:;" class="icon icon-3">a>
<p>车险p>
li>
<li><a href="javascript:;" class="icon icon-4">a>
<p>游戏p>
li>
<li><a href="javascript:;" class="icon icon-1">a>
<p>充话费p>
li>
<li><a href="javascript:;" class="icon icon-2">a>
<p>旅行p>
li>
<li><a href="javascript:;" class="icon icon-3">a>
<p>车险p>
li>
<li><a href="javascript:;" class="icon icon-4">a>
<p>游戏p>
li>
<li><a href="javascript:;" class="icon icon-1">a>
<p>充话费p>
li>
<li><a href="javascript:;" class="icon icon-2">a>
<p>旅行p>
li>
<li><a href="javascript:;" class="icon icon-3">a>
<p>车险p>
li>
<li><a href="javascript:;" class="icon icon-4">a>
<p>游戏p>
li>
ul>
div>
div>
div>
<div class="body-2">
<div class="item">
<div class="title">
<img src="./img/body-2-logo-1.jpg" alt="">
<span>与品质生活不期而遇span>
div>
<div class="content">
<div class="content-item">
<img src="./img/body-2-baby-1.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-2.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-3.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
div>
<div class="content">
<div class="content-item">
<img src="./img/body-2-baby-1.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-2.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-3.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
div>
div>
<div class="item">
<div class="title">
<img src="./img/body-2-logo-1.jpg" alt="">
<span>与品质生活不期而遇span>
div>
<div class="content">
<div class="content-item">
<img src="./img/body-2-baby-1.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-2.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>
<div class="content-item">
<img src="./img/body-2-baby-3.png" alt="">
<p class="desc1">小狗图案不锈钢皂p>
<p class="desc2">小狗图案不锈钢皂p>
<p class="desc3">13673人说好p>
div>