范仁義web前端介紹課程---4、html、css、js初體驗


范仁義web前端介紹課程---4、html、css、js初體驗

一、總結

一句話總結:

html:就是網站的骨架,比如div標簽、a標簽等
css:style標簽或者style屬性里面的就是css
js:頁面中的script標簽里面就是js代碼

 

 

 

二、html、css、js初體驗(百度為例)

課程對應的視頻地址:4、html、css、js初體驗
https://www.fanrenyi.com/video/1/4

 

 

1、html代碼

 

 

2、css代碼

 

 

 

 

 

3、js代碼

 

 

三、html、css、js配合小實例

1、效果圖

 

 

 

2、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="text-align: center;">
 9         <h1>點擊變色實例</h1>
10     </div>
11     <div>
12         <a id="my_a" href="https://www.baidu.com" style="color: red;">去百度</a>
13     </div>
14     <div>
15         <button id="myBtn" style="margin-top:15px;padding: 5px;background-color: darkseagreen; border-radius: 5px;color: #ffffff; ">點擊將上述文字變成藍色</button>
16     </div>
17     <script>
18         let myBtn=document.getElementById('myBtn');
19 
20         myBtn.addEventListener('click', change_color);
21         function change_color() {
22             let my_a=document.getElementById('my_a');
23             my_a.style.color='blue';
24         }
25 
26     </script>
27 </body>
28 </html>

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM