基本知识点
<div class=”box”>
<img class=”img”/>
</div>
.box{ position: relative;}
.img{ width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
Jquery中的text() html() val()区别
Text() 设置或返回被选元素的文本内容
Html() 返回或设置被选元素的内容，包括标签
Val() 返回或设置被选元素的值 （元素的值是通过value属性设置的，该方法大多用于input元素）
Input点击后不要出现轮廓框 outline:medium
标签前后一些小图标可以用伪类（伪类元素不能事件函数）
P::before{ content:””;
Border-style:solid;
Width: }
标签用h,去掉H的加粗用 font-weight:normal
Calc(100% - 10rem) 计算变动的宽高
Display:flex; //设置弹性布局
Justify-content:center; //水平居中
Align-items:center: //垂直居中
P块标签内容超出长度就影藏
display: block; //转换为块标签
overflow: hidden; //当前元素内的内容溢出的时候影藏溢出的部分
text-overflow: ellipsis;
white-space: nowrap;
P块标签内容显示两行超出长度就影藏
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
P标签的内容不换行时用
word-break: break-all;
input-button按钮变60秒倒计时（也可以用span标签）
var wait = 60;
function time(o) {
if(wait == 0) {
o.removeAttribute("disabled");
o.value = "获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value = wait + "秒后重新获取";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
document.getElementById("btn").onclick = function() {
time(this);
}
标签位置在页面固定 position:fixed;
Tab标签 .hover {color: #2395FF;
border-bottom: 0.2rem solid #2395FF;
}
<ul id=”ul1”>
<li class=”hover”><li>
<li><li>
</ul>
<div id="tabs">
<div class="tab" style="display:block;"> </div>
<div class="tab"></div>
<div class="tab">第三部分</div>
<div class="tab">第四部分</div>
</div>
$(function(){
$("#ul1 li").on("click",function(){
$(this).addClass("hover").siblings("li").removeClass("hover");
var index=$(this).index();
$("#tabs div").eq(index).show().siblings(".tab").hide()
})
})
css三角形 border-style:solid;
Border-color:#DCDCDC transparent transparent transparent;
页面加载后自动刷新的方法
在页面开头加上代码
<script type="text/javascript">
function fresh() {
if(location.href.indexOf("?reload=true") < 0) {
location.href += "?reload=true";
}
}
setTimeout("fresh()", 50)
</script>
Input 和 textarea中的placeholder属性设置文字颜色和字号（可以在冒号前面写input和textarea）
::-webkit-input-placeholder{/*Webkit browsers*/
color:#999;
font-size:16px;
}
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/
color:#999;
font-size:16px;
}
::moz-placeholder{/*Mozilla Firefox 19+*/
color:#999;
font-size:16px;
}
:-ms-input-placeholder{/*Internet Explorer 10+*/
color:#999;
font-size:16px;
}
跳转时重新打开一个页面
window.open("systemversion.html");
标签内的文本左右对齐
text-align: justify;
text-justify: inter-ideograph;
如何将一张图片自适应铺满在Html网页中?
<body
background=“这里是你要使用的图片的路径”
style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div> <img>
div{width:100%;height:100%;position:absolute;}
微信浏览器播放video自动全屏问题
微信浏览器用的是chrome的内核 播放会自动将视频全屏
要解决问题需要在video标签中添加如下内容
webkit-playsinline="true"
x-webkit-airplay="true"
playsinline="true"
解决安卓部分浏览器问题的时候需要加上x5-playsinline
P标签内的文字占两行，多余的影藏，再加省略号
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
自动换行 属性
word-break: normal|break-all|keep-all;
|
normal |
使用浏览器默认的换行规则。 |
|
break-all |
允许在单词内换行。 |
|
keep-all |
只能在半角空格或连字符处换行。 |
Select option 后台获取到的数据显示的问题
if(jibenInfo.Records[0].cus_sex=="男"){
$('#sex option:nth-of-type(2)').attr("selected","selected");
}else{
$('#sex option:nth-of-type(1)').attr("selected","selected");
};
attr在iOS上不兼容，可以换成prop
jQuery实现删除节点（HTML代码）的用法
$("#list li").remove();
弹窗出现后自动多少秒后消失用的方法
setTimeout()
setTimeout(function(){alert("Hello"); }, 3000);
$(".underDev").click(function() {
$("#tishin").fadeIn(); //淡入效果
setTimeout(function(){ //自动多少秒后消失 $("#tishin").fadeOut(); //淡出效果
},1200)
})
浙公网安备 33010602011771号