作业和笔记11.23-CSDN博客

本文链接：https://blog.csdn.net/xy021111/article/details/134588253

这篇文章详细描述了HTML页面结构和CSS样式在实现网站导航、内容分块和布局调整中的应用，涉及浮动、定位、CSS权重、弹性盒子（Flex）以及Grid布局，展示了如何解决常见的布局问题和利用CSS3进行响应式设计。

摘要由CSDN通过智能技术生成

作业

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
        position: fixed;
        width: 1534.5px;
        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;
    }
    .left{
        position: absolute;
        top: 11px;
        width: 71px;
        height: 71px;
    }
    .right{
        position: absolute;
        top: 11px;
        width: 374px;
        height: 65px;
        right: 0;
    }
    .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;
    }
    .main{
        position: relative;
        top: 160px;
        position: fixed;
        width: 1534.5px;
        height: 460px;
        background-color: white;
    }
    .ul3{
        position: absolute;
        width: 234px;
        height: 460px;
        margin: 0 auto;
        text-align: center;
        list-style: none;
        top: 30px;
    }
    .ul3 li{
        width: 234px;
        height: 42px;
        box-sizing: border-box;
        text-align: center;
        background-color: #69656599;
    }
    .ul3 li a {
    display: block;
    height: 234px;
    height: 42px;
    text-decoration: none;
    color: white;
    }
    .main2{
        left: 234px;
        height: 460px;
        width: 1074.5px;
    }
 </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>
  <div class="box">
    <div class="left"><img src="./微信图片_20231123200521.png" alt=""></div>
    <div class="right"><img src="./微信图片_20231123203311.png" alt=""></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 class="main">
        <div class="main1">
            <ul class="ul3">
                <li class="abc"><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>
        <div class="main2"><img src="./微信图片_20231123223326.png" alt=""></div>
    </div>
  </div>
</body>
</html>