登录
我要注册

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

    2019-09-27 11:19:59 评论：1 阅读(1402) 分类：原创教程 百度已收录
    作者：静海流沙 发表文章数：267
    首页 » 教程分享 » 原创教程 » 正文
     

    320印象，用的vieu主题。

     

    我做过新媒体运营，目前也正在做，对排版还是很看重的。

    不得不说，vieu文章页的排版确实不直观。主要问题如下：

    1. 图片不居中
    2. 行间距太小
    3. 字间距太小
    4. 段间距太小
    5. 标题不明确

     

    说白了，就是排版没有呼吸感，看文章的时候很不舒服，太挤了。

    主要的样式修改

    1. H1 ，H2 ，H3的美化
    2. 字间距、段间距和行间距的优化
    3. 图片居中+阴影
    4. 去掉了独立页面标题丑陋的阴影
    5. 首页焦点图和侧边栏对齐（强迫症的自救）

     

    注意事项

    本站主色调是绿色，对应的颜色值是0da872，请批量替换0da872为你自己博客的主题

    以下是2019年09月27日修改的修改样式

    主要更新内容

    1. 字体替换，使用Josefin Sans Ligh 和 mac上的苹方字体，较为圆润。
    2. 加重a标签字重，链接文字会更清楚。
    3. 首页工具箱高度调整，经典模式下，首页工具箱高度不对，所以调整了一下，如果你这边没有问题，记得删掉。
    4. 取消我要注册高亮，高亮登陆。（因为我关闭了注册，只提供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日写的样式

    点击展开查看样式内容

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

    样式展示

     

    样式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常见问题】320印象博客（wordpress）文章页的排版CSS，图片居中，字间距、行间距、段间距调整，标题排版优化

     

    如果你喜欢 Vieu 主题，顺便介绍一下这款主题。

    • 全站响应式自适应模板
    • VIP会员功能
    • 付费商城
    • 独立下载
    • 回复后可见
    • 后台登录保护
    • 特色登录
    • 全站支持熊掌号
    • 文章图片弹窗预览
    • 支持QQ和微博快速登入
    • 文章分享海报
    • 独立下载
    • …….

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

     

    我看中vieu的除了功能强大，界面美观大方，扁平化。主要还是这样的主题，在 wordpress 主题里清一色的两三百块，而它只要69元。

    如果有兴趣的话，可以联系我的QQ：798746476，详细了解

     

     

    Hey，你好哇。影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元

     

    我们下次见 

     

    剪辑交流群：685624383

    AD：【320印象】分享自己所学的知识，收集网络有用的资源
    标签：

    本文首发于320印象，欢迎转载，但是必须保留本文的署名320印象（包含链接）。如您有任何商业合作或者授权方面的协商，请给我留言：admin@mail.320nle.com作者:静海流沙， 转载或复制请以 超链接形式 并注明出处 320印象。
    原文地址：《【Vieu常见问题】320印象博客（wordpress）文章页的排版CSS，图片居中，字间距、行间距、段间距调整，标题排版优化》 发布于2019-09-27

    分享到：
    赞(3) 打赏 生成海报

    相关推荐

    评论 1

    取消

    4 + 9 =
    1. #1

      教程写的不错噢

      管理员静海流沙10个月前 (09-15)回复

    热门文章

    文章归档

    评论

    最新问答

    长按图片转发给朋友

    请作者喝杯饮料吧~

    支付宝扫一扫打赏

    微信扫一扫打赏

    320印象
    分享自己所学的知识，收集网络有用的资源
    了解一下