11月22日练习

最新推荐文章于 2024-08-19 06:15:15 发布

2301_81054073

最新推荐文章于 2024-08-19 06:15:15 发布

阅读量374

点赞数 6

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_81054073/article/details/134591723

版权

<!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>
        *{
          padding: 0;  
          margin: 0;
        }
        .b{display: flex;
            justify-content: space-around;
            width: auto;
            height: 25px;
            background-color: black;
        }
        a{
            font-size: 15px;
            /*text-align: center;*/
            color: white;
            text-decoration: none;
        }
        .f{
           display: flex;
            flex-wrap: wrap ;
            width: 1000px;
            height: 500px;
            background-color: bisque;
        }
        .left{
            width: 200px;
            height: 500px;
            background-color: gray;
        }
       
       ul {
        display: flex;
        flex-wrap: wrap;
        align-content:space-between;
        justify-content: space-between;
            
        
       }
       li{
        width: 200px;
        height: 50px;
        list-style: none;
        color: white;
       }
        .right{
            height: 500px;
            width: 800px;
            background-color: aquamarine;
        }
        .q{display: flex;
            justify-content: center;
        }
        tr{
            display: flex;
            align-items: center;
        }
        td{
            height: 35px;
            width: 87px;
            font-size: 14px;
        }
      table{
            display: flex;
            align-content: center;
        }
    </style>
</head>
<body>
     <div class="b">
        <a href="#">小米官网</a>
        <a href="#">小米商城</a>
        <a href="#">小米澎湃os</a>
        <a href="#">loT</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>
        <a href="#">登录</a>
        <a href="#">注册</a>
        <a href="#">消息通知</a>
        <a href="#">购物车</a>
      </div>
<div style="width: auto;height: 10px;"></div>


<div class="q" >
    <img src="./7389cd4973897ce151dcea0eb80b40e.jpg" alt="" width="35px" height="35px">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <table >
        <tr >
            <td>xiaomi手机</td>
            <td>Redmi手机</td>
            <td>电视</td>
            <td>笔记本</td>
            <td>平板</td>
            <td>家电</td>
            <td>路由器</td>
            <td>服务中心</td>
            <td>社区</td>
        </tr>
    </table>
     <input type="text" style="height: 30px; width: 150px;" placeholder=" 加湿器">
    </div>
</div>
<div style="width: auto;height: 10px;"></div>

    <center>
    <div class="f">
        <div class="left">
           <ul>
            <li>手机</li>
            <li>电视</li>
            <li>家电</li>
            <li>笔记本 平板</li>
            <li>出行 穿戴</li>
            <li>耳机 音箱</li>
            <li>健康 儿童</li>
            <li>生活 箱包</li>
            <li>智能 路由器</li>
            <li> 电源配件</li>
           </ul> 
        </div>
        <div class="right"> <img src="./ad80213bd0df93fcfb349788d8e2bfa.jpg" alt="" width="800px" height="500px"></div>
    </div>
</center>
</body>
</html>

2301_81054073

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
11月22日练习

<!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> *{ padd
复制链接

扫一扫