pcysanji 原创教程 2019-09-27

【Vieu常见问题】320印象博客（wordpress）文章页的排版CSS，图片居中，字间距、行间距、段间距调整，标题排版优化

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，图片居中，字间距、行间距、段间距调整，标题排版优化

pcysanji 钻石

分享到：

摄影师子何学长《人像摄影后期全能班第四期》摄影后期教程

音乐人声分离，AI提取伴奏人声，在线去背景音乐保留人声或提取伴奏工具

利用DISM++离线安装NetFx3

Ripro 主题灯箱设置，默认链接文件到无怎么办？解决ripro图片点击放大问题

斗鱼弹幕抓取工具，斗鱼视频自动录制，斗鱼视频下载自动化工具主播上线通知 & 视频自动录制 & 弹幕抓取

【b站二压】B站官方二压说明以及Pr如何输出比较好，b站投稿二压检测工具下载 2020-06-22

Lynda – Premiere Pro 2020 基础入门教程

MZed – 达芬奇16 权威指南 The Definitive Guide to DaVinci Resolve

Lynda出品 – 达芬奇16基础入门 – Learning DaVinci Resolve 16

自用的 Hosts 文件内容，屏蔽一些没什么用的网站，去广告

【Vieu常见问题】320印象博客（wordpress）文章页的排版CSS，图片居中，字间距、行间距、段间距调整，标题排版优化

主要的样式修改

注意事项

样式CSS代码如下

使用方法

您还可能对以下文章感兴趣

pcysanji 钻石

1 评论

发表评论取消回复

主要的样式修改

注意事项

样式CSS代码如下

使用方法

您还可能对以下文章感兴趣

pcysanji 钻石

相关推荐

1 评论

发表评论 取消回复

发表评论取消回复