🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS的一个品优购新闻快报实例。知识学习内容来自b站的 @黑马程序员 的视频
🔥布局思路
![](https://img-blog.csdnimg.cn/img_convert/d519689e00e5faa2a6f543a5d00e3d79.png)
一个大盒子,一个小盒子放标题并设置下边框实现横线。无序列表存放新闻
🔥CSS代码数据
大盒子
宽度:248;高度163
小盒子高度32
🔥CSS代码思路
首先清除内外边距,然后为大盒子设定宽哥并让它居中
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
}
</style>
![](https://img-blog.csdnimg.cn/img_convert/53b5b4f2aebac4eb8fed4b0977cd837e.png)
然后设置大盒子中的小盒子用于装h3标题,并为大小盒子设置边框
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
}
![](https://img-blog.csdnimg.cn/img_convert/ebf105d91dbc6255dfa0c3caa67f8f8d.png)
然后让小盒子水平居中,即设置行高等于盒子的高度
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
line-height: 32px;
}
![](https://img-blog.csdnimg.cn/img_convert/b8aa143a6a2c26c0ba012e429f81c505.png)
为小盒子设定padding,使左边有空格
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
line-height: 32px;
padding-left: 15px;
}
![](https://img-blog.csdnimg.cn/img_convert/1078893e45a717782e7900adcfb63140.png)
创建无序标签放置5条新闻
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】111111111111</a></li>
<li><a href="#">【特惠】222222222222</a></li>
<li><a href="#">【特惠】333333333333</a></li>
<li><a href="#">【特惠】444444444444</a></li>
<li><a href="#">【特惠】555555555555</a></li>
</ul>
</div>
![](https://img-blog.csdnimg.cn/img_convert/63f447737017723e588aa27a6e581d76.png)
为新闻设置样式,具体包括去除li标签的小圆点,设置文字颜色和大小
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
li {
list-style: none;
}
![](https://img-blog.csdnimg.cn/img_convert/9297ea89c896bcd4fa6db77a091dd2c1.png)
最后为新闻设置左边,上边的距离。设置左边的距离的具体方法就是为每个li标签设定一个padding-left值;而设置上边距离的具体方法就是为ul标签设定一个margin-top。当然还加了一个选中标签时出现横线的效果
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
padding-left: 15px;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul {
margin-top: 7px;
}
/* 去掉li标签的小圆点 */
li {
list-style: none;
}
![](https://img-blog.csdnimg.cn/img_convert/38a97e172018439f349fe9e97adf9ea0.png)
🔥整体代码
<!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>
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 0 auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
font-size: 14px;
font-weight: normal;
border-bottom: 1px dotted #ccc;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
padding-left: 15px;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul {
margin-top: 7px;
}
/* 去掉li标签的小圆点 */
li {
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】111111111111</a></li>
<li><a href="#">【特惠】222222222222</a></li>
<li><a href="#">【特惠】333333333333</a></li>
<li><a href="#">【特惠】444444444444</a></li>
<li><a href="#">【特惠】555555555555</a></li>
</ul>
</div>
</body>
</html>