我们设计网页的时候往往会忽略页面的背景颜色和字体的搭配，这样会使网页难阅读和美观性，现在我们就来做一个不协调的前景颜色和字体的实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body bgcolor="#ffffff" text="yellow">
<p>这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，<p>
<p>这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，<p>
</body>
</html>
运行效果：
从这个实例中看出，我们设置的字体颜色和背景颜色明显很不协调。
我们在设计网页的时候，要注意网页的背景颜色和字体的搭配，使网页的文字看起来美观和易于阅读。下面我们就来实践一下。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body bgcolor="#d0d0d0">
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>
运行效果：
从这个实例中到出，我们设置了网页的主体背景颜色为灰色，字体为默认的黑色。看起来还是比较协调的。
如果我们要把一个网页在另一个网页中显示，这时我们就要用到内联框架了。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<iframe src="frame_a.html" name="iframe a"></iframe>
</body>
</html>
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset cols="20%,80%">
<frame src="frame_nav.html">
<frame src="wenzhan.html" name="showframe">
</frameset>
</html>
运行效果：
从这个实例中看出，我们可以点击指定的章节 就会跳转到相应的章节。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset cols="20%,80%">
<frame src="frame_a.html">
<frame src="wenzhan.html#c8">
</frameset>
</html>
运行效果：
在这个实例中我们打开网页就会跳转到指定的章节。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<iframe src="img/shanshui.jpeg" width="450px" height="300px"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</html>
运行效果：
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset cols="35%,50%,15%">
<frame src="frame_a.html" noresize="noresize" />
<frame src="frame_b.html" />
<frame src="frame_c.html" />
</frameset>
</html>
运行效果：
从这个实例中看出，我们在框架加入 noresize属性后，可以发现我们无法调整框架的大小了。
noresize属性：禁止调整框架的大小。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset cols="120,*">
<frame src="frame_nav.html">
<frame src="frame_a.html" name="showframe">
</frameset>
</html>
运行效果：
在这个实例中，我们点击导航链接，会直接导航指定的框架页面上。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset rows="100%">
<frame src="frame_a.html"></frame>
<frameset cols="50%,50%">
<frame src="frame_b.html"></frame>
<frame src="frame_c.html"></frame>
</frameset>
</frameset>
</html>
运行效果：
从这个实例中看出，我们可以用水平框架和垂直框架组合来使用。
当别人使用的浏览器太旧，不支持框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<head>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html"></frame>
<frame src="frame_b.html"></rlame>
<frame src="frame_c.html"></frame>
<noframe>你的浏览器无法处理框架</noframe>
</frameset>
</html>
运行效果：
运行后感觉没有什么变化。这是因为我使用的浏览器支持frame框架，所以不会显示noframe 标签内的文本。
评论