大家好，本篇文章分享企業網站資訊文章的佈局樣式，這種佈局樣式通常用於企業網站首頁。
效果圖：
資訊文章
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網頁設計。
分享到:
