web前端日常更新 7.21

最新推荐文章于 2023-04-14 11:05:01 发布

呵呵＆

最新推荐文章于 2023-04-14 11:05:01 发布

阅读量56

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/m0_72174649/article/details/125561240

版权

还是老样子，直接上写过的作业:

!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>
          #box{
            width: 360px;
            height: 40px;
            background-image: -webkit-linear-gradient(top,rgb(34, 123, 185),rgb(157, 204, 236)) ;
         }
         .box2{
            width: 320px;
            height: 40px;
            background-image: -webkit-linear-gradient(top,rgb(213, 235, 249),rgb(157, 204, 236)) ;
         }
         .box3{
            width: 320px;
            height: 40px;
            margin-top: 130px;
            background-image: -webkit-linear-gradient(top,rgb(213, 235, 249),rgb(242, 245, 248)) ;
         }
         .box4{
            width: 320px;
            height: 40px;
            margin-top: 100px;
            background-image: -webkit-linear-gradient(top,rgb(213, 235, 249),rgb(242, 245, 248)) ;
         }
         .box5{
            width: 320px;
            height: 40px;
            margin-top: 100px;
            background-image: -webkit-linear-gradient(top,rgb(213, 235, 249),rgb(242, 245, 248)) ;
         }
         
          .zi{
            line-height: 40px;
            margin-left: 30px;
            color: white;
          }
          .num{
            line-height: 40px;
            margin-left: 30px;
            color:rgb(30, 113, 206);
          }
          ol>li{
            margin-top: 150px;
          }
          li{
            list-style: none;
          }
          p{
            color:rgb(149, 115, 121);
            text-align: center;
          }
          
    </style>
</head>
<body>
    <div id="box">
        <h2 class="zi">家用电器</h2>
        <ul>
            <li class="box2">
                <h3 class="num">大家电</h3>
                <p>平板电脑 洗衣机 冰箱</p>
                <p>空调 烟机/灶具 热水器</p>
                <p>冷柜/酒柜 消毒柜 家庭影院</p>
            </li>
            <li class="box3">
                <h3 class="num">生活电器</h3>
                <p>电风扇  净化器  吸尘器</p>
                <p>净水设备  挂烫机  电话机</p>
            </li>
            <li class="box4">
                <h3 class="num">厨房电器</h3>
                <p>榨汁机  电压力锅  电饭煲</p>
                <p>豆浆机  微波炉  电磁炉</p>
            </li>
            <li class="box5">
                <h3 class="num">五金家装</h3>
                <p>淋浴/水槽  电动工具  手动工具</p>
                <p>仪器仪表  浴霸/排气  灯具</p>
            </li>
        </ul>
        
        </ol>
    </div>
</body>
</html>

效果图：