背景固定大小：
background:transparent url(../images/bot_search_hong.png) no-repeat scroll 50% 10px/18px 18px;
在线音乐：
http://mp3.13400.com:99/20131228/181.mp3
手机站开头自适应得写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport" id="viewport" />
1、<meta name="format-detection" content="telephone=no" />
说明：
1）使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch点击数字为存入联系人，iPhone为拨打电话），忽略将页面中的数字识别为电话号码。
2）若需要启用电话功能将 telephone=yes 即可，若在页面上面有Google Maps, iTune参考：http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html
3）-webkit-appearance: none; -moz-appearance: none; appearance:none;
2、 http://zxp.artron.net//resource/js/sha1.js js的sha1加密http://tool.chinaz.com/js.aspx
3、https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
4、超出的文字用......的写法：
http://m.blog.itpub.net/29870867/viewspace-1295450/
width:200px; whitespace:nowrap; overflow:hidden; text-overflow:ellipsis;
确定一下设置的高度能放下几行文字,假如有3行：
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
4、01圆弧形css写法：
.profit_wrap{
background: #F9F0DF;
min-height: 100vh;
position: relative;
.header_wrap{
height: 280px;
overflow: hidden;
position: relative;
text-align: center;
&::after{
width: 160%;
height: 280px;
position: absolute;
left: -30%;
top:0;
z-index: 1;
content: '';
border-radius: 0 0 50% 50%;
background:linear-gradient(142deg,rgba(255,217,140,1) 0%,rgba(255,207,109,1) 100%);
border-bottom:2.5px solid #F4C06D;
box-sizing: border-box;
}
}
5、CSS如何控制数字之间的间距距：
添加letter-spacing:2px; 多少像素可以自行调整。
6、图片垂直居中：
<p>
<a href="javascript:;">
</a>
</p>
<style>
p{ width:90%; height:300px; line-height:300px; border:1px solid #ccc; display:table; text-align:center;}
p a{ height:100%; vertical-align:middle; display:table-cell;}
p img{ max-height:100%; max-width:100%; vertical-align:middle; }
7、图片垂直居中：
http://m.blog.csdn.net/article/details?id=7615098
父级：{width:170px; height:170px; line-height:170px;text-align:center; vertical-align:middle; }
子级：{ max-height:100%;max-width:100%; vertical-align:middle; }
8、图片和文字在一起，
P{ height:18px; line-height:23px; text-align:center;}
img{ height: 18px; margin-right: 6px; vertical-align: top;}
不确定宽高 要求垂直居中
父级position: relative;
子级position: absolute; top: 50%; transform: translateY(-50%);
9、手机端，需要加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" id="viewport" />
10、input属性为只读模式：readonly="readonly"
<input type="text" name="country" value="China" readonly="readonly" />
11、PC端 居中
@media(max-width:1200px){
body{
width:1200px;
}
}
12、音乐播放及歌词
https://github.com/DIYgod/APlayer
http://aplayer.js.org/docs/
13、ios中input有默认样式iOS下的safari中有默认的按钮样式：
input[type=“button”], input[type=“submit”], input[type=“reset”]
{-webkit-appearance: push-button; white-space: pre;}s
-webkit-tap-highlight-color: transparent;
-webkit-appearance : none ;｝
12、全兼容，背景透明，文字不透明
<div class="demo"><p>背景透明，文字不透明：</p></div>
<style>
.demo{ padding: 25px; background-color: rgba(0,0,0,0.1); /* IE9标准浏览器 IE6和部分IE7内核浏览器(qq浏览器)会读懂 */
.demo p{ color: #FFFFFF;}
@media \0screen\,screen\9 {/*只支持IE6、7、8 */
.demo{background-color:#000000;
filter:Alpha(opacity=10);
position:static; /* IE6、7、8只能设置position:static(默认属性)，否则会导致子元素继承Alpha值 */
*zoom:1;/*激活IE6、7的haslayout属性，让它读懂Alpha */ }
.demo p{ position: relative;/*设置子元素为相对定位，可让子元素不继承Alpha值 */}
}
13、弹出层，背景为黑色透明，且禁止滚动；
//背景为全屏黑色透明
#rbz_bg{ background-color:#000; width:100%; height:100%; position:fixed; opacity:0.6; display:none; z-index:99; top:0;}
//弹出层
$(".r_but_clickable").click(function(){
$(".send_confirm").show();
$("#rbz_bg").show();
$("body,html").css({"height":"100%","overflow":"hidden"});
})
//点击背景以外得地方，复原
$("#bg").click(function(){
$(".send_confirm").hide();
$("#rbz_bg").hide();
$("body,html").css({"height":"auto","overflow":"auto"})
})
另一种方法：http://blog.csdn.net/hunannanhu/article/details/50592020
//禁止滚动
window.ontouchmove=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
}
document.body.style.overflowX=document.body.style.overflowY="hidden";
//继续滚动
window.ontouchmove=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=true;
e.stopPropagation && e.stopPropagation();
return true;
}
document.body.style.overflowX=document.body.style.overflowY="auto";
14、调整手机 兼容性
/* iphone4*/
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
.record_state{ margin-top:-6%;}
}
/* iphone5*/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
.record_state{ margin-top:-6%;}
}
/* iphone6竖屏*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
.record_state{ margin-top:-3%;}
}
/* iphone6 plus竖屏*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
.record_state{ margin-top:-2%;}
}
/* iPhone X 和 iPhone XS */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}
/* iPhone XR */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone XS Max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
}
@media screen and (device-width: 360px) and (device-height: 640px){
.record_state{ margin-top:-2%;}
}
@media screen and (device-width: 411px) and (device-height: 731px){
.record_state{ margin-top:-2%;}
}
@media screen and (device-width: 435px) and (device-height: 773px){
.record_state{ margin-top:-2%;}
}
针对iphoneX
js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
$(".phonex-pb").css("padding-bottom","34px");
}
15、返回顶部：
$(window).scroll(function () {
if($(window).scrollTop() >= 80) //距离顶部多少高度显示按钮
{
$('#goTopBtn').fadeIn(200);
}else{
$('#goTopBtn').fadeOut(200);
}
});
$('#goTopBtn').click(function(){
$('body,html').animate({scrollTop:0},500)
});
16、javascript大于40个后面用“...+查看详情”
/*判断超过40个 出现.....*/
var txtLength=$(".pro_detail p").html().length;
var relTxt=$(".pro_detail p").html().substring(0,40)
if(txtLength>40){
$(".pro_detail p").html(relTxt+"......"+' <a href="javascript:;" class="check_detail">查看详情</a>')
$(".check_detail").css("display","inline_block")
}
16、javascript请问如何获取下面li里面的img
<ul id="parent">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
var listImg=document.getElementById("parent").getElementsByTagName("img");//获取ul中的img返回一个对象数组
for(var i=0;i<listImg.length;i++){
listImg[i].onclick=function() {
alert("您点击的是"+this.getAttributeNode("src").nodeValue);}
}
**17、element 合并单元格
let spanRows = this.form.labelPageLocationDefs.reduce((a, c, ci, array) => {
let l = a[a.length - 1];
if (array[ci + 1] && c.pageId === array[ci + 1].pageId) {
a[a.length - 1] = l + 1;
} else if (array[ci + 1]) {
a.push(1);
}
return a;
}, [1]);
arraySpanMethod({
row, column, rowIndex, columnIndex
}) {
let index = this.spanRows.findIndex(it => rowIndex <= it);
if (columnIndex === 0 || columnIndex === 1) {
if (rowIndex === this.spanRows[index]) {
return { rowspan: this.spanRows[index + 1] - this.spanRows[index], colspan: 1 };
}
return { rowspan: 0, colspan: 0 };
}
return { rowspan: 1, colspan: 1 };
},
** 18 element 选择时间
<el-form-item
v-if="formData.showTimeType==='ABSOLUTELYT'"
label="标签展示时间段："
:rules="{
required: formData.showTimeType === 'ABSOLUTELYT',
message: '请选择时间段',
trigger: 'change'
}"
>
<el-date-picker
v-model="transactionTime1"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
},
transactionTime1: {
get() {
return [this.formData.shodwStartTime, this.formData.showEnTime];
},
set(val) {
if (val) {
[this.formData.shodwStartTime, this.formData.showEnTime] = val;
} else {
[this.formData.shodwStartTime, this.formData.showEnTime] = ['', ''];
}
}
}
},
