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>
<style>
iframe {
width: 100%;
height: 500px;
}
ul li {
float: left;
margin: 5px;
display: block;
}
</style>
</head>
<body>
<h2>iframe的使用方法</h2>
<div id="header">
<ul id="nav">
<li><a href="http://www.vttbga.com/" target="baidu">首页</a></li>
<li><a href="http://www.vttbga.com/aboutus/" target="baidu">公司简介</a></li>
<li><a href="http://www.vttbga.com/product/" target="baidu">产品大全</a></li>
<li><a href="http://www.vttbga.com/company-news/" target="baidu">新闻中心</a></li>
<li><a href="http://www.vttbga.com/contact/" target="baidu">联系我们</a></li>
</ul>
</div>
<div id="main">
<iframe srcdoc="内联框架iframe的使用方法" name="baidu"></iframe>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.css设置的优先级对比
内联样式>内部样式>外部样式（还有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">
<title>css优先级的演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
color: blue;
}
</style>
</head>
<body>
<h2>css样式设置的三种方式</h2>
<p style="color: blueviolet;">1.内联样式：设置在html标签内，用style=""</p>
<p>2.内部样式：设置在html文档头部，用标签sytle进行设置</p>
<p>3.外部样式：用外部css文件设置，用标签link引入</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.css的三种选择器的使用方法
标签选择器直接用标签
类选择器用圆点+类名称
id选择器用#+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的id、类、标签选择器的使用方法</title>
<style>
/**标签选择器**/
p {
color: blue;
font-size: 10px;
}
/**类选择器，用圆点**/
.lei {
color: blueviolet;
font-size: 15px;
}
/**id选择器用#号**/
#wid {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>我是标签控制的</p>
<p class="lei">我是用类控制的</p>
<p id="wid">我是用ID控制的</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.盒模型的5大要素
五大要素有：width height padding border marin
简写是的顺序是顺时针
实例
<!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>
<style>
.box1 {
width: 500px;
height: 300px;
border: 3px solid red;
background-color: blueviolet;
}
.box2 {
width: 300px;
height: 200px;
background-color: aqua;
border: 10px double blue;
padding: 5px 10px 20px;
margin: 50px 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
写代码种的问题总结：
1.去掉无序列表前面的黑点用 display:block;
2.外部样式的调用格式
实例
<link rel="stylesheet" type="text/css" href="style.css">
3.盒模型的五大要素有width height padding border margin