使用HTML+CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style>
body{
margin: 0;
}
.container{
width: 1226px;
margin:0 auto;
}
.left{
float: left;
}
img{
width: 100%;
height: 100%;
}
.header{
background-color: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu {
float: left;
color: white;
}
.header .account{
float: right;
color: white;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover{
color: white;
}
.sub-header{
height: 100px;
}
.sub-header .h1{
height:100px ;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;display: inline-block
}
.sub-header .logo a img{
width: 56px;height: 56px
}
.sub-header .menu-list{
float: left;
line-height: 100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
.sub-header .h1{
height:100px ;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;display: inline-block
}
.sub-header .logo a img{
width: 56px;height: 56px
}
.sub-header .menu-list{
float: left;
line-height: 100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
.slider .sd-img{
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel{
width: 228px;
height: 164px;
background-color:#5f5750;
padding: 3px;
}
.news .channel .item{
height: 82px;
width: 76px;
float: left;
text-align: center;
}
.news .channel .item a{
display: inline-block;
font-size: 12px;
padding-top:18px;
color: #fff;
opacity: 0.7;
text-decoration: none;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .list-item{
width: 316px;
height: 170px;
}
.app{position: relative}
.app .download{
position: absolute;
height: 100px;
width: 100px;
display: none;
}
.app:hover .download{
display: block;
}
</style>
</head>
<body>
<!--顶部-->
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米官网</a>
<a href="https://www.mi.com/shop">小米商城</a>
<a href="https://hyperos.mi.com/">小米澎湃OS</a>
<a href="https://www.mi.com/shop">IOT</a>
<a href="https://www.mi.com/shop">云服务</a>
<a href="https://www.mi.com/shop">天星数科</a>
<a href="https://www.mi.com/shop">有品</a>
<a href="https://www.mi.com/shop">小爱开放平台</a>
<a href="https://www.mi.com/shop">资质证照</a>
<a href="https://www.mi.com/shop">协议规则</a>
<a href="https://www.mi.com/shop" class="app">下载APP
<div class="download">
<img src="images/download.png" alt="">
</div>
</a>
<a href="https://www.mi.com/shop">Select location</a>
</div>
<div class="account">
<a> 登录 </a>
<a> 注册 </a>
<a> 消息通知 </a>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--二级菜单-->
<div class="sub-header">
<div class="container">
<div class="h1 logo">
<a href="https://www.mi.com">
<img src="images/logo-mi2.png" >
</a>
</div>
<div class="h1 menu-list">
<a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97"> Xiaomi手机</a>
<a href="https://www.mi.com/shop/search?keyword=redmiK%E7%B3%BB%E5%88%97"> Redmi 红米</a>
<a href="https://www.mi.com/shop/search?keyword=%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%86%20%E5%A4%A7%E5%B8%88%E7%B3%BB%E5%88%97"> 电视</a>
<a href="https://www.mi.com/shop/buy/detail?product_id=10050057"> 笔记本</a>
<a href="https://www.mi.com/shop/buy/detail?product_id=19013"> 平板</a>
<a href="https://www.mi.com/"> 家电</a>
<a href="https://www.mi.com/"> 路由器</a>
<a href="https://www.mi.com/shop"> 服务</a>
<a href="https://www.xiaomi.cn/"> 社区</a>
</div>
<div class="h1 search"></div>
<div style="clear: both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="#" /><!--把#替换成自己的图片地址-->
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item ">
<a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://business.qiye.mi.com/">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>企业团购</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop/order/fcode">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>F码通道</span>
</a>
</div>
<div class="item">
<a href="https://10046.mi.com/">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>米粉卡</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/a/h/16769.html">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>以旧换新</span>
</a>
</div>
<div class="item">
<a href="https://account.xiaomi.com/fe/service/login/password?_group=DEFAULT&sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge%2526_group%253DDEFAULT&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=E3rd43%2B2d7vT%2FQp3jj0CJzZ6VhQ%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">
<img src="#" /><!--把#替换成自己的图片地址-->
<span>话费充值</span>
</a>
</div>
<div style="clear: both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="#" /><!--把#替换成自己的图片地址-->
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="#" /><!----><!--把#替换成自己的图片地址-->
</div>
<div class="list-item left" style="margin-left: 15px" >
<img src="#" /><!----><!--把#替换成自己的图片地址-->
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
