HTML内联框架标签 常用于后台管理
<iframe src="" frameboeder=“边框大小”name="属性值与target对应"></iframe>
<a href="http://www.baidu.com/" target="对应的name属性值" ></a>
iframe标签可设置宽带width 高度height 属性默认值srcdoc=“”
<iframe src="网站网址" frameboeder=“边框大小” name="属性值需与target对应"></iframe> <a href="http://www.baidu.com/" target="与name对应属性值iframe标签可设置宽带width 高度height 属性默认值srcdoc=“”
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe标签的使用</title> </head> <body> <div> <ul> <li><a href="http://www.kp980.com/dianying/dengyuediyiren/" target="video">登月第一人</a></li> <li><a href="http://www.kp980.com/dianying/vzichoushadui/" target="video">V字仇杀队</a></li> <li><a href="http://www.kp980.com/dianying/heianta/" target="video">黑暗塔</a></li> <li><a href="http://www.kp980.com/dianying/yongganzheyouxi_juezhanconglin/" target="video">勇敢者游戏</a></li> <li><a href="http://www.kp980.com/dianying/zuihoudewushilieren/" target="video">最后的巫师猎人</a></li> </ul> <iframe srcdoc="<h3>默认播放器</h3>" frameborder="1" name="video" width="1280" height="960"></iframe> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS基础总结 层叠样式表
CSS设置HTML元素在文档中的布局与显示方式
CSS必须用标签引入HTML
基本语法
整一个为样式声明
p{ /*p为选择题*/
color:red;
font-size:18px; →样式规则
}1.在标签用属性来设置元素的样式(内联样式)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式及优先级</title> </head> <body> <div> <div style="background-color:yellow;color:red;width: 200px;height: 200px;">内联样式</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 内部样式: style标签 放在head标签里（仅对当前html文档有效）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式及优先级</title>
<style>
p{
background-color: black;
color:green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<!-- <div style="background-color:yellow;color:red;width: 200px;height: 200px;">内联样式</div> -->
<p>内部样式</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.外联样式：在文档的头部用link标签以外部链接的方式引入
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式及优先级</title>
<!-- <link rel="stylesheet" href="css样式表"> -->
<!-- 假装此处是外部样式表 -->
<style>
p{
background-color: red;
color:green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<!-- <div style="background-color:yellow;color:red;width: 200px;height: 200px;">内联样式</div> -->
<p>外部样式</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS样式优先级
内联样式>内部样式>外部样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式及优先级</title>
<link rel="stylesheet" href="style.css">
<style>
div{
background-color:black;
color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div style="background-color:blue;color:#fff;width: 200px;height: 200px;">内部样式</div>
<div>内联样式</div>
<div>外联样式</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS选择器优先级
优先级: id > class > tag*/
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式优先级1</title>
<style>
div{
background-color: black;
color: red;
width: 200px;
height: 200px;
}
#blue{
background-color: blue;
color: black;
width: 200px;
height: 200px;
}
.green{
background-color: green;
color:blue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<div id="blue">
id选择器
</div>
<div>标签选择器</div>
<div class="green">类选择器</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS样式规则与盒模型
按顺时针 上右下左排列
（透明，只有宽度属性）内边距padding-top right bottom left
（透明，只有宽度属性）外边距margin-top right bottom left
（不透明，宽度，样式，前景色）边框 border-top right bottom left