html第八章链接,HTML5笔记之第八章

1.正常流动：浏览器逐行渲染HTML文档中的代码

2.相对定位和绝对定位 position

positon的属性值有static，relative，absolute，fixed

偏移属性有left，right，top，bottom

position和偏移属性联合使用

相对定位 position: relative

绝对定位 position: absolute

相对定位以邻近元素作参考，绝对定位以窗口为参考

3.浮动 float

元素在浏览器窗口或另一个元素左右两侧浮动时，使用float属性

浏览器先以“正常流动”方式渲染这些元素，再将它们移动到所在容器(通常是窗口或者div)的最右侧或最左侧

float属性值left，right

注意除非元素已经有一个隐含的宽度(如img)，否则为浮动元素指定宽度，且只有块级元素才能配置浮动

浮动经常和magin等属性一起使用

4.清除浮动 clear

属性值left，right，both

5.溢出 overflow

overflow是用来配置内容在分配区域容不下时的显示方式，可以设置visible默认(过大会溢出)，hidden内容被剪裁，auto必要时显示滚动条，scroll显示滚动条四种方式。

也可用overflow来清除浮动，值为auto。

clear与overflow作用效果相似，但用overflow避免添加一个换行元素，并确保容器元素延伸以包含整个浮动元素。

6.CSS双栏页面布局

双栏布局是网页的常见设计，通过配置其中一栏在网页上浮动来实现的。

左侧导航双栏布局：

(1)整个页面设置成一个div

(2)左栏配置固定宽度(例150px)，并在左侧浮动

(3)右栏指定大于左栏宽度的一个左边距(例155px)，营造双栏效果

顶部logo左侧双栏布局：

与上方法类似

7.无序列表中的超链接

用无序列表做超链接，只将锚元素放到li中即可

配置外观：

消除列表符号：list-style-type：none

消除下划线：text-decoration：none

配置垂直或水平显示导航：

无序列表默认为垂直，若要显示为水平，则需要配置成内联元素，用display属性，属性值为none，inline(内联)，block(块元素，前后有边距)，例子：

(将ul放入配有id的div中)

#nav ul{ list-style-type：none；}

#nav li{display：inline；}

(注意这个例子中的上下文选择符用法)

8.伪类实现CSS交互(链接在鼠标移动时会改变颜色)

5种用于锚元素的伪类(注意伪类不是属性)：

:link 未访问(点击)状态

:visited 已访问状态

:focus 链接获得焦点触发(Tab键切换到该链接时)

:hover 鼠标移到链接上方时触发

:active 实际点击时触发

注意：锚元素伪类必须按这种顺序进行编码(可以省略一个或多个)

一般为focus和active配置相同样式

如何应用伪类？在选择符后面写出伪类名称

a：link{color}

ps: h1这类本身含字体大小的元素若是设置font-size为x%，则是相对于它本身字体大小的x%

9.为图片添加标题

方法一：用div捆绑标题和图片，分配一个类编辑css格式，css如下：

.title{float: right;

width: 260px;

margin: 10px;

text-align: center;

font-size: .8em

font-style: italic;

}

该类配置是：右侧浮动，设置宽度，边距(m)，设置文本格式(字体大小居中显示)

方法二：用新的HTML5元素配置

figure和figcaption元素，均为容器标记，但方法二需要比较新的浏览器才能支持。

figure元素包含图片和figcaption元素，figcaption中包含文字内容，注意，方法二同样要设置css，分别在figure,figcaption中：

figure{float: right;

width: 260px;

margin: 10px;

}

figcation{text-align: center;

font-size: .8em

font-style: italic;

display: block;(前后有边距)

}

与方法一的css笔记，只多了一个display属性

10.HTML5的结构元素

结构元素的意义在于更好的阐释结构区域的用途，其实和div的作用一样，也和div一样可以包含子集或者div本身。

均为容器元素

header元素：包含网页文档或者文档中的一个区域的标题

hgroup元素：分组标题级别的标记

nav元素：包含导航链接

footer元素：页脚

section元素：包含文档的section，如章节或者主题，是块显示元素

article元素：包含一个独立条目，比如博客文章、评论等，同样是块显示元素

aside元素：块显示元素，包含sidebar，note或其他补充元素

time元素：代表日期和时间，还通过可选的datetime属性，以YYYY-MM-DD标记是机器能够识别

11.CSS对打印和移动Web的支持

打印

CSS控制哪些内容要被打印，以及如何被打印

(1)首先为浏览器显示创建一个外部样式表

(2)再为特殊的打印设置创建另一个外部样式表

(3)然后使用两个link元素将两个外部样式表都关联到网页，注意，这两个link元素都要使用一个新属性：media

一个link设置为media=“screen”，另一个link设置为media=“print”

media属性有三个值，screen(默认)屏幕显示，print打印时的格式，handheld手持设备的显示

支持移动Web

同打印一样需要创建新的样式表，在新的样式表中加入link元素，link元素中加入media=“handheld”，另外与打印不同的是link中还要加入type=“text/css”