admin管理员组文章数量:1566355
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 1705px;
height: 40px;
border-bottom: 1px solid #070707;
background-color: #000;
border-top-left-radius: 10px;
}
.ul1{
margin: 0 auto;
height: 20px;
text-align: center;
list-style: none;
}
.ul1 li {
float: left;
border-right: 1px solid #ccc;
box-sizing: border-box;
line-height: 40px;
text-align: center;
}
.ul1 .last {
border-right: none;
float: right;
border-right: 1px solid #ccc;
box-sizing: border-box;
line-height: 40px;
text-align: center;
}
.ul1 li a {
display: block;
height: 40px;
text-decoration: none;
color: white
}
.ul1 li .app {
position: relative;
}
.ul1 li .app .code1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
}
.app img{
display: none;
}
.app:hover img{
display: block;
}
.box{
position: relative;
top: 50px;
position: fixed;
width: 1534.5px;
height: 100px;
border-bottom: 1px solid white;
}
.logo{
position: absolute;
top: 11px;
width: 71px;
height: 71px;
}
.ul2{
position: absolute;
left: 110px;
right: 434px;
margin: 0 auto;
width: 887.5px;
height: 100px;
text-align: center;
list-style: none;
}
.ul2 li {
float: left;
width: 98.6px;
box-sizing: border-box;
line-height: 80px;
text-align: center;
}
.ul2 li a {
display: block;
height: 100px;
text-decoration: none;
color: #000;
}
.box1{
position: relative;
top: 160px;
position: fixed;
width: 1534.5px;
height: 460px;
background-color: white;
}
.bg{
position: absolute;
top: 35px;
left: 234px;
height: 460px;
width: 1074.5px;
opacity: 90%;
}
.ul3{
position: absolute;
width: 234px;
height: 460px;
margin: 0 auto;
text-align: center;
list-style: none;
top: 25px;
}
.ul3 li{
width: 234px;
height: 65px;
box-sizing: border-box;
text-align: center;
background-color: black;
opacity: 80%;
}
.ul3 li a {
display: block;
height: 234px;
height: 65px;
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<!--导航栏-->
<div class="nav">
<ul class="ul1">
<li><a href="#">小米官网 </a></li>
<li><a href="#">小米商城 </a></li>
<li><a href="#">小米澎湃OS</a></li>
<li><a href="#">IoT</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="#" class="app">下载app<img src="./微信图片_20231123165411.png" alt="" class="code1"></a></li>
<li><a href="#">Select Location</a></li>
<li class="last"><a href="#">购物车</a></li>
<li class="last"><a href="#">消息通知</a></li>
<li class="last"><a href="#">注册</a></li>
<li class="last"><a href="#">登录</a></li>
</ul>
</div>
<!--导航栏结束-->
<!--logo-->
<div class="box">
<div class="logo"><img src="./xmi.png"></div>
<ul class="ul2">
<li><a href="#">Xiaomi手机</a></li>
<li><a href="#">Redmi手机</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="box1">
<div class="box2">
<div class="bg"><img src="./tup.png"></div>
<ul class="ul3">
<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>
</body>
</html>本文标签： 作业
版权声明：本文标题：14啊作业 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726415669a1069784.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论