<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
.nav-box {
width: 980px;
height: 90px;
margin: 20px auto;
display: flex;
align-items: center;
}
.right {
flex: 1;
margin-left: 20px;
}
.right-top-tag li {
display: inline-block;
font-size: 12px;
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.right-top-tag li a {
color: #666;
padding: 5px 15px;
display: inline-block;
}
.right-search {
margin-top: -4px;
display: flex;
}
.right-search input {
border: 3px solid #F37B03;
width: 100%;
height: 27px;
background: url("./images/tb/search.jpg") no-repeat 10px;
flex: 1;
outline: none;
padding-left: 30px;
color: #666;
}
.right-search .button {
flex-shrink: 1;
width: 133px;
height: 33px;
background: url("images/tb/button.jpg") no-repeat;
border: none;
}
.right-search .tip {
height: 33px;
}
.right-search .tip p {
line-height: 16px;
font-size: 12px;
margin-left: 10px;
color: #666;
}
.right-title-nav ul li {
display: inline-block;
margin-top: 6px;
}
.right-title-nav ul li a {
color: #555;
font-size: 12px;
margin-right: 12px;
}
</style>
</head>
<body>
<div class="nav-box">
<div class="left">
<img src="./images/tb/logo.jpg" alt="">
</div>
<div class="right">
<div class="right-top-tag">
<ul>
<li style="background-color: #F37B03;"><a style="color: #fff;" href="#">
宝贝
</a></li>
<li><a href="#">
天猫<span style="color: #f79a3d;">(淘宝商城)</span>
</a></li>
<li><a href="#">
店铺
</a></li>
</ul>
</div>
<div class="right-search">
<input type="text">
<button class="button"></button>
<div class="tip">
<p>高级搜索</p>
<p>使用帮助</p>
</div>
</div>
<div class="right-title-nav">
<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>
</ul>
</div>
</div>
</div>
</body>
</html>