一、先上一张成果图
二、已上传Github
https://github.com/ImDaret/Front-end-learning
三、直接上代码(头大预警)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网 - 淘!我喜欢</title>
<link rel="stylesheet" href="taobao.css">
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="container">
<header>
<div class="left">
<ul>
<li>
<a href="#">中国大陆</a>
<span class="iconfont arrow"></span>
</li>
<li >
<a href="#" style="color: #ff5000;">亲,请登录</a>
</li>
<li>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>
<a href="#">我的淘宝</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont mr5"></span>
<a href="#">购物车</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#"><span class="iconfont mr5 store"></span>收藏夹</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li><span class="colorD">|</span></li>
<li>
<a href="#">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont mr5"></span>
<a href="#">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
</header>
<div class="advertisement">
<a href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.5af911d9I1YCFx&acm=lb-zebra-634493-8608804.1003.4.8190183&scm=1003.4.lb-zebra-634493-8608804.OTHER_15917254192631_8190183">
<img src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="淘宝小铺">
</a>
</div>
<nav>
<div class="navbar">
<!-- 左 -->
<div class="navleft">
<img src="./images/logo.png" alt="" style="margin-left: 30px;">
</div>
<!-- 中 -->
<div class="navmiddle">
<!-- 上 -->
<ul class="top">
<li style="color: #fff;
font-weight: bold;
border-radius: 6px 6px 0 0;
background-image: linear-gradient(to right, #ff9000, #ff5000);">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<br/>
<input type="text" />
<div class="placehorder">
<i class="iconfont"></i>
<span>显瘦牛仔背带裤</span>
</div>
<span class="iconfont imgSearch"></span>
<button>搜索</button>
<ul class="bottom">
<li>
<a href="#">新款连衣裙</a>
</li>
<li>
<a href="#">四件套</a>
</li>
<li>
<a href="#" style="color: #f40;">潮流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>
<li>
<a href="#">沙发</a>
</li>
</ul>
</div>
<!-- 右 -->
<div class="navright">
<a
href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html? spm=a21bo.2017.201858.1.5af911d9DWAa2W&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782">
<span class="c5">手机淘宝</span>
<img src="data:image/png;base64,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