利用html和css构建出新闻链接案例，使用渐变色做出背景色变化
background: linear-gradient(to bottom, rgb(137, 210, 251), rgb(238, 248, 254), white);
利用背景图片，调整位置完成
dd {
height: 28px;
line-height: 28px;
background-image: url(./图片素材/dotBg.gif);
background-position: 0 -2px;
}
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 240px;
margin: 0 auto;
background: linear-gradient(to bottom, rgb(137, 210, 251), rgb(238, 248, 254), white);
}
a {
margin-left: 18px;
color: rgb(106, 110, 120);
text-decoration: none;
}
.hd {
height: 40px;
color: #fff;
line-height: 40px;
padding-left: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #fff;
}
dd {
height: 28px;
line-height: 28px;
background-image: url(./图片素材/dotBg.gif);
background-position: 0 -2px;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="hd">
<h4></h4><img src="./图片素材/bg.gif" alt="" style="vertical-align: middle;">中心开班信息</h4>
</div>
<dl>
<dd><a href="">8月12日：学历+技能班</a></dd>
<dd><a href="">8月16日：高考特招班</a></dd>
<dd><a href="">8月23日：Java精英班</a></dd>
<dd><a href="">8月31日：学士后强化班</a></dd>
<dd><a href="">9月5日：大学生就业班</a></dd>
<dd><a href="">9月9日：企业定向委培班</a></dd>
<dd><a href="">9月16日：网络营销强化班</a></dd>
</dl>
</div>
</body>
</html>
