收藏
批改状态：合格
老师批语：作业写完再提交
1、实例演示:<iframe>标签的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h4>iframe实例：</h4> <ul style="float: left; width: 100px;"> <li><a href="https://www.baidu.com" target="main">百度</a></li> <li><a href="https://www.qq.com" target="main">QQ</a></li> <li><a href="https://www.taobao.com" target="main">淘宝</a></li> <li><a href="https://www.alipay.com" target="main">支付宝</a></li> </ul> <iframe src="https://www.baidu.com" frameborder="1" width="580" height="500" name="main"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
2、实例演示: css样式设置的优先级：
（1）、内联样式（style=""）>内部样式（<style>）>外部样式（<link herf=".css文档"）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/style.css">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h4>css样式设计优先级：</h4>
<p>国庆节将举行阅兵仪式</p>
<p style="color: royalblue">母亲在哭泣</p>
<p>学生开学了</p>
<p>贸易战还在继续</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（2）、js>id选择器>class选择器>标签选择器。
3、实例演示: css的id, class与标签选择器的使用规则：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/style.css">
<title>Document</title>
<style>
/*id选择器*/
#red {
color: red;
}
/*类选择器*/
.green {
color: green;
}
/*标签选择器*/
p {
color: hotpink;
}
</style>
</head>
<body>
<h4>css的id、class与标签选择器的使用规则：</h4>
<p id="red">国庆节将举行阅兵仪式</p>
<p class="green">母亲在哭泣</p>
<p class="green">学生开学了</p>
<p>贸易战还在继续</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
width: 300px;
height: 300px;
padding: 10px;
border: 3px solid #000;
background-color: indianred;
}
ul>li {
width: 200px;
height: 30px;
margin: 15px;
padding: 5px;
background-color: green;
}
</style>
</head>
<body>
<h4>盒子五大元素：</h4>
<ul>
<li>最新标题1</li>
<li>最新标题2</li>
<li>最新标题3</li>
<li>最新标题4</li>
<li>最新标题5</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
