<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;*/
}
.two1 {
width: 1300px;
height: 500px;
}
.da {
padding-left: 40px;
}
.one {
width: 1200px;
height: 80px;
/*background-color: pink;*/
text-align: center;
}
.ul li {
display: inline;
line-height: 50px;
}
.one img {
float: left;
padding-top: 20px;
}
.one a {
text-decoration: none;
margin-right: 8px;
font-size: 14px;
}
.mi {
float: right;
height: 30px;
margin: 6px;
}
.two2 {
background-color: #271e1e;
width: 200px;
height: 450px;
}
.ul2 {
padding-top: 18px;
}
.ul2 li {
/*background:green;*/
height: 40px;
line-height: 40px;
padding-left: 20px;
font-size: 10px;
margin-top: 0;
}
.ul a {
color: #000;
}
.ul2 li a {
text-decoration: none;
color: #fff;
display: block;
}
.ul2 li:hover {
background-color: orange;
}
span {
float: right;
padding-right: 20px;
}
.xiaomi {
width: 1200px;
height: 30px;
background-color: #000;
}
.span1 {
display: inline;
float: left;
}
.span1 a {
color: #6d6a6a;
font-size: 8px;
text-decoration: none;
margin-right: 5px;
}
.span2 {
display: inline;
/* float: right;*/
}
.span2 a {
text-decoration: none;
color: #6d6a6a;
font-size: 8px;
margin-right: 5px;
}
/* div .two3{
background: url(xiaomi.jpg) no-repeat;
width: 992px;
height: 460px;
float: right;
}*/
a {
font-family: "楷体";
}
</style>
</head>
<body>
<div class="da">
<div class="xiaomi">
<span class="span1">
<a href="#" class="a1">小米商城</a>
<a href="#" class="a1">MUI</a>
<a href="#" class="a1">米聊</a>
<a href="#" class="a1">游戏</a>
<a href="#" class="a1">多看阅读</a>
<a href="#" class="a1">云服务</a>
<a href="#" class="a1">金融</a>
<a href="#" class="a1">米币</a>
<a href="#" class="a1">小米商城手机版</a>>
<a href="#" class="a1">问题反馈</a>
<a href="#" class="a1">Select Region</a>
</span>
<span class="span2">
<a href="#" class="a2">登录</a>
<a href="#" class="a2">注册</a>
<a href="#" class="a2">消息通知</a>
<a href="#" class="a2">购物车（0）</a>
</span>
</div>
<div class="one">
<img src="mi.bmp" alt="">
<ul class="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><input type="text" class="mi" placeholder="红米4x 小米Note 直降三百"></li>
</ul>
</div>
<div class="two1">
<div class="two2">
<ul class="ul2">
<li><a href="#">手机电话卡<span>></span></a></li>
<li><a href="#">笔记本<span>></span></a></li>
<li><a href="#">电视盒子<span>></span></a></li>
<li><a href="#">路由器<span>></span></a></li>
<li><a href="#">移动电源<span>></span></a></li>
<li><a href="#">耳机 音响<span>></span></a></li>
<li><a href="#">保护套 贴膜<span>></span></a></li>
<li><a href="#">钱财 支架 <span>></span></a></li>
<li><a href="#">箱包 服饰<span>></span></a></li>
<li><a href="#">生活周边<span>></span></a></li>
</ul>
</div>
<!-- <div class="two3">
</div> -->
</div>
</div>
<div class="there"></div>
</div>
</body>
</html>