商品分类表

最新推荐文章于 2024-05-03 21:05:41 发布

清野419

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量202

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_81190590/article/details/138252779

版权

我喜欢把属性写在<style>标签里

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
     .box{
         width: 300px;
         height: 200px;
         padding-left:10px;
         padding-top: 10px;
     }
    body{
        background-color:darkgray;
    }
    .box h2{
        background-color: black;
        font-size: 22px;
        color: white;
        height: 40px;
        line-height: 30px;
        padding-left: 18px;
        padding-top: 7px;
        font-weight: bold;
    }
    dt{
        color: black;
        font-size: 18px;
        font-weight: bold;
        vertical-align: middle;
        transform: translateY(-10px);
    }
    dd{
        padding-left: 30px;
        color: rgb(150, 148, 148);
        line-height: 1.5;
        font-size: 16px;

    }
    img{
        padding-top: 13px;
        transform: translateY(6px);
        padding-right: 3px;
    }
    .box dl{
        background-color: white;
    }
    .s{
        border-bottom: 2px dashed #9b9696;
    }
    </style>
</head>
<body>
    <div class="box">
    <h1></h1>
    <h2>全部商品</h2>
    <dl>
        <dt><img src="练习2：商品分类/image/icon_01.gif">护肤</dt>
        <dd>洁面 化妆水 喷雾 美容液 眼霜</dd>
        <dd>眼部精华 眼膜 面膜 面膜贴</dd>
        <dd>水洗面膜 免洗面膜 精华 精油</dd>
        <dd>凝露 乳液 面霜 日霜 晚霜</dd>
        <div class="s"></div>
        <dt><img src="练习2：商品分类/image/icon_02.gif">彩妆</dt>
        <dd>卸妆 防晒 隔离 BB霜 粉底</dd>
        <dd> 粉饼 睫毛膏 眼影 唇彩 腮红</dd>
        <dd> 眼线笔 底妆 遮瑕 蜜粉 眉笔 美甲</dd>
        <div class="s"></div>
        <dt><img src="练习2：商品分类/image/icon_03.gif">香氛</dt>
        <dd>男香 女香 小Q装 中性香水</dd>
        <div class="s"></div>
        <dt><img src="练习2：商品分类/image/icon_04.gif">身体护理</dt>
        <dd>洗发 护发 沐浴 身体乳 手足护理</dd>
        <dd>护手霜 纤体 身体精油 颈部护理</dd>
        <dd>个人护理 卫生用品 脱毛</dd>
    </dl>
    </div>
</body>
</html>