提示：借鉴的同学记得改一下
一、第一题
<!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>产品分类</title>
<style>
body {
background-color: antiquewhite;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
background-color: aliceblue;
width: 250px;
height: 30px;
/* line-height: 30px; */
display: flex;
align-items: center;
border-bottom: 1px #123 dashed;
}
li p span {
border-radius: 50%;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
background-color: rgb(43, 43, 43);
color: aliceblue;
}
li p a {
text-decoration: none;
/* 去除默认的下划线 */
outline: none;
/* 去除旧版浏览器的点击后的外虚线框 */
color: #000;
/* 去除默认的颜色和点击后变化的颜色 */
margin-left: 10px;
}
li p a:hover {
text-decoration: solid;
color: #fff;
}
li:hover {
background-color: red;
}
</style>
</head>
<body>
<div>
<ui>
<li>大家都喜欢的美容品</li>
<li>
<p><span>1</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>2</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>3</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>4</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>5</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>6</span> <a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>7</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>8</span> <a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
<li>
<p><span>9</span><a href="#">雅诗兰蔻及时护眼精华15ml</a></p>
</li>
</ui>
</div>
</body>
</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>
<style>
.outerMian {
width: 300px;
height: auto;
/* border: 2px black solid; */
}
.outerMian .titleMain {
/* border: 2px black solid; */
color: #fff;
font-size: 18px;
height: 35px;
line-height: 35px;
padding-left: 30px;
background: linear-gradient(rgb(123, 160, 255), rgb(210, 220, 255));
}
.outerMian .innerMain {
height: 400px;
margin-top: 40px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.outerMian .innerMain>div {
flex: 1;
width: 250px;
margin-left: 50px;
/* border: 2px black solid; */
}
.outerMian .innerMain>div>h4 {
color: #225dff;
font-size: 14px;
line-height: 30px;
background: linear-gradient(rgb(212, 222, 247), rgb(138, 166, 224), rgb(212, 225, 255));
margin: 0;
padding-left: 30px;
}
.outerMian .innerMain>div>div>a {
text-decoration: none;
/* 去除默认的下划线 */
outline: none;
/* 去除旧版浏览器的点击后的外虚线框 */
color: #464545;
/* 去除默认的颜色和点击后变化的颜色 */
margin-left: 4px;
font-size: 12px;
line-height: 26px;
}
.outerMian .innerMain>div>div>a:hover {
text-decoration: underline;
color: rgb(186, 30, 30);
/* text-decoration: solid; */
}
</style>
</head>
<body>
<div class="outerMian">
<div class="titleMain">家用电器</div>
<div class="innerMain">
<div>
<h4>大家电</h4>
<div>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
<a href="#">空调</a>
<a href="#">热水器</a>
<a href="#">冷柜</a>
<a href="#">消毒柜子</a>
</div>
</div>
<div>
<h4>生活家电</h4>
<div>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
<a href="#">空调</a>
<a href="#">热水器</a>
<a href="#">冷柜</a>
<a href="#">消毒柜子</a>
</div>
</div>
<div>
<h4>厨房家电</h4>
<div>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
<a href="#">空调</a>
<a href="#">热水器</a>
<a href="#">冷柜</a>
<a href="#">消毒柜子</a>
</div>
</div>
<div>
<h4>五金家电</h4>
<div>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
<a href="#">空调</a>
<a href="#">热水器</a>
<a href="#">冷柜</a>
<a href="#">消毒柜子</a>
</div>
</div>
</div>
</div>
</body>
</html>
总结
点赞加关注 作业不迷路
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
