320印象,用的vieu主题。
我做过新媒体运营,目前也正在做,对排版还是很看重的。
不得不说,vieu文章页的排版确实不直观。主要问题如下:
- 图片不居中
- 行间距太小
- 字间距太小
- 段间距太小
- 标题不明确
说白了,就是排版没有呼吸感,看文章的时候很不舒服,太挤了。
主要的样式修改
- H1 ,H2 ,H3的美化
- 字间距、段间距和行间距的优化
- 图片
居中+阴影
- 去掉了独立页面标题丑陋的阴影
- 首页焦点图和侧边栏对齐(强迫症的自救)
注意事项
本站主色调是绿色,对应的颜色值是0da872,请批量替换0da872为你自己博客的主题
以下是2019年09月27日修改的修改样式
主要更新内容
- 字体替换,使用Josefin Sans Ligh 和 mac上的苹方字体,较为圆润。
- 加重a标签字重,链接文字会更清楚。
- 首页工具箱高度调整,经典模式下,首页工具箱高度不对,所以调整了一下,如果你这边没有问题,记得删掉。
- 取消我要注册高亮,高亮登陆。(因为我关闭了注册,只提供QQ登入,所以就把登入高亮了。)
点击展开查看样式内容
*:not([class*="ico"]):not(i) {
font-family: 'Josefin Sans Light', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif !important;
}
/*加重a标签字重*/
a {
font-weight: 600;
}
.oldtbcontent {
margin-top: 15px;
}
.carousel-inner .item h3 {
margin: 15px 0 0;
font-size: 18px;
line-height: 1.4;
color: #fff;
}
.article-title {
text-shadow: none;
}
.article-content h1 {
background-color: #f6f6f6;
border-bottom: 0px solid #12b4f0;
padding: 5px 12px;
border-left: 5px solid #24b4f0;
margin: 12px 0px;
}
.article-content h2 {
display: inline-block;
border-bottom: none;
border-right: none;
box-shadow: rgb(244, 244, 244) 1px 3px 2px;
font-size: 18px;
background-color: #ffffff;
border-left: 8px solid #0da872;
margin: 12px 0px;
overflow: hidden;
padding: 6px 1em;
letter-spacing: 1.5px;
}
.article-content h3 {
margin: 15px auto;
display: table;
padding: 0px 20px;
line-height: 180%;
background: #0da872;
border-radius: 4px 4px;
color: #FFF;
box-shadow: rgb(244, 244, 244) 1px 3px 2px;
}
.article-content p,
.article-content ul,
.article-content ol,
.article-content dd,
.article-content pre,
.article-content hr {
margin-bottom: 15px;
}
.article-content {
color: #333;
line-height: 180%;
letter-spacing: 0.07em
}
.article-content img {
margin: 0 auto;
display: block;
line-height: 100%;
box-shadow: rgb(152, 152, 152) 0px 0px 8px;
}
.widget {
clear: both;
position: relative;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 0px 20px rgba(160, 160, 160, 0.1);
}
.Genio_Adsense_Widget {
background-color: #fff;
padding: 15px;
}
.widget_wpcc {
background-color: #fff;
padding: 15px;
}
.widget_custom_html {
background-color: #fff;
padding: 15px;
}
.widget_text {
background-color: #fff;
padding: 15px;
}
.widget_archive {
background-color: #fff;
padding: 15px;
}
.toc_widget{
background-color: #fff;
padding: 15px;
}
.rollbar a {
background: #0da872;
}
.article-content blockquote {
border-left: 5px solid #0da872;
}
/*取消我要注册高亮,高亮登陆*/
.wel .wel-item-btn > a {
background: none;
color: #5e5e5e !important;
}
.wel .wel-item > a.user-login {
margin: 17px 0px 0 15px;
height: 32px;
line-height: 32px;
border-radius: 50px;
background: #0da872;
color: #fff;
}
/*说好全局圆角,可说展示图都没有圆角啊*/
.carousel {
border-radius: 12px;
}
.ppink {
background: #ffecea;
margin: 0 0 8px 0;
padding: 5px 10px;
border-radius: 2px;
}
.pblue {
background: #ECFFFF;
margin: 0 0 8px 0;
padding: 5px 10px;
border-radius: 2px;
}
::-webkit-scrollbar {
width: 6px
}
::-webkit-scrollbar:horizontal {
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #0da872!important;
}
/*去Dplayer底部黑边*/
.article-content video{
margin: 0 auto;
}
.toc_widget_list ul {
margin-left: 1.5em;
}
/*首页工具箱高度调整*/
.home-firstitems ul li{
height: 115px;
}
展示


