1、iframe标签使用
实例
<!DOCTYPE html>
<html lang="zh">
<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 type="text/css">
ul{ margin-bottom: 20px;}
li{ float: left; list-style: none;}
li a{ display: inline-block; border: 1px solid red; padding: 10px 50px; text-decoration: none;}
iframe{ margin-top: 20px; margin: 0 auto;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.taobao.com" target="tar">淘宝</a></li>
<li><a href="http://www.baidu.com" target="tar">百度</a></li>
<li><a href="http://www.jd.com" target="tar">京东</a></li>
</ul>
<iframe srcdoc="请点击导航" width="80%" name="tar" height="500" ></iframe>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、css设置优先级
实例
<!DOCTYPE html>
<html lang="zh">
<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" type="text/css" href="css.css"/>
<title></title>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p style="color: blue;">CSS样式设置的优先级</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、css的id, class与标签选择器的使用规则
实例
<!DOCTYPE html>
<html lang="zh">
<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" type="text/css" href="css.css"/>
<title></title>
<style type="text/css">
#pro{ color: red;}
.prolist{ color: blue;}
p{ color: green;}
</style>
</head>
<body>
<p id="pro">产品列表</p>
<p class="prolist">苹果</p>
<p class="prolist">桔子</p>
<p class="prolist">香蕉</p>
<p class="prolist">猕猴桃</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、实例演示盒模型的五大要素: width, height, padding, border
实例
<!DOCTYPE html>
<html lang="zh">
<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" type="text/css" href="css.css"/>
<title></title>
<style type="text/css">
.div1{ width: 500px; height: 400px; border: 1px solid red;}
.div2{ width: 200px; height: 300px; padding: 20px 10px 5px; border: 1px dashed green;}
.div3{ background: red; width: 300px; height: 400px; border: 6px solid blue; margin-top: 40px;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">我是div2</div>
</div>
<div class="div3">我是div3</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例