html左文右图布局方法,Divi主题如何实现博客列表拆分布局【图左文右】
Divi主題是一款優秀的
Divi主題如何實現博客列表拆分布局【圖左文右】？
其實我們只需要寫幾行CSS，然后博客里使用高級CSS類即可。
首先需要把下面的CSS放到主題選項里的自定義CSS里面：
@media only screen and ( min-width: 800px ) {
.dj_blog_list a img {
float: left;
width: 40%;
padding-right: 20px;
padding-bottom: 30px;
}
}
這里我們定義了一個新的CSS類：.dj_blog_list
然后我們轉到博客元素里的高級-CSS類，把dj_blog_list放入：
這個時候，你就發現基本實現了我們的目標。接下來我們優化一些標題、元和樣式。
下面這些樣式都放在主題-自定義CSS樣式里。
標題樣式：
.et_pb_post h1 a, .entry-title {
font-size: 30px;
color: #000000;
font-weight: bold;
line-height: 1.3em;
}
元樣式：
.post-meta {
color: #000000;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
.post-meta a {
color: #000000;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
樣式：
.dj_blog_list a.more-link {
display: inline-block;
background: #000000;
font-weight: bold;
color: #ffffff;
width: 150px;
padding: 5px 10px;
text-align: center;
margin: 20px auto;
text-transform: uppercase;
letter-spacing: 1px;
border: solid 2px #000000;
}
.dj_blog_list a.more-link:hover {
background: #f9f9f9;
border: solid 2px #000000;
color: #000000;
}
現在就可以實現實現博客列表拆分布局【圖左文右】，和上圖展示的一樣。
總結
以上是生活随笔為你收集整理的html左文右图布局方法,Divi主题如何实现博客列表拆分布局【图左文右】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layuiAdmin 常见问题与解决方案
- 下一篇： 国投新股研究所 IPO 报告 ：医脉通