1.实例演示:<iframe>标签的使用
<h2>常用网页</h2> <ul style="float:left"> <li> <a href="https://baidu.com" target="main">百度一下</a></li> <li> <a href="https://www.csdn.net/" target="main">CSDN论坛</a></li> <li> <a href="https://www.php.cn" target="main">PHP中文网</a></li> <li> <a href="https://www.php.cn/blog/blsllf.html" target="main">捩花博客</a></li> </ul> <iframe src="https://www.php.cn/blog/blsllf.html" frameborder="" width="400" height="500" name="main" style="float: left"></iframe>
2.实例演示: css样式设置的优先级
<head>
<meta charset="UTF-8">
<title>样式表优先级，越具体的样式级别越高</title>
<!-- 优先级：内联>内部>外部 -->
<!-- 外部样式表-->
<link rel="stylesheet" href="css/style1.css">
<!-- 内部样式 -->
<!-- 将元素的样式规则用style标签插入到当前的html文档head标签中 -->
<!-- 这个样式规则，仅适用于当前的这个HTML文档 -->
<style>
p {
color: green;
}
</style>
</head>
<body>
<!-- 内联样式 将元素样式使用style属性应用到当前的元素，只适用于当前标签 -->
<h1>CSS是什么</h1>
<h2>层叠样式表，控制布局和元素的显示排列</h2>
<h2>如何引入CSS到HTML文档中</h2>
<p style="color:red">这段话引用了内联样式</p>
<p>这段话引用了内部样式</p>
</body>运行实例 »
3. 实例演示: css的id, class与标签选择器的使用规则
<head>
<meta charset="UTF-8">
<title>CSS基本选择器及其优先级</title>
<style>
/* ID选择器 */
#red {
color: red;
}
/* 类选择器 */
.green {
color: green;
}
/* 标签选择器 */
p {
color: aqua;
}
</style>
</head>
<body>
<p id="red">ID选择器</p>
<p class="green">类选择器</p>
<p>标签选择器</p>
<p>使用JS进行属性控制</p>
<script>
document.getElementsByTagName('p').item(3).style.color = ' blue';
</script>
<!-- 优先级 标签< class< id < js -->
</body>运行实例 »
4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
实例
<head>
<meta charset="UTF-8">
<style>
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
margin-left: 20px;
padding: 20px 30px;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid black;
}
.box2 {
width: 200px;
height: 200px;
margin: 20px 0px 0px 20px;
background-color: brown;
padding: 20px 30px;
border: 10px solid red;
}
</style>
<title>盒模型五大要素演示</title>
</head>
<body>
<h2>属性演示及内容区空间举例</h2>
<div class="box1">
</div>
<div class="box2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567498199338&di=4aba9523b3344cc4df46ca2b968e5a79&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fphoto%2F0001%2F2010-04-17%2F64EFS71V05RQ0001.jpg" alt="" width="100%" height="100%">
</div>
</body>运行实例 »