前端代码收集
经常写代码收集到了一些前端代码常用代码，经常复制粘贴，提高前端效率。感兴趣的朋友看一下。中间有用到amazeui框架
<table width="100%">
<tr>
<td>
<hr data-am-widget="divider" class="am-divider am-divider-dashed" />
</td>
<td class="am-text-center" width="200px">
这里放入你的文本这里放入你的文本
</td>
<td>
<hr data-am-widget="divider" class="am-divider am-divider-dashed" />
</td>
</tr>
</table>
在JS里面添加广告
console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
鼠标移上后出来小阴影
li:hover {
box-shadow: 0 1px 4px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
<div class="am-g">
<div class="am-sm-12">
</div>
<div class="am-u-sm-6">
</div>
<div class="am-u-sm-6">
</div>
</div>
am-padding-horizontal-
水平边距
am-padding-vertical-
垂直边距
slideToggle
slideUp
slideDown
@media screen and (max-width:360px) { /*当屏幕尺寸小于360px时，应用下面的CSS样式*/
s
}
@media screen and (min-width:360px) { /*当屏幕尺寸大于360px时，应用下面的CSS样式*/
}
am-text-truncate
{ word-wrap: normal; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}
{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.gsys-msg').slideToggle();
<ul class="am-avg-sm-3 am-thumbnails new_img1 new_img2 new_index2">
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></a></li>
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></li>
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></li>
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></li>
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></a></li>
<li><a><img src="${base!''}/public/images/zhi_pic_10.png"><p class="am-text-truncate">内容内容内容内容内容内容内容内容内容内容内容内容</p><span class="am-text-truncate">
￥<i>36.00</i></span></li>
</ul>
.qcfd:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
<i class="iconfont"></i> 打电话
苹果系统按钮初始化：
border-radius:0;appearance: button;-webkit-appearance: button;-moz-appearance: button;
阴影：
{box-shadow:0px 5px 5px #ccc}
webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
.jindutiao{ background-color:rgba(0,0,0,0.6); color:#ffffff;
border-radius: 2px;text-align:center;
font-size:1em; height:4em;width:4em; font-size:0.6em;
line-height:4em; display:inline-block; margin:0px auto ;
position:absolute;z-index:999; left:50%;
margin-left:-3em; top:50%; margin-top:-3em; padding-top:0.5em; }
.jindutiao img{ widterEncoding=UTF-8"
proxool.driver-url="jdbc:mysql://192.168.1.105:3307/yxc_scm234?useUnicode=true&characterEncoding=UTF-8"
proxool.driver-url="jdbc:mysql://192.168.1.115:3306/yxc_scmnew_20170215?useUnicode=true&characterEncoding=UTF-8"
img高度等于宽度//
<s cript type="text/javas cript">
$(function(){
var img = $(".attachment-thumbnail");
realWidth =img.width();//alert(realWidth);
realHeight = realWidth*0.8;
img.css({height:realHeight});
});
</s cript>
$.each($(".relationshop .prolist li .goodimg img"), function(){
$(this).height($(this).width());
});
为select下拉菜单添加滚动条
<select multiple="multiple" size="16" id="select" ondblclick="">
</select>
css3动画
.box-top ul li:hover .tm04 {
background: url(../images/icon.png) 0 -242px;
}
.box-top ul li .tm04 {
width: 32px;
margin: 14px 0 8px 0;
height: 32px;
float: left;
margin-left: 24px;
background: url(../images/icon.png) 0 -209px;
transition: all 0.2s ease 0s;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
