利用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>