以下是2019年09月19日修改的修改样式
点击展开查看样式内容
.oldtbcontent {
margin-top: 15px;
}
.carousel-inner .item h3 {
margin: 15px 0 0;
font-size: 18px;
line-height: 1.4;
color: #fff;
}
.article-title {
text-shadow: none;
}
.article-content h1 {
font-weight: bold;
background-color: #f6f6f6;
border-bottom: 0px solid #12b4f0;
padding: 5px 12px;
border-left: 5px solid #24b4f0;
margin: 12px 0px;
}
.article-content h2 {
display: inline-block;
border-bottom: none;
border-right: none;
box-shadow: rgb(244, 244, 244) 1px 3px 2px;
font-size: 18px;
font-weight: bold;
background-color: #ffffff;
border-left: 8px solid #0da872;
margin: 12px 0px;
overflow: hidden;
padding: 6px 1em;
letter-spacing: 1.5px;
}
.article-content h3 {
margin: 15px auto;
display: table;
padding: 0px 20px;
line-height: 180%;
background: #0da872;
border-radius: 4px 4px;
color: #FFF;
box-shadow: rgb(244, 244, 244) 1px 3px 2px;
}
.article-content p,
.article-content ul,
.article-content ol,
.article-content dd,
.article-content pre,
.article-content hr {
margin-bottom: 15px;
}
.article-content {
color: #333;
line-height: 180%;
letter-spacing: 0.07em
}
.article-content img {
margin: 0 auto;
display: block;
line-height: 100%;
box-shadow: rgb(152, 152, 152) 0px 0px 8px;
}
.widget {
clear: both;
position: relative;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 0px 20px rgba(160, 160, 160, 0.1);
}
.Genio_Adsense_Widget {
background-color: #fff;
padding: 15px;
}
.widget_wpcc {
background-color: #fff;
padding: 15px;
}
.widget_custom_html {
background-color: #fff;
padding: 15px;
}
.widget_text {
background-color: #fff;
padding: 15px;
}
.widget_archive {
background-color: #fff;
padding: 15px;
}
.rollbar a {
background: #0da872;
}
.article-content blockquote {
border-left: 5px solid #0da872;
}
/*取消我要注册高亮,高亮登陆*/
.wel .wel-item-btn > a {
background: none;
color: #5e5e5e !important;
}
.wel .wel-item > a.user-login {
margin: 17px 0px 0 15px;
height: 32px;
line-height: 32px;
border-radius: 50px;
background: #0da872;
color: #fff;
}
/*说好全局圆角,可说展示图都没有圆角啊*/
.carousel {
border-radius: 12px;
}
.ppink {
background: #ffecea;
margin: 0 0 8px 0;
padding: 5px 10px;
border-radius: 2px;
}
.pblue {
background: #ECFFFF;
margin: 0 0 8px 0;
padding: 5px 10px;
border-radius: 2px;
}
::-webkit-scrollbar {
width: 6px
}
::-webkit-scrollbar:horizontal {
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #0da872!important;
}
以下是我2019年8月27日写的样式
点击展开查看样式内容
样式展示
样式CSS代码如下
.article-content h1 {
font-weight:bold;
background-color:#f6f6f6;
margin:20px 0;
border-bottom:0px solid #12b4f0;
padding:5px 12px;
border-left:5px solid #24b4f0;
margin:12px 0px;
}
.article-content h2 {
font-size:18px;
font-weight:bold;
background-color:#ffffff;
margin:20px 0;
border-bottom:1px solid;
padding:5px 15px;
border-left:8px solid;
margin:12px 0px;
overflow:hidden;
}
.article-content p,.article-content ul,.article-content ol,.article-content dd,.article-content pre,.article-content hr {
margin-bottom:15px;
}
.article-content {
color:#333;
line-height:220%;
letter-spacing:0.15em
}
.article-content img {
margin:0 auto;
display:block;
line-height:100%;
box-shadow:rgb(152,152,152) 0px 0px 8px;
}
使用方法
主题设置,将上头的样式CSS代码粘贴到自定义CSS样式里。
如果你喜欢 Vieu 主题,顺便介绍一下这款主题。
- 全站响应式自适应模板
- VIP会员功能
- 付费商城
- 独立下载
- 回复后可见
- 后台登录保护
- 特色登录
- 全站支持熊掌号
- 文章图片弹窗预览
- 支持QQ和微博快速登入
- 文章分享海报
- 独立下载
- …….
我看中vieu的除了功能强大,界面美观大方,扁平化。主要还是这样的主题,在 wordpress 主题里清一色的两三百块,而它只要69元。
如果有兴趣的话,可以联系我的QQ:798746476,详细了解
Hey,你好哇。影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见
剪辑交流群:685624383
收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。
如有侵权,联系 admin#mail.320nle.com
320印象 » 【Vieu常见问题】320印象博客(wordpress)文章页的排版CSS,图片居中,字间距、行间距、段间距调整,标题排版优化
320印象 » 【Vieu常见问题】320印象博客(wordpress)文章页的排版CSS,图片居中,字间距、行间距、段间距调整,标题排版优化

教程写的不错噢