大家好，本篇文章分享企业网站资讯文章的布局样式，这种布局样式通常用于企业网站首页。
效果图：
资讯文章
HTML代码：
最新资讯
Newest information
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
热门资讯
Popular information
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
推荐资讯
Recommend information
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
高效简洁但稳定实用的网站程序2019-09-18
CSS代码分析：
首先定义整个布局的宽度为1200像素，并居中显示
.tpt-wp { margin: 0 auto; width: 1200px; }
给每个板块头部配置不同的背景颜色，用nth-child()选择器指定板块
.tpt-c { position: relative; padding: 50px; background: #ff3333; } .tpt-1049 .tpt-md-3:nth-child(2) .tpt-c { background: #ffb933; } .tpt-1049 .tpt-md-3:nth-child(3) .tpt-c { background: #32c078; }
给文章标题列表配置高度和虚线边框，内下边距和外下边距
.tpt-b li { position: relative; height: 30px; line-height: 30px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #eee }
给文章标题配置字体大小，字体颜色和宽度
.tpt-b li a { padding: 0 0 0 15px; font-size: 15px; color: #333; width: 70% }
给文章标题时间配置绝对定位，字体大小和字体颜色
.tpt-b li span { font-size: 15px; color: #999; position: absolute; right: 0; top: 0 }
当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，一起学习HTML+CSS网页设计。