费宇翔2023023221第四次作业

费宇翔

已于 2023-11-29 10:21:08 修改

阅读量466

点赞数 14

文章标签： html

于 2023-11-29 10:20:05 首次发布

本文链接：https://blog.csdn.net/2301_80614645/article/details/134683631

版权

  <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <style>
    .one{
        display: flex;
        background-color:black;
        height: 50px;
        width: 1700px;
        justify-content: space-around;
        color: aliceblue;
    }
    .two{
        display: flex;
        width: 1700px;
        height: 100px;
        justify-content: space-around;
        
    }
    .two img{
        width: 40px;
        height: 50px;
   
    }
    .two input{
        height: 30px;

    }
    .four{
        display: flex;
        height: 500px;
        width: 1350px;
        background-color: grey;
        justify-content: space-around;
        justify-content: center;
        align-items: center;
    }
    .four img{
        width: 1225px;
        height: 500px;
    }
    .four ul{
        list-style: none;
        line-height: 40px;
    }
 </style>
 <body>
<div class="one">
    <p>小米官网|</p>
    <p>小米商城|</p>
    <p>小米澎湃OS|</p>
    <p>loT|</p>
    <p>云服务|</p>
    <p>天星数科|</p>
    <p>有品|</p>
    <p>小爱开放平台|</p>
    <p>资质证照|</p>
    <p>协议规则|</p>
    <p>下载app|</p>
    <p>Select Location</p>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P> </P>
    <P>登录</P>
    <P>注册</P>
    <p>消息通知</p>
    <p>🛒购物车(0)</p>
</div>
<div class="two">
    <img src="https://inews.gtimg.com/newsapp_ls/0/13772180398/0/640.jpg" alt="">
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p>Xiaomi手机</p>
    <p>Redmi手机</p>
    <p>电视</p>
    <p>笔记本</p>
    <p>平板</p>
    <p>家电</p>
    <p>路由器</p>
    <p>服务中心</p>
    <p>社区</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <input type="text" name="" id="" placeholder="加湿器"   🔍>
</div>
<div class="four">
    <ul>
    <li>手机</li>
    <li>电视</li> 
    <li>家电</li>
    <li>笔记本 平板 </li>
    <li>出行 穿戴</li>
    <li>耳机 音箱</li>
    <li>健康 儿童</li>
    <li>生活 箱包</li>
    <li>智能 路由器</li>
    <li>电源 配件</li>
        
        
   
</ul>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7bdca7905b42672e5baf431a021afbe.png?thumb=1&w=1839&h=690&f=webp&q=90" alt="">  
   
  
 



</div>


 

    
 </body>
 </html>

1.弹性盒子:display:flex
flex-direction:row-reverse(从右向左横轴排列)
flex-direction:column（从上往下纵向排列）
2.flex-direction:设置主轴方向
3.flex-wrap:wrap允许弹性盒子换行
4.justify-content:center(水平居中)
justify-content:space-around(平均分布)
justify-content:space-between(贴边分布)
align-items:center(侧轴水平居中)
align-conter:space-between(侧轴贴边居中)
5.order:越小越在前面
6.flex-grow:1/flex-grow:2（盒子占比）
7.flex-shrink:0(禁止压缩)
8.display:grid
grid-template-column:1fr 1fr

a:hover+div{}(鼠标停在a上，下一个标签变化)
1.轮廓线:<style>input{outline-style=../outline-color:../outline-width=..}</style>控制文本框轮廓线
浮动之文字环绕
1.<style>img{float:left/right}</style>文字环绕图片
2.一个元素浮动起来会不再占有位子(脱离文档流)同时发生浮动，会在同一行排列，多个元素同时左浮动，会从左往右在同一行排列
3.{clear:float}(清除浮动)
4.外边距：magin-left=20px向左移动
5.auto:overflow:auto(溢出文本加滑动)/hidden（隐藏）
6.padding-left:20px(文本距离盒子的距离)或直接用padding:上，左右，下
7.boxing-sizing:border-box(避免文本影响盒子大小)
8.外边距塌陷问题：在父盒子加border/padding
9.*{padding:0/}