张宇_20210114张宇
知识点总结
1、定位
默认情况下是static,只是将元素放到文档布局流的正常位置，position:relative是相对于器正常情况下的位置进行定位，需要使用top,bottom,left,right属性来进行定位。position:absolute是相对于除了static定位以外的第一个父元素进行绝对定位，需要注意的是绝对定位的元素不再存在于文档布局流中。fixed定位是相对于浏览器视口进行固定。
**position:sticky可以设置一个阈值，当浏览器滚动到阈值点时进行固定。**
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
height: 1500px;
width: 1000px;
margin: 0 auto;
}
.top{
width: 300px;
height: 50px;
background-color: aqua;
margin: 0 auto;
margin-top: 100px;
position: sticky;
top:10px;
}
.right{
height: 150px;
width: 50px;
background-color: blueviolet;
position: fixed;
}
.box1{
height: 80px;
width: 600px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="top"></div>
<div class="right"></div>
</div>
</body>
</html>
2、JavaScript
实例1、实现时间的暂停和开始
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
</head>
<body>
<p id="timer"></p>
<hr />
<button onclick="start()">开始</button>
<button onclick="pause()">暂停</button>
<script type="text/javascript">
var timer;
function start(){
clearInterval(timer);
timer=setInterval(time,1000);
}
function time(){
var date = new Date();
var str = date.toLocaleString();
var p = document.querySelector("#timer");
p.innerText=str;
}
function pause(){
clearInterval(timer);
}
</script>
</body>
</html>
实例2、倒计时结束自动跳转页面
跳转.html
<html>
<head>
<meta charset="utf-8">
<title>页面1</title>
</head>
<body>
<p><span id="time">3</span>秒后跳转到<a href="跳转1.html">新页面</a></p>
<script type="text/javascript">
var num =document.querySelector("#time");
setInterval(jian,1000);
function jian(){
var num1=num.innerText-1;
if(num1 == 0){
location.href="跳转1.html";
}
num.innerText=num1;
}
</script>
</body>
</html>
跳转1.html
<html>
<head>
<meta charset="utf-8">
<title>页面2</title>
</head>
<body>
<p>我是新页面</p>
<button onclick="back()">返回</button>
<script type="text/javascript">
function back(){
location.href="跳转.html"
}
</script>
</body>
</html>
心得体会
今天CSS部分主要学习了关于元素定位的知识，其中position:sticky，fixed我感觉比较实用，JavaScript方面学起来有点吃力，主要是没有思路，对各种属性也不熟悉，所以实践时有点无从下手，我还是多练习练习吧。
点赞
评论留言