HTML

由 hrs, 12 十二月, 2019

HTML实例-089 HTML搭配不好的背景颜色和字体

标签
HTML

我们设计网页的时候往往会忽略页面的背景颜色和字体的搭配，这样会使网页难阅读和美观性，现在我们就来做一个不协调的前景颜色和字体的实例。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body bgcolor="#ffffff" text="yellow">
<p>这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，<p>
<p>这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，<p>
</body>
</html>

运行效果：

html_089.png

从这个实例中看出，我们设置的字体颜色和背景颜色明显很不协调。

评论

由 hrs, 12 十二月, 2019

HTML实例-088 HTML的背景颜色搭配

标签
HTML

我们在设计网页的时候，要注意网页的背景颜色和字体的搭配，使网页的文字看起来美观和易于阅读。下面我们就来实践一下。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body bgcolor="#d0d0d0">
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>

运行效果：

html_088.png

从这个实例中到出，我们设置了网页的主体背景颜色为灰色，字体为默认的黑色。看起来还是比较协调的。

 

评论

由 hrs, 1 十二月, 2019

HTML实例-087 html的内联框架

标签
HTML

如果我们要把一个网页在另一个网页中显示，这时我们就要用到内联框架了。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<iframe src="frame_a.html" name="iframe  a"></iframe>
</body>
</html>

 

评论

由 hrs, 1 十二月, 2019

HTML实例-086 使用框架导航跳转至指定的节

标签
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>

运行效果：

html_086.png

从这个实例中看出，我们可以点击指定的章节 就会跳转到相应的章节。

 

评论

由 hrs, 24 十一月, 2019

HTML实例-085 html 框架内跳转到指定章节

标签
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>

运行效果：

html_085.png

在这个实例中我们打开网页就会跳转到指定的章节。

评论

由 hrs, 23 十一月, 2019

HTML实例-084 html 的内联框架

标签
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>

运行效果：

html_084.png

 

评论

由 hrs, 23 十一月, 2019

HTML实例-083 html 的 noresize 属性的框架结构

标签
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>

运行效果：

html_083.png

从这个实例中看出，我们在框架加入 noresize属性后，可以发现我们无法调整框架的大小了。

noresize属性：禁止调整框架的大小。

评论

由 hrs, 23 十一月, 2019

HTML实例-082 html 的导航框架

标签
HTML

实例代码：

<!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>

运行效果：

html_082.png

在这个实例中，我们点击导航链接，会直接导航指定的框架页面上。

评论

由 hrs, 23 十一月, 2019

HTML实例-081 HTML使用混合框架结构

标签
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>

运行效果：

html_081.png

从这个实例中看出，我们可以用水平框架和垂直框架组合来使用。

评论

由 hrs, 23 十一月, 2019

HTML实例-080 如何使用 <noframes> 标签

标签
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>

运行效果：

html_080.png

运行后感觉没有什么变化。这是因为我使用的浏览器支持frame框架，所以不会显示noframe 标签内的文本。

评论

HTML