今天星期六,参加培训的第四十四天,没有别的什么,五点起床抽武则天,然后,办理退钱失败,就没有睡觉的心情了,所以起床没吃饭,就到教室了,然后还是在弄退钱的事情,一直没有成功,没有什么了,没有办法的事情,唉,纠结,就这样吧。没有什么好说的了。
今天也没有别的什么,就将随便写的代码贴上吧。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/TestDiv.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/TestDiv.js"></script>
</head>
<body>
<div>
<div id="test">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div id="tableContent">
<div id="tableRow">
<div class="tableCell">
<span>
hello,Insert title here
</span>
</div>
<div class="tableCell">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="tableCell">
<video controls poster="../images/IndexBackground.jpg" loop src="../video/1.mp4"></video>
<!-- <img src="../images/IndexBackground.jpg" alt="一个图片" /> -->
</div>
</div>
</div>
</div>
</body>
</html>
js:
/**
*
*/
$(function(){
var $win = $(window);//将浏览器加入缓存中
//var $do = $('#test');//将你要改变宽度的div元素加入缓存中
var win = $win.outerWidth()//首先获取浏览器的宽度
var newW = $win.outerWidth();
//$do.outerWidth(Math.abs(win-newW));
//alert(newW);
if(newW<900){
$("#test").hide();
// $("#tableContent").css("margin-left","30px");
}
$win.resize(function(){
//浏览器变化宽度的动作。
var newW = $win.outerWidth();
//$do.outerWidth(Math.abs(win-newW));
//alert(newW);
if(newW<900){
$("#test").hide();
// $("#tableContent").css("margin-left","30px");
}
if(newW>900){
$("#test").show();
// $("#tableContent").css("margin-left","60px");
}
})
})
css:
@charset "UTF-8";
#tableContent{
margin-left:60px;
display:table;
border-spacing: 0px;
margin-left:auto;
margin-right:auto;
/* float:left; */
}
#tableRow{
display: table-row;
}
.tableCell{
display:table-cell;
padding:0px;
vertical-align:top;
}
#test{
width:50px;
float:left;
/* position:absolute; */
}