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>iframe标签的实用</title> </head> <body> <ul> <li> <a href="https://www.baidu.com/" targen="main">百度</a> <a href="https://www.qq.com/" targen="main">腾讯</a> <a href="http://php.cn/ targen=" main ">PHP中文网</a> <a href="https://free.aliyun.com/ " targen="main ">阿里云</a> </li> </ul> <iframe src="https://free.aliyun.com/ " frameborder="1 " width="800 " height="800 " name="main "></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2 css样式优先级
内联样式style=> 内部样式<style>..</style> > 外部样式表 .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="css/style.css">
<title>css样式优先级</title>
<style>
p {
color: red
}
</style>
</head>
<body>
<p style="color: blue">我是内联样式 我优先级最高</p>
<p>我是内部样式 我的优先级比较高</p>
<p>我是外部样式 我的优先级最低</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.id、class与标签选择器的使用规则
标签<class<id<js
实例
<!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: black;
}
#red {
color: crimson;
}
.green {
color: pink;
}
.pink {
color: green;
}
.blue {
color: blue;
}
</style>
<title>选择器的优先级</title>
</head>
<body>
<p id="red" class="green">优先级</p>
<p class="blue">测试优先级</p>
<p class="pink">选择器的优先级</p>
<!-- 通过实例证明 优先级 id>class>p标签 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.实例演示盒模型的五大要素:
width, height, padding, border.
实例
<!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>
.box {
border: 3px dashed red;
width: 1100px;
height: 500px;
background-color: #b7c274;
}
.box1 {
width: 300px;
height: 300px;
padding: 100px 390px;
background-color: #444444;
border: 6px solid #886644;
}
.box2 {
width: 300px;
height: 300px;
background-color: #335544;
padding: 500px 0;
border: 6px solid #262626;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
padding: 0 900px;
}
</style>
<title>box</title>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</head>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例