网站首页的新闻部分，通常在首页的footer的上个部分，主要展示一些有关公司的信息，公司的活动或者热流，方便用户可以更直观地了解到本公司主营的一些产品等等，也属于一个banner的一部分吧。以上纯属个人理解，如觉得有更好的理解，乐意大家提，微笑。上代码 html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻2</title> </head> <body> <!--新闻--> <div class="news"> <h2>新闻资讯</h2> <ul> <li class=""> <h3><a href="#">标题1</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> <li class="news-item"> <h3><a href="#">标题2</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> <li class="news-item"> <h3><a href="#">标题3</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> </ul> </div> </body> </html>css样式：
*{ margin: 0; padding: 0; } .news{ border: 1px #8f8c8c solid; width: 1200px; height: auto; margin: 0 auto; } .news a{ text-decoration: none; } .news h2{ text-align: center; margin: 20px auto; } .news ul{ display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; border: 1px #fadfe4 solid; width: 1000px; } .news ul li{ /* float: left;*/ width: 300px; list-style: none; margin-left: 30px; } .news ul li:first-child{ margin-left: 0; } .news ul li h3{ text-align: center; margin: 10px auto; } .news ul li dl dt{ width: 300px; height: 205px; margin-bottom: 20px; overflow: hidden; border-radius: 8px; } .news ul li dl dt img{ width: 100%; height: 205px; transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; } .news ul li dl dt img:hover{ border-radius: 8px; transform: scale(1.15); } .news ul li dl dd{ font-size: 16px; line-height: 28px; width: 300px; } .news ul li dl dd a{ display: block; width: 300px; padding-top: 15px; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px #8f8c8c dashed; } .info-more{ text-align: center; } .info-more a:hover{ color: #0D0A0A; }完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻2</title> <style> *{ margin: 0; padding: 0; } .news{ border: 1px #8f8c8c solid; width: 1200px; height: auto; margin: 0 auto; } .news a{ text-decoration: none; } .news h2{ text-align: center; margin: 20px auto; } .news ul{ display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; border: 1px #fadfe4 solid; width: 1000px; } .news ul li{ /* float: left;*/ width: 300px; list-style: none; margin-left: 30px; } .news ul li:first-child{ margin-left: 0; } .news ul li h3{ text-align: center; margin: 10px auto; } .news ul li dl dt{ width: 300px; height: 205px; margin-bottom: 20px; overflow: hidden; border-radius: 8px; } .news ul li dl dt img{ width: 100%; height: 205px; transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; } .news ul li dl dt img:hover{ border-radius: 8px; transform: scale(1.15); } .news ul li dl dd{ font-size: 16px; line-height: 28px; width: 300px; } .news ul li dl dd a{ display: block; width: 300px; padding-top: 15px; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px #8f8c8c dashed; } .info-more{ text-align: center; } .info-more a:hover{ color: #0D0A0A; } </style> </head> <body> <!--新闻--> <div class="news"> <h2>新闻资讯</h2> <ul> <li class=""> <h3><a href="#">标题1</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> <li class="news-item"> <h3><a href="#">标题2</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> <li class="news-item"> <h3><a href="#">标题3</a></h3> <dl> <dt> <a href="#"><img src="images/x1.jpg"></a> </dt> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> <dd><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></dd> </dl> <p class="info-more"><a href="#">点击查阅更多</a></p> </li> </ul> </div> </body> </html>效果如下：
