Iframe框架在网站后台布局中经常用到
CSS层叠样式表就相当于给HTML文档穿上了漂亮的衣服
下面就这两个知识点实例写一下代码
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>Document</title> </head> <body> <h1>网站后台</h1> <ul style="float: left";> <li><a href="http://baidu.com" target="main">商品管理</a></li> <li><a href="http://qq.com" target="main">用户管理</a></li> <li><a href="http://163.com" target="main">分类管理</a></li> <li><a href="http://php.cn" target="main">权限管理</a></li> <li><a href="http://www.php.cn/blog/sandms.html" target="main">网站设置</a></li> </ul> <iframe frameborder="0" name="main" width="1200px" height="600px" style="float: left";></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Iframe框架使用<iframe>标签中的Target属性值连接到<a>标签中的name属性值，轻松实现最基本的框架布局
CSS层叠样式表的使用
实例
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
p{
color: blueviolet;
font-size: 20px;
}
.x{
color: chocolate;
font-size: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<p>你好PHP中文网</p>
<p class="x">你好朱老师</p>
<p style="color: cyan";>css内联样式</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS中最常用的引入方式有三种
1、通过Style标签:<style type="text/css" > css样式 </style>
2、使用内联标签:<p style="css样式"></p>
3、使用link标签从文档外部引入.css文件:<link rel="stylesheet" type="text/css" href=".css文件地址">
style内部样式写在HTML文档的<head>标签内。如果只有一个文档就可以使用内部样式
如果你想单独改变某个标签的属性就可以 使用内联样式，内联样式的优先级是最高的
如果你有多个文档都需要使用CSS。可以单独建立一个.css文件，然后通过link标签引入多个文档，减少代码量，提高开发效率
三种方式的优先级：内联样式>内部样式>外部样式
盒模型
在HTML中有很多标签元素都是一个“盒子”，我们可以通过一些属性来修改“盒子”的一些样式
margin外边距：margin有四个属性分别是margin-top上边距、margin-right右边距、margin-bottom下边距、
margin-left左边距。可以通过简写方式margin( 20px 20px 20px 20px );排列顺序：上右下左
padding内边距：padding也有四个属性分别是padding-top上边距、padding-right右边距、padding-bottom下边距、
padding-left左边距。可以通过简写方式padding( 20px 20px 20px 20px );排列顺序：上右下左
border边框：border也是有四个属性的分别是border-top上边框、border-right右边框、border-bottom下边框、
border-left左边框。
margin和padding都是透明的，border是可以通过一些属性来修改样式和颜色
