张宇_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:stickyfixed我感觉比较实用,JavaScript方面学起来有点吃力,主要是没有思路,对各种属性也不熟悉,所以实践时有点无从下手,我还是多练习练习吧。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1