网页初步美化

一、设置导航栏背景

注：需在网站后台“附件管理”处上传导航背景图片，获得图片地址。然后在header.php文件中编写以下代码即可。

#site-header #logo{
        background-image: url(http://liuminlumy.top/zb_users/upload/2016/04/3.jpg);
        background-size:100%;
    }

二、设置网站logo（制作方法参考文章透明logo的制作文章）。

三、设置网站背景，在style.css文件中编写代码。

body {
    background:#eaebed url(img/back.jpg)  no-repeat  fixed center ;
    background-size:100%;    
    color:#333;
    font: 16px/24px "华文楷体",'Open Sans', Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-backface-visibility: hidden;
}

四、为文章添加个性标签，在三级页面post-single-standard.php文件中编写代码。

 <div class="entry-meta">
        <span>{$article.Author.StaticName} </span>  <!--内容区块span-->    |    
        <span class="entry-meta-date"><time datetime="{$article.Time('Y-m-d')}"><!--{qxscopic_TimeAgo($article.Time())}--><!--日期：-->{$article.Time('Y-m-d H:i:s')}</time></span>    |      
         <span><a href="{$article.Category.Url}" target="_blank">{$article.Category.Name}</a></span>     |      
         <span>阅读({$article.ViewNums})   |  评论({$article.CommNums})</span><!--wiki文档查询相关变量-->    
        </div>

为其中的链接设置个性颜色

.entry-meta a{
    color:#BD7654;
}

注：设置透明色

background: rgba(230, 164,106, 0.4);

设置文章段落的首行缩进

text-indent: 2em;/*首行缩进2个字，em是倍数关系。*

五、为文章添加上一篇下一篇链接，在三级页面post-single-standard.php文件中编写代码。

 <nav class="prevnext">
{if $article.Prev}
<a class="l" href="{$article.Prev.Url}" title="{$article.Prev.Title}"><!--«--> 上一篇:{$article.Prev.Title}</a>
{/if}
{if $article.Next}
<a class="r" href="{$article.Next.Url}" title="{$article.Next.Title}"> 下一篇:{$article.Next.Title}<!--»--></a>
{/if}
  </nav>        
        <!-- /.hentry-wrap -->

添加上一篇下一篇的样式，在header.php文件中编写以下代码。

    /*上一篇下一篇的样式*/
    .prevnext a{
        font-size:14px;
        color:#BD7654;
    }
    .prevnext a:hover{
        color:#666;
    }
    /*为下一篇作右浮动*/
    .prevnext a.r{
        float:right;
    }