微信扫一扫打赏支持

范仁义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>

 

 

 

 
posted @ 2019-11-30 14:44  范仁义  阅读(520)  评论(0)    收藏  举报