首页
外贸B2C模板开发
zencart 开发
Magento开发
经典客户案例
zencart 报价
外贸主机
联系我们
 
 
首页 ::  Magento开发 ::  Magento SEO优化 ::  为Magento创建CSS按钮替代图片按钮
 
为Magento创建CSS按钮替代图片按钮

  作者: Magento   |   2011-03-04     阅读次数:1859     关键字:最完善的Magento二次开发


如何把图片按钮用CSS控制的按钮替换。对比图片按钮来说,CSS按钮具有非常明显的优点。下载一些图片,保存下面这个图片到你的magento目录 skin/frontend/default/default/images 我们用购物车里的“结账“(Proceed to Checkout)图片按钮来举例。(购物车shopping cart的phtml文件可以在app/design/frontend/default/default/template/checkout/onepage/link.phtml 这里找到) 图片按钮(Image button)的HTML代码

“>” alt=”"/>

CSS 按钮的HTML代码 - 仅通过改变背景来修改按钮的风格

“>
__(’Proceed to Checkout’);?>

用CSS button的HTML’代码替换图片按钮的HTML代码.CSS代码:

.btn-checkout {
display:block;
float:right;
background:transparent url(’/../images/btn_proceed_to_checkout_rad.gif’) no-repeat 100% 0;
font-size:15px;
font-weight:bold;
padding-right:8px;
}
.btn-checkout, .btn-checkout:hover {
color:#fef5e5;
text-decoration:none;
}
.btn-checkout span {
display:block;
padding:0 17px 0 25px;
background:transparent url(’/../images/btn_proceed_to_checkout_bg.gif’) no-repeat;
line-height:40px;
}
复制代码

And there you have it! - An all CSS-powered button. 补充说明,上面的代码在V1.7里不好用,所以更改link.phtml 这个代码为:

__(’Proceed to Checkout’)?>






Magento SEO优化的相关新闻


更早的新闻

 
 
 
外贸网站模板  |  关于我们  |  核心技术  |  人才招聘  |  帮助中心  |  zencart下载  |  付款方式  |  公司地图  |  联系我们


粤ICP备15004589号
深圳市迅捷网络技术有限公司 Copyright © 2004-2016 All Rights Reserved. 版权所有
总公司:深圳市龙华新区民治街道人民路中航天逸大厦A3栋15层     网址:www.zencart-cn.com  电话:0755-28107785
分公司:惠州市惠城区港惠新天地商业大厦2B栋19层 网址:www.0752web.com 电话:0752-2695554  2065565
全国服务热线:137 14307967   售后服务热线:159 19478387 客服QQ: 1512144 408079953 MSN:szsun@msn.com