前端基礎(chǔ)知識及導(dǎo)航下拉菜單腳本

元素定位

在style中用position屬性來實(shí)現(xiàn)元素定位
—position的值：

• 除static屬性外，其它三種定位均可以通過 “l(fā)eft”、 “top”、 “right”、 “bottom” 屬性進(jìn)行設(shè)置具體定位值或偏移值
• 常用單位：px絕對像素單位 vh相對對象單位（可以理解相對百分比）

a標(biāo)簽的功能

1. 打開一個網(wǎng)站
   示例代碼：

   <a href="https://php.cn" target="_self">php.cn</a>

2. 文件預(yù)覽或下載

   <!--  預(yù)覽style.css -->
    <a href="style.css" target="_blank">css文件</a>  
   <!--下載demo1.zip -->
    <a href="demo1.zip" target="_blank">zip文件</a>

3. 發(fā)郵件

   <a href="mailto:12345678@qq.com" target="_blank">發(fā)郵件</a>

4. 打電話

   <a href="tel:13888888888" target="_blank">13888888888</a>

5. 跳轉(zhuǎn)錨點(diǎn)

    <a href="#hello">跳轉(zhuǎn)到hello</a>
    <h1 id="hello" style="margin-top: 1000px;">Hello world</h1>
    <a href="#">跳轉(zhuǎn)到首頁</a>
    <h1 id="#">回到首頁</h1>

對象事件

對象常用的三種事件添加方法

1. 對象內(nèi)添加

   <!-- this代表當(dāng)前對象 -->
   <button onclick="console.log(this.innertext)">按鈕1</button>

2. 對象屬性方式，在script中添加

   <!-- this代表當(dāng)前對象 -->
    <button >按鈕2</button>
    <button >按鈕3</button>
    <script>
        // <!-- 對象屬性方式添加事件 只有最后一次有效的，同名事件彼此覆蓋-->
        document.querySelectorAll('button')[1].onclick=function(){
            console.log("第一次點(diǎn)擊");
        };
         document.querySelectorAll('button')[1].onclick=function(){
            console.log("第二次點(diǎn)擊");
        }
    </script>

3. 事件監(jiān)聽器，在script中使用addEventListener

        const btn3=document.querySelectorAll('button')[2];
        // btn3.addEventListener(事件類型，事件方法)，可以給一個元素多次添加 同一個事件，并且可以自定義事件的觸發(fā)階段
        btn3.addEventListener('click',function(){
            console.log("第一次點(diǎn)擊");
        });
        btn3.addEventListener('click',function(){
            console.log("第一次點(diǎn)擊");
        }

導(dǎo)航下拉菜單腳本

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：這個案例目前有點(diǎn)超前了， 大家先有點(diǎn)感覺吧