网页页面布局

1.用表格组织排列网页

表格标签:<table></table>

行标签:<tr></tr>

表格标题标签:<th></th>

列标签:<td></td>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

另外表格还可以嵌套。

frame属性:frame 属性规定外侧边框的哪个部分是可见的

void 不显示外侧边框。
above 显示上部的外侧边框。
below 显示下部的外侧边框。
hsides 显示上部和下部的外侧边框。
vsides 显示左边和右边的外侧边框。
lhs 显示左边的外侧边框。
rhs 显示右边的外侧边框。
box 在所有四个边上显示外侧边框。
border 在所有四个边上显示外侧边框。

参考:http://www.w3school.com.cn/tags/tag_table.asp

2.css(Cascading Style Sheets级联样式表)格式化页面

样式结构由css根据层次结构决定,从而实现级联效果;可将CSS级联机制看成一种继承的关系父亲的特征传递给子女,但子女有会更特殊的特征,即基样式规则覆盖整个样式表,但可被更具体的样式规则覆盖。

2.1应用样式的三种方法

外部样式表:将一组css样式规则保存为一个独立的.css文件,在每个页面的开头(<head>内)用<link/>指定该文件;如

<head>

 <link rel="stylesheet" type="text/css" href="[css文件路径]" />

</head>

.css

body{

font-size:12pt;

……

}

内部样式表:通过<style>标签将一组css规则放在页面中,这些样式规则只对其所在的页面有效;如 

<style type="text/css">
div{
margin-left=10px;
margin-right=10px;

内联样式表:通过style属性直接将一个或多个css属性放在标签内;如

<table style="100px; height:100px">

2.2样式类

定义的特殊格式文本称为样式类,如

h1.silly{font:36pt;}

<h1 class="silly"></h1>

 2.3css修改链接外观

Link:尚未访问

Hover:鼠标指向

Active:被激活

Visited:访问

每种链接状态对应一种css伪类,伪类是应用于元素元素状态的一种特殊样式类。

a:Link{font-weight:Bold;…}

2.4堆叠顺序

z-index样式属性,值较大的元素叠在值元素较小的上面。

2.5id和class的区别

理论上是说id是针对具体的一个标签,一个页面中唯一,而class是一类,可以多个,不过我实际中试过用id定义多个如<a id="a"><a id="a">也是正常的。

3.框架frame

标签<frame></frame>

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。如:

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

重要事项:您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!

原文地址:https://www.cnblogs.com/siliconvalley/p/3100455.html