08-品优购简易信息快捷栏
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08-品优购简易信息快捷栏相关的知识，希望对你有一定的参考价值。
1.后代选择器
2.盒子内边距,边框,外边距
3.盒子的嵌套使用
<!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>
* {
margin: 0;
padding: 0;
}
/* 设置一个大盒子 */
.box {
width: 248px;
height: 163px;
margin: 150px auto;
border: 1px solid #cccccc;
}
li {
/* 去除无序表的圆点 */
list-style: none;
}
/* 下面的文字距离头部盒子的距离 */
ul {
margin-top: 8px;
}
.nav {
height: 32px;
border-bottom: 1px dashed #cccccc;
line-height: 32px;
font-weight: 400;
padding-left: 21px;
}
.box ul li a {
font-size: 12px;
color: #666666;
text-decoration: none;
}
/*鼠标经过的时候出现下划线 */
.box ul li a:hover {
text-decoration: underline;
}
/* 设置每行字体的行高 */
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="box">
<h4 class="nav">品优购快报</h4>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】母亲节,健康好礼低至5折!</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
<li><a href="#">【特惠】9.9元100张照片</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
</ul>
</div>
</body>
</html>
以上是关于08-品优购简易信息快捷栏的主要内容，如果未能解决你的问题，请参考以下文章