分享一个wordpress下载样式

来自 http://www.zzhck.com/870.html


代码来自于：开溜网 http://www.kailiuwang.net/wordpress-download-style-share.html
1.css样式代码：

div#download          
{         
    background: url(images/download.png) no-repeat;          
    height:79px;         
    margin:25px 5px 15px 25px;         
    border:solid 1px white;         
    list-style-type:none;         
    width:700px;         
}         
div#download ul          
{         
    list-style: none outside none;         
    margin: 0;         
    padding: 0;         
    width: 10000px;         
    list-style-type:none;         
}         
div#downloadline         
{         
    overflow: hidden;         
    border-left: 1px solid #CDCDCD;         
    width:500px;         
    height:75px;         
    margin-top:2px;         
    margin-left:120px;         
}         
div#download li{margin:0;padding:0;float: left;margin-right:-27px;margin-right:0 \9;}         
div#download li a          
{         
    border-right: 1px solid #CDCDCD;         
    color: #0093DC;         
    text-decoration: none;         
    display: block;         
    float: left;         
    font-size: 16px;         
    font-weight: 700;         
    height: 80px;         
    line-height: 80px;         
    padding-right:10px;         
    font-family: "Microsoft Yahei",微软雅黑,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;         
    overflow:hidden;         
    text-indent:40px;         
}              
div#download li a:hover          
{         
    color: red;         
}             
div#download li a.down         
{         
    background: url(images/custom/download_for_windows_h.gif) no-repeat 5px 22px;            
}              
div#download li a.down:hover         
{         
    background: url(images/custom/download_for_windows.gif) no-repeat 5px 22px;          
}            
div#download li a.down_mac         
{         
    background: url(images/custom/download_for_mac_h.gif) no-repeat 5px 22px;         
}             
div#download li a.down_mac:hover         
{         
    background: url(images/custom/download_for_mac.gif) no-repeat 5px 22px;          
}           
div#download li a.down_linux         
{         
    background: url(images/custom/download_for_linux_h.gif) no-repeat 5px 22px;          
}              
div#download li a.down_linux:hover         
{         
    background: url(images/custom/download_for_linux.gif) no-repeat 5px 22px;          
}              
div#download li a.demo         
{         
    background: url(images/custom/google_custom_search_h.gif) no-repeat 5px 22px;            
}            
div#download li a.demo:hover         
{         
    background: url(images/custom/google_custom_search.gif) no-repeat 5px 22px;          
}

2.使用方法

在发表日志时，选择文本编辑器调用，当然你也可以进一步改成短代码，代码中的下载地址至少保留一个

<div id="download">   
<div id="downloadline">   
<ul>   
     <li><a class="demo" href="http://kailiuwang.net" target="_blank">在线下载</a></li>   
     <li><a class="down_mac" href="http://kailiuwang.net" target="_blank">115网盘</a></li>   
     <li><a class="down_linux" href="http://kailiuwang.net" target="_blank">百度网盘</a></li>   
     <li><a class="down" href="http://kailiuwang.net" target="_blank">千易网盘</a></li>   
</ul>   
</div>   
</div>

3.下载样式所用到的图片

下载下方的压缩包文件，将压缩包中的背景图片download.PNG放入主题的images文件夹中，然后将压缩包中的 custom文件夹 放入images文件夹中。喜欢折腾的朋友可以把css中的图片的路径根据自己的实际需求进行更改！
下载地址：

这个用typecho

标签：下载, WordPress