HTML04——框架（帧窗口）技术_div+css网页布局_块/行标签

最新推荐文章于 2023-05-09 20:19:15 发布

rjbp40ht

最新推荐文章于 2023-05-09 20:19:15 发布

阅读量335

点赞数 1

分类专栏： HTML 文章标签： html css web

本文链接：https://blog.csdn.net/qiao39gs/article/details/107720592

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

框架（帧窗口）技术

帧窗口是一种复杂的页面技术，应用帧技术可以使得用户在同一个浏览器中，浏览不同的页面，并且各个页面之间相互联系，并且能够相互访问和进行操作。

实现思路
- 将浏览器的窗口按照不同的功能分割成多个小窗囗，每个窗口对应自己的HTML页面，按照一定的方式组合起来，实现特殊的效果
应用场景
- 网站后台操作界面
- 内容层级明确的页面
缺点
- 页面布局比较复杂，效率没有单页面高，对搜索引擎的友好程度不高
<frameset></frameset>(不能和body共存)
- 表示框架开始，指定框架的个数以及边框等属性
- 属性：rws="”、cos="”、值可以是百分比也是可以是具体的数字，也可以是*
- border 从5开始指定
- frameborder="0" 表示没有边框，1表示有边框
- bordercolor 指定边框的颜色
<frame/>
- 代表窗口的实体
- 属性：
- src 指定本框架要指向的页面
- name 指定本框架的名字。其他框架a链接中可以用 targe='name'形式调用
- scrolling 是否出现滚动条（可用的值：yes、no、auto）
- noresize 是否可以拖动（可用的值：noresize）

eg:

<!DOCTYPE html>
<html>
	<head>
		<title>frameset</title>
	</head>
	<frameset cols="400,*" border="10" bordercolor="red">
		<frame src="http://www.baidu.com" />
		<frameset rows="300,*" frameborder="no">
			<frame src="http://www.qq.com" scrolling="no" />
			<frame src="http://www.360.com" />
		</frameset>
	</frameset>
</html>

name属性的使用：

index.html

<!DOCTYPE html>
<html>
	<head>
		<title>frameset</title>
	</head>
	<frameset rows="200,*">
		<frame src="top.html" name="top" />
		<frameset cols="300,*" >
			<frame src="left.html" />
			<frame src="right.html" name="right" />
		</frameset>
	</frameset>
</html>

top.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
我是top
</body>
</html>

right.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
我是right
</body>
</html>

left.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
    <a href="http://www.baidu.com" target="right">百度</a>
    <br>
    <a href="http://www.360.com" target="right">360</a>
    <br>
    <a href="http://www.hao123.com" target="top">上面打开</a>
</body>
</html>

点击百度和360，在右边框架打开，点击“上面打开”，在上面打开

div+css网页布局

div
- DIV全称 division 意为“区块、分割”，DⅣ标签是一个无意义的容器标签，用于将页面划分出不同的区域。
- 通过DⅣ将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DⅣ将页面分块是一个关键的工作，也是决定最终效果与质量的前提
css
- CSS（ Cascading Style Sheet），中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
div承载的是内容，而css承载的是样式

使用css控制页面样式的方式

行内样式
<div style="属性1:值1;属性2:值2;"></diⅳ>
嵌入样式
<style type="text/css">
选择器{属性1:值1;属性2:值2;}
</style>
外部样式
<link rel="stylesheet" type="text/css" href="url">
导入样式
@import url(外部样式表位置);
优先级别：
- 行内样式表>其他的样式表
- 其他的样式表，优先级一样，按照导入的顺序来确定他们是否起作用。

为什么要使用div+css

div+css是web标准，顺应潮流
弥补htm标签的功能缺陷
加快页面加载的速度，降低流量费用
对搜索引擎更加友好，更有利于收录和抓取您的页面
使页面的内容和表现分离，便于维护和管理，节省大量的人力和成本

CSS选择器

什么是选择器？

当我们定义条样式规则时候，这条样式规则会网页当中的某些元素，而我们的规定的这些元素的叫做选择器

id选择器
#idname
类选择器
.classname
标签选择器
tagname
交叉选择器
tagname.classname tagname.#idname
群组选择器
多个选择器用“,"隔开
后代选择器（包含选择器）
父级和子级用空格隔开
通用选择器
*{}
子选择器
子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（>）
body>p{color:green;}
相邻选择器
相邻选择器的定义符号是加号（+），相邻选择器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）
h2+p{color:red;}
属性选择器
匹配属性
a[name] {color:purple;}
img[border]{border-color:grey;}
伪类选择器
a:link{color:#FF0000}   /*未访问的链接*/
a:visited{color:#00FF00}   /*已访问的链接*/
a:hover{color:#FF00FF}   /*鼠标移动到链接上*/
a:active{color:#0000FF}   /*选定的链接*/
- 同一个HTML元素在不同状态下的不同样式
- 只有a元素和p元素可以使用

css的继承性和叠加性

继承性：后代元素会继承前辈元素的一些属性和样式

叠加性：同一个元素，被多个样式规则指定

因为css的继承性和叠加性，就有了css优先级的概念

css注释

CSS的注释为 /*注释内容*/

块/行标签

自己要独占一行的标签叫做块级标签，能设置宽髙度

能与其他行级元素呆在同一行的叫做行级标签，不能设置宽高度

块标签即标签元素是一个块，即有宽、高属性，同时块标签会独占一行，比如说H1~H6、P、li等标签都是块标签，
行标签正好与块标签意义相反，行标签不具有宽、高特性、 margin属性的值，只有左右没有上下。也不会占一行，所以我们可以利用行标签对文字进行区块指定不同的CSS样式达到不同的效果，行标签有em、font、b及span标签等