9月2日作业:
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>内联框架</title> </head> <body> <h2>内联框架的作业-后台框架</h2> <ul style="float: left;"> <li><a href="http://www.kaimaile.com" target="htmain">客户名单</a></li> <li><a href="http://www.kaimaile.com/rjzzq/" target="htmain">意向客户</a></li> <li><a href="http://www.kaimaile.com/zpzzq/" target="htmain">签约客户</a></li> <li><a href="http://www.kaimaile.com/rjdjnews-6844-7.html" target="htmain">业绩汇总</a></li> </ul> <p> <iframe srcdoc="<h3>牛逼的后台</h3>" frameborder="1" width="800" height="800" name="htmain" style="float: left;"></iframe> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示: css样式设置的优先级
CSS样式包括内联样式，内部样式和外部样式，分别在行内直接设置style，html文件头设置style以及通过link标签引入外部样式。
从优先级来说，内联样式>内部样式>外部样式
例子1：同时对P标签内容设置样式，可以看出内部样式显示红色，高于内部和外部样式，被优先显示。
实例
<!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="/css/style.css">
<title>样式表优先级</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<!-- <p>林志玲嫁了一个***人</p> -->
<p style=color:red>林志玲嫁了一个***人</p>
<!-- <p>苍老师是一个***人</p> -->
<p>苍老师是一个***人，未设置内联样式，看看优先显示蓝色的内部样式还是绿色的外部样式？</p>
<!-- <p>三上悠亜最红</p> -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 实例演示: css的id, class与标签选择器的使用规则
id 选择器 ，只能使用一次，在样式中级别最高，首先显示；
class 类选择器， 可以使用多次，在样式中级别次于id；
实例
<!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>CSS基本选择器</title>
<style>
/*id 选择器 ，只能使用一次，在样式中级别最高，首先显示*/
#red {
color: red;
}
/*class 类选择器， 可以使用多次，在样式中级别次于id */
.green {
color: green;
}
/*标签选择器，在样式中级别最低，除非没有id选择器和class类选择器*/
p {
color: royalblue;
}
</style>
</head>
<body>
<!-- 选择元素只会有两种可能： -->
<!-- 1、找到了，找到后会有2中可能： -->
<!-- 1.1 找到了1个； -->
<!-- 1.2 找到了多个； -->
<!-- 2、没找到： -->
<!-- 2.1 选择器语法错误； -->
<!-- 2.2 页面中不存在与选择器匹配的元素。 -->
<p id="red">买了MacBook的同学后悔了吗？</p>
<p class="green">学习css很简单</p>
<p class="green">我想会会高桥老师</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">
<style>
.p {
color: green;
}
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
padding: 20px 30px 40px 50px;
border-top: 10px solid rebeccapurple;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double black;
}
</style>
<title>盒子模型</title>
</head>
<body>
<div class="box1">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例