开通了一个淘宝店铺，觉得页面有点单调，想要添加一些圆角啊悬停变化之类的css效果。淘宝的店招以及导航条可以有限的使用css，而其他模块css功能是需要另行付费的，一年的使用价格是2400元。对于一个营收尚未过千的小店来说，这个价格有点高的离谱，于是想尝试用自定义模块加行内css的方式。
hover的行内写法
在csdn上找到了这样一个范例，可以实现行内实现按钮变色，迫不及待的放淘宝上测试了一下，结果淘宝愣是把其中的“onmouseover”等语句强制清理掉了。
<a href="##">
<button style=
"width: 200px;height: 60px;font-size: 25px;color: #FFF;background-color: #F90;border: 0;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;"
onmouseover="this.style.cssText=
'width: 200px;height: 60px;font-size: 25px;color: #000;background-color: lightblue;border: 0;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'
"
onmouseout="this.style.cssText=
'width: 200px;height: 60px;font-size: 25px;color: #FFF;background-color: #F90;border: 0;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'">
测试按钮
</button>
</a>自定义模块中被淘宝阉割掉的代码：
<a> <button style="width:200px;height:60px;font-size:25px;color:#FFF;background-color:#F90;border:0;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;"> 测试按钮 </button> </a>看来暂时还是只能在站点上点缀一些静态的图片了。
淘宝详情页
淘宝详情页的预览效果是支持类似这样的写法的，所以博主兴致勃勃的写了这么一段代码：
<div onmouseout="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;'" onmouseover="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px;background:linear-gradient(135deg,lightyellow 20%,orange 100%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 8px;'" style="width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;">
<h4 style="text-align: center; opacity:0.8"><span style="font-family:microsoft yahei;"><span style="font-size:18px;padding:6px;color:#333"><strong>在线教程</strong></span></span></h4>
<hr style="background-image: repeating-linear-gradient(-45deg, #e90 0, #e90 8%, transparent 0, transparent 10%, #1989fa 0, #1989fa 18%, transparent 0, transparent 20%); border:none; height: 2px;" /></div>
<div onmouseout="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;'" onmouseover="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightyellow 20%,orange 100%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 8px;'" style="width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;">
<h4 style="text-align: center; opacity:0.8"><span style="font-family:microsoft yahei;"><span style="font-size:18px;padding:6px;color:#333"><strong>案例翔实</strong></span></span></h4>
<hr style="background-image: repeating-linear-gradient(-45deg, #e90 0, #e90 8%, transparent 0, transparent 10%, #1989fa 0, #1989fa 18%, transparent 0, transparent 20%); border:none; height: 2px;" /></div>
<div onmouseout="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;'" onmouseover="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px 10px;background:linear-gradient(135deg,lightyellow 20%,orange 100%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 8px;'" style="width: 180px; height: 320px; border-radius: 12px; float: left; margin: 60px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;">
<h4 style="text-align: center; opacity:0.8"><span style="font-family:microsoft yahei;"><span style="font-size:18px;padding:6px;color:#333"><strong>分步讲解</strong></span></span></h4>
<hr style="background-image: repeating-linear-gradient(-45deg, #e90 0, #e90 8%, transparent 0, transparent 10%, #1989fa 0, #1989fa 18%, transparent 0, transparent 20%); border:none; height: 2px;" /></div>
<div onmouseout="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;'" onmouseover="this.style='width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightyellow 20%,orange 100%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 8px;'" style="width: 180px; height: 320px; border-radius: 12px; float: left; margin: 0px 0px 0px 10px;background:linear-gradient(135deg,lightblue 20%,blue 200%); box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 4px;">
<h4 style="text-align: center; opacity:0.8"><span style="font-family:microsoft yahei;"><span style="font-size:18px;padding:6px;color:#333"><strong>退货无忧</strong></span></span></h4>
<hr style="background-image: repeating-linear-gradient(-45deg, #e90 0, #e90 8%, transparent 0, transparent 10%, #1989fa 0, #1989fa 18%, transparent 0, transparent 20%); border:none; height: 2px;" /></div>几经调试呀，正式提交的时候页面展示的却是一片空白的背景，鼠标悬停效果当然也无法实现。所以，做这类详情页，建议大家还是使用图片格式的吧。
