学习css网站布局和框架

网站布局有这几种：

1、利用div标签布局

···因为div标签，可以用css样式来进行定位

2、还可以用html5的网站布局

···HTML5 语义元素

header 定义文档或节的页眉

nav 定义导航链接的容器

section 定义文档中的节

article 定义独立的自包含文章

aside 定义内容之外的内容（比如侧栏）

footer 定义文档或节的页脚

details 定义额外的细节

summary 定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

3、使用表格的html布局

注释：<table> 元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。

使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

例如：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

边框（border)

border-style可能的属性值：##### none(定义无边框）

dotted(定义点状边框，但是在大多数浏览器中呈现为实线）

dashed（定义虚线，在大多数浏览器中呈现为实线）

solid（定义实线）

groove(定义3D凹槽边框，其效果取决于border-color的值）

ridge(定义3D垄状边框，其效果取决于border-color夫人值）

inset（定义3Dinset边框，其效果取决于border-color的值）

outset（定义3Doutset边框。其效果取决于border-color的值）

inherit(规定应该从父元素继承边框样式）

定位：

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位：

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

默认的Z-index（设置元素堆叠的顺序）是0，Z-index>0优先级越高，Z-index<0,越到后面出来，优先级越低，越先出来。

Z-index属性使拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。