JavaScript 01.Hello World!
阿新 • • 發佈：2022-03-25
1. 在瀏覽器中彈出警告框： alert(" xxxx") ;
2. 在瀏覽器中顯示內容：document.write("xxxx") ;
3. 向控制檯輸出一個內容：console.log("xxxx") ;
4. script 標籤有兩個作用，一是可以在裡面編寫程式碼，如alert等；二是像CSS中的 link 一樣，引入外部JS 程式碼；
5. 又自主來了一遍網易新聞列表，程式碼好像又有不同哈哈哈：
先上效果圖：
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>網易新聞列表</title> <link rel="stylesheet" href="C:\data\計算機學習\index3.html\02.CSS\reset.css.css"> <style> /* body{ } */ .news-wrapper{ height: 357px; width: 300px; margin: 50px auto; background-color:#fff; border-top: 1px #ddd solid; } .news-title a{ color: #404040; font-size: 16px; font-weight: bold; display: inline-block; border-top: 1px red solid; margin-top: -1px; padding-top: 8px; margin-bottom: 8px; }
.news-img h3{ color: #fff; font-size: 14px; font-weight: bold; margin-top: -20px; padding-left: 14px; }
.news-img { display: block; height: 150px; }
.news-list li a{ color: #666; font-size: 13px; } .news-list li{ margin-bottom: 8px; } .news-list li::before{ content: '■'; font-size: 12px; color: #ddd; }
.news-list a:hover{ color: red; }
</style> </head> <body> <div class="news-wrapper"> <h2 class="news-title"> <a href="#">體育</a> </h2> <a href="#" class="news-img"> <img src="C:\data\計算機學習\index3.html\02.CSS\圖片\螢幕截圖 2022-03-24 130942.png" alt=""> <h3>費德勒首負迪米 扶額搖頭不滿發揮</h3> </a>
<ul class="news-list"> <li> <a href="#">喬治:我愛LA 喜歡喝LBJ一起打球</a> </li> <li> <a href="#">格林:3年前降薪就在等KD 特製T恤嘲諷LBJ</a> </li> <li> <a href="#">塔克4000雙鞋讓保羅羨慕嫉妒 喬丹被震驚</a> </li> <li> <a href="#">CBA下季新賽制:常規賽4組迴圈 增至46輪</a> </li> </ul> </div> </body> </html>