内联框架<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 知识比较多,只有慢慢在实战中熟悉和领会