结果:
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻列表</title><style>/*清除默认样式*/*{margin: 0;padding: 0;box-sizing: border-box;}/*列表清除小圆点*/li{list-style: none;}/*超链接下划线清除*/a{text-decoration: none;}.new{margin: 100px auto;width: 360px;height: 200px;/* background-color: pink; */}.new .hd{height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;}.new .hd a{/*-1盒子向上移*/margin-top: -1px;display: block;/* /*超链接是行内元素,加宽高不生效 转模式*/ border-top: 3px solid #ff8400;border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 30px;font-size: 14px;color: #333;}.new .bd{padding: 5px;}.new .bd li{padding-left: 15px;background-image: url(./square.png); /*装饰*/background-repeat: no-repeat;background-position: 0 center; /*水平 垂直*/}.new .bd li a{padding-left: 20px;background: url(./img.gif) no-repeat 0 center;/*复合属性*/font-size: 12px;color: #666;line-height: 24px;}/*鼠标悬停*/.new .bd li a:hover{color: #ff8400;}</style>
</head>
<body><!--新闻区域 :标题+内容--><div class="new"><div class="hd"><a href="#">新闻</a></div><div class="bd"><ul><li><a href="#">点赞"新农人"温暖的伸手</a></li><li><a href="#">在希望的田野上...</a></li><li><a href="#">"中国天眼"有新发现 已在<<自然>>杂志发表</a></li><li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li><li><a href="#">G9"带货"背后:亏损面持续扩大,竞争环境激烈</a></li><li><a href="#">多地力推二手房"带押过户",有什么好处?</a></li></ul></div></></body>
</html>照片: 
