THE FOURTY-FOUTH DAY

最新推荐文章于 2018-04-26 22:16:22 发布

aizaiee

最新推荐文章于 2018-04-26 22:16:22 发布

阅读量144

点赞数 1

分类专栏：培训日记

本文链接：https://blog.csdn.net/aizaiee/article/details/80030143

版权

培训日记专栏收录该内容

49 篇文章 0 订阅

订阅专栏

今天星期六，参加培训的第四十四天，没有别的什么，五点起床抽武则天，然后，办理退钱失败，就没有睡觉的心情了，所以起床没吃饭，就到教室了，然后还是在弄退钱的事情，一直没有成功，没有什么了，没有办法的事情，唉，纠结，就这样吧。没有什么好说的了。

今天也没有别的什么，就将随便写的代码贴上吧。

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; */
}

aizaiee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
THE FOURTY-FOUTH DAY

今天星期六，参加培训的第四十四天，没有别的什么，五点起床抽武则天，然后，办理退钱失败，就没有睡觉的心情了，所以起床没吃饭，就到教室了，然后还是在弄退钱的事情，一直没有成功，没有什么了，没有办法的事情，唉，纠结，就这样吧。没有什么好说的了。今天也没有别的什么，就将随便写的代码贴上吧。html:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt...
复制链接

扫一扫

专栏目录