WordPress博客下载样式分享

2011-11-23 12:11:00 作者： 所属分类：WordPress 阅读：882 评论：16

标签： , , ,

最近更新站点，搞了个下载的样式，分享下。先上图：

来跟我一起实现吧：

I.在Style.css中加入如下的CSS代码：

Code
  1. div#download    
  2. {   
  3.     background: url(images/download.png) no-repeat;    
  4.     height:79px;   
  5.     margin:25px 5px 15px 25px;   
  6.     border:solid 1px white;   
  7.     list-style-type:none;   
  8.     width:700px;   
  9. }   
  10. div#download ul    
  11. {   
  12.     list-style: none outside none;   
  13.     margin: 0;   
  14.     padding: 0;   
  15.     width: 10000px;   
  16.     list-style-type:none;   
  17. }   
  18. div#downloadline   
  19. {   
  20.     overflow: hidden;   
  21.     border-left: 1px solid #CDCDCD;   
  22.     width:500px;   
  23.     height:75px;   
  24.     margin-top:2px;   
  25.     margin-left:120px;   
  26. }   
  27. div#download li{margin:0;padding:0;float: left;margin-right:-27px;margin-right:0 \9;}   
  28. div#download li a    
  29. {   
  30.     border-right: 1px solid #CDCDCD;   
  31.     color: #0093DC;   
  32.     text-decoration: none;   
  33.     display: block;   
  34.     float: left;   
  35.     font-size: 16px;   
  36.     font-weight: 700;   
  37.     height: 80px;   
  38.     line-height: 80px;   
  39.     padding-right:10px;   
  40.     font-family: "Microsoft Yahei",微软雅黑,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;   
  41.     overflow:hidden;   
  42.     text-indent:40px;   
  43. }   
  44.   
  45. div#download li a:hover    
  46. {   
  47.     color: red;   
  48. }   
  49.   
  50. div#download li a.down   
  51. {   
  52.     background: url(images/custom/download_for_windows_h.gif) no-repeat 5px 22px;      
  53. }   
  54.   
  55. div#download li a.down:hover   
  56. {   
  57.     background: url(images/custom/download_for_windows.gif) no-repeat 5px 22px;    
  58. }   
  59.   
  60. div#download li a.down_mac   
  61. {   
  62.     background: url(images/custom/download_for_mac_h.gif) no-repeat 5px 22px;   
  63. }      
  64.   
  65. div#download li a.down_mac:hover   
  66. {   
  67.     background: url(images/custom/download_for_mac.gif) no-repeat 5px 22px;    
  68. }   
  69.   
  70. div#download li a.down_linux   
  71. {   
  72.     background: url(images/custom/download_for_linux_h.gif) no-repeat 5px 22px;    
  73. }   
  74.   
  75. div#download li a.down_linux:hover   
  76. {   
  77.     background: url(images/custom/download_for_linux.gif) no-repeat 5px 22px;    
  78. }   
  79.   
  80. div#download li a.demo   
  81. {   
  82.     background: url(images/custom/google_custom_search_h.gif) no-repeat 5px 22px;      
  83. }   
  84.   
  85. div#download li a.demo:hover   
  86. {   
  87.     background: url(images/custom/google_custom_search.gif) no-repeat 5px 22px;    
  88. }  

 

然后把下面压缩包中的背景图和几枚图标下载后，将custom文件夹放到images文件夹下。

只下载一个就可以了,主要还是看看其他的样式吧~~~

 

PS:样式代码已更新已完全兼容IE6以上浏览器！

» 郑重声明：本文由IT伯伯发布，所有内容仅代表个人观点。版权归IT伯伯和IT伯伯共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。
【上一篇】
【下一篇】

目前有 16 条留言 其中：访客:9 条, 博主:7 条

  1. 乐裕木 CHINA Internet Explorer Windows : 2012年04月23日11:17:37 7楼 @回复 回复

    看起开下载样式不错哦

  2. 末鱼 CHINA Google Chrome Windows : 2012年03月16日19:02:15 6楼 @回复 回复

    博主，背景图啥没找到呢？

  3. 殁漂遥 CHINA Google Chrome Windows : 2011年12月21日22:17:08 5楼 @回复 回复

    你好，请问我这个下载样式，怎么把字放在中间合适的位置呢？

    我不懂。谢谢啦！

    预览页面：http://www.mopiaoyao.com/downloadbutton.html

  4. 殁漂遥 CHINA Google Chrome Windows : 2011年12月21日20:19:07 4楼 @回复 回复

    :?: RR9lu.png

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月21日21:55:08 @回复 回复

      你用的浏览器是什么？ :?:

  5. 殁漂遥 CHINA Google Chrome Windows : 2011年12月21日20:18:34 地板 @回复 回复

    留言是种美德，写点什么…RR9lu.png

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月21日20:22:25 @回复 回复

      样式问题。。需要调调呢~~ :smile:

  6. 殁漂遥 CHINA Google Chrome Windows : 2011年12月21日19:46:28 板凳 @回复 回复

    至今没学会的路过 :?:

  7. 老Z CHINA Google Chrome Windows : 2011年12月18日17:06:22 沙发 @回复 回复

    好好学习CSS，自己也去弄一个。

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月18日19:15:35 @回复 回复

      呵呵，这个还是比较简单的~ :razz:

给我留言


插入图片

页面载入中..

展开