收藏
批改状态：合格
老师批语：你说得对, 要在实战中进步
内联框架<iframe>标签
内联框架主要用于在网页中显示另一个网页，相当于在网页中嵌套了一个网页，如下拉网页时浮动视频，后台操作系统框架页面。
<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> </head> <body> <h1>内联框架</h1> <ul style="float:left"> <li><a href="https://www.php.cn" target="main">产品管理</a></li> <li><a href="https://www.php.cn" target="main">新闻管理</a></li> <li><a href="https://www.php.cn" target="main">用户管理</a></li> <li><a href="https://www.php.cn" target="main">分类管理</a></li> </ul> <iframe srcdoc="<h1>CMS</h1>" frameborder="1" name="main" width="400" height="500"
style="float:left"></iframe> </body>
运行结果：
2.CSS基础知识
2.1 CSS引入方法 一般有三种：
元素属性 （内联样式）<p style="color:red"></p>
元素标签（内部样式）<style>p {color:red;}></style>
外部资源<link ref stylesheet href="style.css">
2.2 CSS基本语法
2.3 CSS选择器
1.标签选择器（如：body,div,p,ul,li）
2.类选择器（如：class=”head”,class=”head_logo”）
3.ID选择器（如：id=”name”,id=”name_txt”）
4.全局选择器（如：*号）
5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
6.继承选择器（如：div p,注意两选择器用空格键分开）
7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。
2.4 CSS 优先级别
排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承
2.5 CSS 盒模型
1.HTML页面上的一切可见元素皆可看做盒子
2.盒子默认都是块级元素：独占一行，支持宽度设置（根据盒子模型示意图分析）
3.盒子模型可以设置6个样式：宽高背景内外边距与边框
（1）：width：宽度（水平方向）
（2）：height：高度（垂直方向）
（3）：background-color：背景（默认透明）
（4）：padding：内边距，内容与边框之间的填充区域
（5）：margin：外边距，决定当前盒子与其它盒子之间的位置与关系
（6）：border：边框，位于内外边距之间，是可见元素，允许设置宽度，样式和颜色
4.根据是可见性可以分为二类：
（1）.可见的：width，height，border
（2）.透明的：background，padding，margin
5.盒模型样式规则：
（1）按老外习惯顺时针规则
<!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>
<!-- 由于比较简短就把CSS 和HTML写一页 -->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
padding: 20px 30px 40px 50px;
/* (顺时针：上 右 下 左) */
}
.box2{
height: inherit;
background-color:white;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.简化规则：
padding: 20px 30px; 上下20PX,左右30 PX
<!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>
<!-- 由于比较简短就把CSS 和HTML写一页 -->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: green;
padding: 20px 30px；30px;
/* (顺时针：上 20px, 左右 30px,下 30px) */
}
.box2 {
height: inherit;
background-color: white;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.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>
<!-- 由于比较简短就把CSS 和HTML写一页 -->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: green;
/* (顺时针：上 20px, 左右 30px,下 30px) */
padding: 20px 30px 30px;
/* 上边框 */
border-top: 10px solid red;
/* 右边框 */
border-right: 10px dashed green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
}
}
.box2 {
height: inherit;
background-color: white;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
HTML和CSS 知识比较多，只有慢慢在实战中熟悉和领会
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
