天兴工作室

先上效果图：

这是一个纯css写的返回顶部按钮组，来详细介绍下写法。

先上html代码，ps：此代码示例用到了字体图标显示图标（具体用法参考：http://demo.txcstx.cn/post/765.html）：

<div class="gotop">    
    <ul>        
        <li><a id="goTopBtn" href="#"><i class="icon iconfont">&#xe60b;</i><em>返回顶部</em></a></li>
        <li><a href="#" ><i class="icon iconfont">&#xe605;</i><em>上一文章</em></a></li>        
        <li><a href="#"><i class="icon iconfont">&#xe622;</i><em>下一文章</em></a></li>
        <li><a target="_blank" href="#"><i class="icon iconfont">&#xe600;</i><em>官方客服</em></a></li>        
        <li><a href="#" class="user" target="_blank"><i class="icon iconfont">&#xe60e;</i><em>个人中心</em></a></li>
     </ul>
 </div>

然后上css代码：

.gotop{
    position: fixed;/* 固定 */
    top:50%;/* 离左边50% */
    left: 50%;/* 离顶部50% */
    margin-left: 600px;/*计算页面的实际宽度除以2做一个负左边距 */
    margin-top: -125px;/* 计算按钮组的实际高度除以2做一个负上边距*/
}
.gotop li a{display: block;width: 30px;height: 30px;border-bottom: 1px solid #000;background-color: #333;color: #fff;line-height: 15px;padding: 10px;text-align: center;}
.gotop li a.user{border: 0;}
.gotop li a i{line-height: 30px;font-size: 20px;}
.gotop li a em{display: none;}
.gotop li a:hover{background-color: #3398cc;color: #fff;}
.gotop li a:hover i{display: none;}
.gotop li a:hover em{display: block;font-style: normal;}

css主要是注释里面写的做了固定和边距，其他颜色什么的可以根据自己需求调整。

zblog中的ytcms和minitu两个插件搭配起来可以做出很多效果，例如本站首页的这个两个效果，如下图：

这里就涉及到了一个问题，怎么设置这个缩略图的大小还要保证图片不变形呢。

minitu插件的后台是可以设置图片大小的，这个当然可以解决问题，但是如果一个网站有几处使用了缩略图，并且缩略图的大小并不一样的时候，就要想别的办法了。

个人喜欢使用的是用css定义（当然还有其他的办法），分享下个人心得。

minitu调用出来的图片代码为

<a href="****" target="_blank" title="****"><img src="****" alt="****" /></a>

如果直接用css定义img的大小又会出现一种问题，博客内的配图有很多是随心所欲的，并不一定都是先用作图软件裁剪好了比例的，如果用css直接定义img的宽度和高度，图片就又会变形，我的思路是这样的：

用一个div把图片代码放在里面，用div标签用多了可能会乱套，所以个人习惯用<i></i>标签把图片代码装起来，定义一下<i>的css，代码是这样的：

<i id="tu"><a href="****" target="_blank" title="****"><img src="****" alt="****" /></a></i>

css这样定义：

1、定义<i>的高度和宽度，超出隐藏。

2、定义img的宽度和<i>的宽度一致，高度不定义，完整css代码是这样的：

#tu {
    display: block;
    height: 106px;
    width: 144px;
    overflow: hidden;
}
#tu img {
    width: 144px;
}

这样就不会让图片变形，看起来舒服些。如果有几处要这样调用的，修改下id的名称，然后修改不同id下<i>的宽度高度和img的宽度就ok了。

希望对大家有所帮助，如果你觉得这样定义不太好的话也欢迎指正额。