wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 制作wordpress主题教程(12):style.css主题样式文件(二)

    制作wordpress主题教程(12):style.css主题样式文件(二)

    高时银博客 wordpress CMS主题制作 点击: 1,458 次 0 0

    在上一章中,我们对wanlimm主题的首页部分模块设置了样式,如:网站名称、顶部导航菜单、左侧文章列表,本章我们继续为首页相关模块进行样式设置。

    上一章我们对左侧文章列表设置了样式,但列表分页样式 没有设置。在没有设置样式之前如下图:

    制作wordpress主题教程(12):style.css主题样式文件(二)

    下面就是分页样式代码:

    /* 分页 */
    .page_navi{width:100%;height:36px;line-height:36px;text-align:center;overflow:hidden;}
    .page_navi a{padding:3px 8px;margin:2px;text-decoration:none;color:#888;border:1px solid;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;}
    .page_navi a:hover,.page_navi a.current{border:1px solid #FA983F;color:#F53B24;font-weight:bolder;}

    设置后的分页效果展示如下:

    制作wordpress主题教程(12):style.css主题样式文件(二)

    下在,我们再来设置侧边栏的相关模块的样式。设置前侧边栏样式很乱,如下图:

    制作wordpress主题教程(12):style.css主题样式文件(二)

    在style.css文件中添加如下代码:

    /* 侧边栏 */
    .grid_4{ width:255px; float:left; }
    .grid_4 h4{ width:100%; float:left; font-size:16px; font-weight:800; border-bottom:1px solid; line-height:30px;}
    .grid_4 ul{ width:100%; float:left; margin-bottom:20px; margin-top:6px;}
    .grid_4 ul li{ width:100%; float:left; list-style:inside}
    .grid_4 p{ width:100%; float:left; margin-top:10px; margin-bottom:20px;}
    .grid_4 p a{ margin-right:10px;}

    上面这段代码,对侧国栏小标题如“分类目录、最新文章、标签”等做了相应的样式设置,以及它们的列表做了适当的设置,效果如下图:

    制作wordpress主题教程(12):style.css主题样式文件(二)

    接下来,我们再来设置首页底部的样式 ,底部在没设置的情况下,如下图:

    制作wordpress主题教程(12):style.css主题样式文件(二)

    我们想要的效果是:底部导航菜单要横着展开。下面就是底部样式代码:

    /* 底部 */
    .footer{ float:left; width:100%; background:#CCCCCC; padding:30px 0; }
    .footer div{ float:left; width:100%; }
    .footer div li{ float:left; margin-left:15px; }

    设置样式后台底部展示效果如下图:

    制作wordpress主题教程(12):style.css主题样式文件(二)

     

    到这里,wanlimm主题的首页样式就设置完了。在wanlimm主题中,设置好了首页模式,也就等于把分类和标签页的样式设置好,最后只剩下文章页的样式了。文章页的样式就留给大家自己来进行吧,等于是留给大家的作业吧。呵呵,很简单的,因为大部分样式都在首页设置中解决,如:标题、标签、时间、侧边栏、头部、底部,首页的样式都已经帮文章页设置好了,所以不需要重新设置,你只需要设置一下文章页的“文章内容、评论”的样式就可以了。

    最后,提供一下我们这个wanlimm主题的源码:链接: http://pan.baidu.com/s/1eQzY9wQ  密码: hdqx


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201505284128.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论