使用The7构建响应式网站之博客(blog list)列表的样式改造

释放双眼,带上耳机,听听看~!

The7最新汉化版丨The7包更新丨附视频教程[出售]

The7汉化主题 wordpress商业主题 优化服务[出售]


在The7中使用博客列表是非常简单的一件事情,在页面选项中选择Blog list即可。但是如果想要显示的更和谐,更人性化一点,就需要

开发者进行二次改造了。基于上一篇文章:使用The7构建响应式企业网站之博客文章标题的截取  。我们来把博客列表显示改造的更加

完善点。实现出来的效果如下:

使用The7构建响应式网站之博客(blog list)列表的样式改造

我们来说说具体的实现过程:

[reply]
第一步:无需多言,page划分两个部分,侧边栏+内容部分。侧边栏我们可以用菜单来显示,内容部分,我们很清楚,此时应该用

Blog  list来承载具体的文章列表。所以页面属性,我们选择:

使用The7构建响应式网站之博客(blog list)列表的样式改造

我们把没用的部分都隐藏掉,比如评论,分类这些

使用The7构建响应式网站之博客(blog list)列表的样式改造

第二步:ok,此时看到的还是The7默认的样式。所以我们要对显示的文章内容进行重写样式。

重写css要明白一个优先级的原则,就是当前page的css肯定是>主题选项(全局的css)所以,我们只要在当前page中写css即可。

具体如下:

/***左侧菜单栏字体***/
.sidebar-content .custom-nav > li > a span {
font-size: 13px;
}
.custom-nav {

margin-top: -20px;
}
.entry-meta {
margin-right: -168px;
float: right;
margin-top: -30px;
}

.layout-list .post {
border-top: 0px solid;

}
.layout-list .post {
padding-top: 0px;
margin-top: 0px;
}
.post .entry-title a {
display: inline;
}
.post .entry-title a {

line-height: 25px;
font-size: 13px;
padding: 2px 0 2px 25px;
background: url(/inc/uploads/2016/08/bg-blog-comments.png) no-repeat scroll 0 4px transparent;
}
.entry-meta{
padding: 0px 0px 0px 0px;
}
.filter-style-ios .page-nav {

margin-right: 15px;
}
#page .page-nav a:first-child, #page .paginator a:first-child {
border-color: transparent;
background-color: #eee;
border: 1px solid #bbb;
color: #333;
}

/***翻页按钮样式***/
.filter-style-ios .paginator a:not(.button-load-more) {
padding: 4px 15px 4px 15px;
}

 

过程如上,我们就非常轻易的实现了博客列表的显示和谐问题。用The7进行响应式网站建设的相关教程,请持续关注。[/reply]

相关商品

The7 v.9.10.0-中文汉化 可视化拖拽编辑的WordPress主题企业外贸商城网站模板[出售]

相关专题

The7主题

The7主题-多功能企业主题 The7汉化版是一个非常漂亮的企业主题,功能非常强大,内置可视化编辑器,操作方便,支持layer和revsilder幻灯片,支持视网膜屏幕、支持自适应,所以流动元素都已集成。不管是企业门户或者个人网站、工作室都非常适合使用。 立刻购买 交流圈子 注意 * 此主题仅 Wo…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

The7汉化主题 使用The7构建响应式企业网站之博客文章标题的截取

2019-6-16 16:17:51

网站开发

一行代码解决The7升级后可视化编辑器不能正常工作的问题

2019-6-16 16:24:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6169

    评论

    4

    粉丝

    4

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    722

    评论

    2

    粉丝

    0

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    288

    评论

    26

    粉丝

    5

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    133

    评论

    59

    粉丝

    6

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    70

    评论

    12

    粉丝

    2

    关注

    0

    Wordpress建站服务商