css代码
<!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>
body{
background-color: grey;
}
div{
width:340px ;
height: 800px;
background-color: white;
}
.cx{
font-size: 20px;
color: white;
width: 340px;
height: 50px;
background-color: black;
line-height: 50px;
}
dt{
font-weight: bold;
color: black;
line-height:35px;
}
dt:not(.bk){
border-top: 1px grey dashed;
}
a{
margin-right: 1em;
text-decoration: none;
color: grey;
line-height: 5px;
}
img{
vertical-align: top;
}
</style>
<body>
</body>
</head>
</html>html代码
<!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>
</head>
<body>
<div>
<div class="cx">全部分类</div>
<dl>
<dt class="bk"><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_01.gif" alt=""> 护肤</dt>
<dd><a href="">洁面</a><a href="">化妆水</a><a href="">喷雾</a><a href="">美容液</a><a href="">眼霜</a></dd>
<dd><a href="">眼部精华</a><a href="">眼部精华面膜</a><a href="">面膜贴</a></dd>
<dd><a href="">水洗面膜</a><a href="">免洗面膜</a><a href="">精华</a><a href="">精油</a></dd>
<dd><a href="">凝露</a><a href="">乳液</a><a href="">面霜</a><a href="">日霜</a><a href="">晚霜</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_02.gif" alt=""> 彩妆</dt>
<dd><a href="">卸妆</a><a href="">防晒</a><a href="">隔离</a><a href="">BB霜</a><a href="">粉底</a><a href="">粉饼</a></dd>
<dd><a href="">睫毛膏</a><a href="">眼影</a><a href="">唇彩</a><a href="">腮红</a><a href="">眼线笔</a></dd>
<dd><a href="">底妆</a><a href="">遮瑕</a><a href="">蜜粉</a><a href="">眉笔</a><a href="">美甲</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_03.gif" alt=""> 香氛</dt>
<dd><a href="">男香</a><a href="">女香</a><a href="">小Q装</a><a href="">中性香水</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_04.gif" alt=""> 身体护理</dt>
<dd><a href="">洗发</a><a href="">护发</a><a href="">沐浴</a><a href="">身体乳</a><a href="">手足护理</a></dd>
<dd><a href="">护手霜</a><a href="">纤体</a><a href="">身体精油</a><a href="">颈部护理</a></dd>
<dd><a href="">个人护理</a><a href="">卫生用品</a><a href="">脱毛</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_05.gif" alt="">礼盒套装</dt>
<dd><a href="">护肤套装</a><a href="">身体护理套装</a><a href="">彩妆套装</a></dd>
<dd><a href="">旅行装</a><a href="">香水套装</a><a href="">男士套装</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_06.gif" alt="">美容工具</dt>
<dd><a href="">护肤</a><a href="">彩妆</a><a href="">美发</a><a href="">美体</a><a href="">美甲</a></dd>
<dd><a href="">美容仪器</a><a href="">其他美容工具</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_07.gif" alt="">母婴专区</dt>
<dd><a href="">奶粉</a><a href="">尿裤湿巾</a><a href="">母婴洗护</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_08.gif" alt="">男士专区</dt>
<dd><a href="">洁面</a><a href="">爽肤水</a><a href="">面霜</a><a href="">男香</a></dd>
<dd><a href="">眼霜</a><a href="">凝胶</a><a href="">乳液</a><a href="">精华</a><a href="">沐浴</a></dd>
<dt><img src="../源文件/1011源文件/1012/02练习：聚美优品商品分类/图片素材/icon_09.gif" alt="">食品保健</dt>
<dd><a href="">瘦身类</a><a href="">保健类</a><a href="">美容类</a><a href="">食品类</a></dd>
</dl>
</div>
</body>
</html>效果图
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
