题目

1. 聚美优品商品分类

需求说明

(1) . 使用定义列表dl-dt-dd制作商品分类列表

(2) . 分类列表标题与列表内容对齐显示

实现效果

image.png

实现思路

(1) . 页面背景颜色直接使用标签选择器body设置。

(2) . 使用margin和padding设置标题标签、定义列表标签的外边距、内边距为0px。

(3) . 商品分类标题放在<dt> 标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，然后通过类样式使用background属性分别设置分类标题前的背景小图标。

(4) . 列表内容放在<dd>标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，使用border-bottom设置下边框的虚线边框。

代码

html代码

<title>商品分类</title>
<link href="聚美优品.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div>
        <h2>全部分类</h2>
        <dl>
        <dt class="tp1">护肤</dt>
          <dd>洁面 化妆水 喷雾 美容液 眼霜<br/>
            眼部精华 眼膜 面膜 面膜贴<br/>
            水洗面膜 免洗面膜 精华 精油<br/>
            啫哩 凝露 乳液 面霜 日霜 晚霜 
          </dd>
        <dt class="tp2">彩妆</dt>
          <dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
            睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
            底妆 遮瑕 蜜粉 眉笔 美甲<br/>
          </dd>
        <dt class="tp3">香氛</dt>
              <dd>
                男香 女香 小Q装 中性香水
              </dd>
        <dt class="tp4">身体护理</dt>
              <dd>
                洗发 护发 沐浴 身体乳 手足护理<br/>
                护手霜 纤体 身体精油 颈部护理<br/>
                个人护理 卫生用品 脱毛 
              </dd>
        <dt class="tp5">礼盒套装</dt>
              <dd>
                护肤套装 身体护理套装 彩妆套装 <br/>
                旅行装 香水套装 男士套装  
              </dd>

        <dt class="tp6">美容工具</dt>
              <dd>
                护肤 彩妆 美发 美体 美甲 <br/>
                美容仪器 其他美容工具 
              </dd>

        <dt class="tp7">母婴专区</dt>
              <dd>
                奶粉 尿裤湿巾 母婴洗护 
              </dd>
        <dt class="tp8">男士专区</dt>
              <dd>
                洁面 爽肤水 面霜 啫哩 男香
                眼霜 凝胶 乳液 精华 沐浴 
              </dd>
        <dt class="tp9">食品保健</dt>
              <dd>
                  瘦身类 保健类 美容类 食品类 
              </dd>
        </dl>
    </div>
</body>

css代码

body,dl,h2,dt{
    padding: 0px;
    margin: 0px;
}
bady{
    background-color: #FFFFFF;
}
h2{
    background-color: #000000;
    color:#F8F8F8;
}
dt{
    color:#000000;
    background-position: left;
    font-weight: bold;
    padding-left:30px;
    border-bottom: 1px #6D6D6D dashed;
}
.tp1{
        background-image: url("images/icon_01.gif");
        background-repeat: no-repeat;
}
.tp2{
        background-image: url("images/icon_02.gif");
        background-repeat: no-repeat;
}
.tp3{
        background-image: url("images/icon_03.gif");
        background-repeat: no-repeat;
}
.tp4{
        background-image: url("images/icon_04.gif");
        background-repeat: no-repeat;
}
.tp5{
        background-image: url("images/icon_05.gif");
        background-repeat: no-repeat;
}
.tp6{
        background-image: url("images/icon_06.gif");
        background-repeat: no-repeat;
}
.tp7{
        background-image: url("images/icon_07.gif");
        background-repeat: no-repeat;
}
.tp8{
        background-image: url("images/icon_08.gif");
        background-repeat: no-repeat;
}
.tp9{
        background-image: url("images/icon_09.gif");
        background-repeat: no-repeat;
}
div{
    border: 5px #D5D5D5 solid;
    width: 400px;
}
dd{
    color: #6D6D6D;
    padding-left: 2px;
}