小米官网作业

chen_zhi_yu

已于 2023-11-29 14:10:54 修改

阅读量341

点赞数 11

文章标签： html5 css

于 2023-11-29 14:09:06 首次发布

本文链接：https://blog.csdn.net/chen_zhi_yu/article/details/134688576

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五次作业</title>
    <link rel="stylesheet" href="小米.css">
</head>
<body>
    <nav>
        <div class="nav-middle">
            <div>
                <a href="#">小米商城</a>
                <a href="#">MIUI</a>
                <a href="">IoT</a>
                <a href="#">云服务</a>
                <a href="#">金融</a>
                <a href="#">有品</a>
                <a href="#">小爱开放平台</a>
                <a href="#">企业团购</a>
                <a href="#">资质证照</a>
                <a href="#">协议规则</a>
                <a href="#">下载app </a>
                <a href="#">Select Location</a>
            </div>
            <div>
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">消息通知</a>
                <a href="#" class="special">购物车（0）</a>
            </div>
        <div>
    </nav>
    <div class="head">
        <div class="head-middle">
            <ul >
                <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>
                <li><a href=""><input type="text" value="加湿器" /></a></li>
            </ul> 
        </div>
   </div>
   <div class="hezi"></div>
   <div class="liebiao">
    <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>
    </ul>
   </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
nav {
  width: 100%;
  height: 40px;
  background: #333;
}
.nav-middle {
  width: 1226px;
  height: 100%;
  margin: 0 auto;
}
.nav-middle div {
  float: right;
}
.nav-middle div:first-child {
  float: left;

}


nav div>a {
  color: #b0b0b0;
  font-family: Helvetica;
  font-size: 12px;
  line-height: 40px;
  padding: 0 8px;
}
.head{
  width: 100%;
  height: 30px;
  background-color: aliceblue;
  text-align: center;
  margin: 0 auto;

}
.head ul li{
  float: left;   
  padding: 0 20px;
  margin: 0 10px;
  background-color: azure;
}

.hezi{
  background-color: aqua;
  width: 80%;
  height: 400px;
  float: right;
}
.liebiao{  
  background-color: blanchedalmond;
  width: 20%;
  height: 400px;
  float: left;

  display: flex;
  justify-content: center;
  align-items: center;
}