为日志中的链接添加漂亮的按钮-有鱼

你已经游到: 有鱼 个人日志 阅读文章

为日志中的链接添加漂亮的按钮

  

很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(DIV),几行CSS样式就可作出这个效果,现在就教大家如何添加这个按钮效果.

首先,在编辑日志时切换到代码模式(HTML),在适当位置加入以下代码:

  • <div id=”demo”><a href=”http://zmingcx.com/”>主题演示</a></div>
  • <div id=”download”><a href=”http://zmingcx.com/”>主题下载</a></div
  • 接着再把以下样式文件加到主题的style.css中:

    #download {

    background: url(images/dd.png) no-repeat;

    width:105px;

    height:25px;

    color: #fff;

    padding-left:15px;

    }

    #demo {

    background: url(images/dd.png) no-repeat 0 -25px;

    width:105px;

    height:25px;

    color: #fff;

    padding-left:15px;

    }

    把下面这张按钮图片上传到主题的图片目录中,一般是images文件夹

    具体参数可作适当修改

    我文章中加入的代码用table表格进行定位,完整代码如下:

    <table border=”0″ width=”240″ align=”center”>

    <tbody>

    <tr>

    <td width=”120″ height=”25″>

    <div id=”demo”><a href=”http://demo.zmingcx.com/”>主题演示</a></div></td>

    <td width=”120″ height=”25″>

    <div id=”download”><a href=”http://zmingcx.com”>主题下载</a></div></td>

    </tr>

    </tbody>

    文章来源:http://zmingcx.com/log-in-to-add-a-button-link.html | 知更鸟

    ★★有鱼网-精品资源分享!★★不会下载?请查看下载方法★★

    各位请注意,目前发现 0 条鱼 在附近海域游来游去!
    捕捞每一条鱼都是十分艰辛,请各位无论在哪个岛屿生活一定要安份守已。和睦相处。





    评论内容 (*必填):
    GRAVATAR头像
    设置你的头像
    (Ctrl + Enter 快速提交)