JavaScript 01.Hello World!
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>
浙公网安备 33010602011771号