11.26课程学习笔记以及课后练习

最新推荐文章于 2024-07-25 09:24:40 发布

wx_Gza

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量22

点赞数

文章标签：前端开发语言

本文链接：https://blog.csdn.net/wx_Gza/article/details/134409247

版权

作业

<!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="" 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="logo"><img src=""></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>

笔记

display: flex; 排成一行（主轴）默认从左到右
            flex-direction: row-reverse; 改变方向
            flex-direction: column; 改变主轴方向 从上至下
            flex-direction: column-reverse; 从下至上
            justify-content:center; 水平居中
            justify-content: space-around; 把剩余的空间平均分给每个元素
            justify-content: space-between; 两边元素贴边，剩余平分
            justify-content:end;
            justify-content:flex-end; 结尾
            align-items:center;
              align-content:space-between贴边
              align-content:space-around 平均分配
              align-self:flex-start;只改变自己的对齐方式
          order:-2 排列顺序
        flex-grow:1;占盒子比例
        flex-shrink:0;不被压缩 
        flex:1;