<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mi</title>
<style>
body{
margin: 0;
padding: 0;
}
.title{
background-color: #333;
height: 40px;
}
.title .title_content{
90%;
margin-left: 5%;
position: relative;
}
.title .title_content a{
line-height: 40px;
font-size: 12px;
text-decoration: none;
color: #b0b0b0;
}
.title .title_content .title_content_left{
position: absolute;
left: 0;
top: 0;
}
.title .title_content .title_content_right{
position: absolute;
right: 120px;
top: 0;
}
.title .title_content .title_content_market{
100px;
height: 40px;
background-color: #424242;
position: absolute;
right: 0;
top: 0;
text-align: center;
}
.site_header{
height: 100px;
90%;
margin-left: 5%;
position: relative;
}
#mi_logo{
position: absolute;
top: 22.5px
}
.site_header .site_header_content .site_header_nav{
position: absolute;
left: 300px;
}
.site_header .site_header_content a{
padding: 20px;
line-height: 100px;
font-size: 18px;
color: black;
text-decoration: none;
}
.site_header .site_header_content .site_header_search{
position: absolute;
right: 0;
top: 40px;
}
.category{
height: 460px;
90%;
margin-left: 5%;
position: relative;
}
#background_img{
100%;
height: 650px;
}
.category .category_nav{
background-color: rgba(105, 101, 101, 0.6);
position: absolute;
left: 0;
top: 0;
400px;
height: 650px;
}
.category .category_nav .category_nav_button a{
display: inline-block;
font-size: 18px;
padding: 18px 30px;
color: white;
text-decoration: none;
}
.category .category_nav .right_an{
position: absolute;
right: 0;
}
.category .category_nav .category_nav_list{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="title">
<div class="title_content">
<div class="title_content_left">
<a href="">小米商城</a><span> |</span>
<a href="">MIUI</a><span> |</span>
<a href="">loT</a><span> |</span>
<a href="">云服务</a><span> |</span>
<a href="">天星数科</a><span> |</span>
<a href="">有品</a><span> |</span>
<a href="">小爱开放平台</a><span> |</span>
<a href="">企业团购</a><span> |</span>
<a href="">资质证照</a><span> |</span>
<a href="">企业团购</a><span> |</span>
<a href="">协议规则</a><span> |</span>
<a href="">下载app</a><span> |</span>
<a href="">智能生活</a><span> |</span>
<a href="">Select Location</a>
</div>
<div class="title_content_right">
<a href="">登陆</a><span> |</span>
<a href="">注册</a><span> |</span>
<a href="">消息通知</a><span></span>
</div>
<div class="title_content_market">
<a href="">购物车</a>
</div>
</div>
</div>
<div class="site_header">
<img id="mi_logo" src="https://gitee.com/raigor1/img_folder/raw/master/img/logo.png" alt="mi_logo">
<div class="site_header_content">
<div class="site_header_nav">
<a href="">小米手机</a>
<a href="">Redmi 红米</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">家电</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服务</a>
<a href="">社区</a>
</div>
<div class="site_header_search">
<form>
<label>
<input type="text" value="小米10">
</label>
<label>
<input type="submit">
</label>
</form>
</div>
</div>
</div>
<div class="category">
<img id="background_img" src="https://gitee.com/raigor1/img_folder/raw/master/img/21b26ea3661cb4de289d4ab75591dabf.jpg" alt="background_img">
<div class="category_nav">
<div class="category_nav_list">
<div class="category_nav_button">
<a class="left_an" href="">手机 电话卡</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">电视 盒子</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">笔记本 显示器</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">家电 插线板</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">出行 穿戴</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">智能 路由器</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">电源 配件</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">健康 儿童</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">耳机 音箱</a><a class="right_an" href="">></a>
</div>
<div class="category_nav_button">
<a class="left_an" href="">生活 箱包</a><a class="right_an" href="">></a>
</div>
</div>
</div>
</div>
</body>
</html>