实现的效果如下:
图片发自简书App
代码如下:
<!DOCTYPE html>
<html>
<head> <meta charset=utf-8" />
<title>无标题文档</title>
<style>
#box-1{ width:511px;height:342px;padding:0px 22px 4px 23px;border:solid 1px #000000;}
#title-1{font-weight:bold;font-size:26px;line-height:44px;font-family: 宋体; }
#title-2{font-weight:bold;font-size:20px;line-height:54px;font-family: 宋体; }
#content-1{height:80px;border-bottom:dashed #000000 1px;font-size:14px;line-height:26px;font-family: 宋体; text-indent:2em;color:#9b9b9b;}
#content-2-1{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 35px no-repeat;height:18px;text-indent:16px;padding-top:29px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-2{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-3{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-4{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
</style>
</head>
<body>
<div id="box-1">
<div id="title-1"> 动态新闻</div>
<div id="title-2">掌握一门技术的重要性 </div>
<div id="content-1">掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖<br/> </div>
<div id="content-2-1">走进民企观摩学习与民企面对面</div>
<div id="content-2-2">走进民企观摩学习与民企面对面</div>
<div id="content-2-3">走进民企观摩学习与民企面对面</div>
<div id="content-2-4">走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>
