<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .today{ width: 285px; height: 310px; border-top: 1px solid #C8DCF2; border-bottom: 1px solid #C8DCF2; } .today .today-title{ width: 285px; height: 40px; } .today .today-title h3{ font-size: 16px; font-family: "微软雅黑"; color: #172C45; float: left; line-height: 40px; /* margin:表示外边框,默认情况下,使用了文字,系统会帮助我们自动添加16px宽度的边框 * */ margin: 0px; } .today .today-title a{ font-size: 12px; font-family: "微软雅黑"; color: #172C45; float: right; /* text-decoration: none;去掉下划线 * */ text-decoration: none; line-height: 40px; margin: 0px; } p{ font-size: 12px; font-family: "微软雅黑"; line-height: 20px; text-indent: 2em; } </style> </head> <body> <!--整个大盒子--> <div class="today"> <!--顶部盒子--> <div class="today-title"> <h3>今日头条</h3> <a href="#">更多>>></a> </div> <div class="img"> <img src="img/banner.jpg" /> </div> <!--底部文字--> <div class="bottom"> <p> 9月27日，XXX开始在辽宁考察。一次考察跨越三省，这在党的十八大以来是头一回。在辽宁，XXX首先来到中国东北地区建城最早的城市——辽阳。他走访了哪里，传递了什么样的信息，《时政新闻眼》为您解析。 </p> </div> </div> </body> </html>
演示效果;
