大家好，本篇文章分享企业网站资讯文章的布局样式，这种布局样式通常用于企业网站首页。
效果图：
资讯文章
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网页设计。
分享到:
