您的位置：首页 > 编程技术 > html  >  用表格巧妙制作导航条按钮

用表格巧妙制作导航条按钮

 更新时间：2016年9月20日 19:02  点击：2111

　　看到上面的导航条了吗？你可以点击一下看看它的效果，请注意，这可是用表格做出来的，你相信吗？其实代码很简单，现在让我们来看看该怎么做。

　　1.首先创建一个1x6的表格，参数为：border=0 cellspacing=3 cellpadding=0；

　　2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；

　　3.建立一个css样式.up和.down；代码如下：

<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>


若想在整页中去掉超链结的下划线，
在<head>与</head>之间加上
<style>
<!--
a{text-decoration:none}
-->
</style>
若只对特定链接使用，则链接语法为
<ahref="你的链接"style=text-decoration:none></a>
　　如何使鼠标放到有超级链接的字体时出现字体颜色变化？
　　在<head>与</head>之间加上
<style>
<!--
a:link{color:$}
a:visited{color:$}
a:active{color:$}
a:hover{color:$}
-->
</style>


　　其中link是超链接的颜色,visited是访问过的链接颜色,hover是鼠标移上去的颜色。把$
换成你需要的颜色，例如black或#000000。还可与下划线一起使用，如
a:hover{color:$;text-decoration:none}




< 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。

　　iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下：

name：内嵌帧名称

width：内嵌帧宽度(可用像素值或百分比)

height：内嵌帧高度(可用像素值或百分比)

frameborder：内嵌帧边框

marginwidth：帧内文本的左右页边距

marginheight：帧内文本的上下页边距

scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示)

src：内嵌入文件的地址

style：内嵌文档的样式(如设置文档背景等)

allowtransparency：是否允许透明
　
　　明白了以上属性后，我们可用以下代码实现，在main.htm 中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中：

〈iframe name="import_frame" width=100%

height=80 src="samper.htm" frameborder=auto〉

〈/iframe〉


　　不错吧，马上“Ctrl+C”、“Ctrl+V”试试。

　　有时我们为强调页面的某项内容，想让它先于页面的其他内容显示。同样用iframe即可轻松实现：

　　先把要强调显示的内容另存为一个文件，如first.htm ，然后通过一个预载页index.htm，内容如下：

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

　　页面加载中，请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

　　主文件index2.htm

〈body〉

〈iframe src="first.htm" 加入其他属性限制〉〈/iframe〉

〈/body〉

　　first.htm的内容就会先于页面的其他内容出现在您的浏览器里了，是不是很简单？再“Ctrl+C”、“Ctrl+V”一次？


<

　　初学者在使用表格时，可能会遇到各种问题，由于对标记还不是很熟悉，所以往往对这些问题感到莫名其妙，一筹莫展。有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。所以在这里，我们列出了表格使用过程中最常见的问题来加以分析，希望能给大家带来帮助

　　1.表格的变形问题

　　网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢?秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。

　　A、因为表格排列设置而在不同分辨率下所出现的错位

　　这种变形情况是：

　　1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却左排列或右排列，很难看，这是什么原因呢？

　　在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或左或右。

　　2、同样是这种分辨率切换，表格的上下排列不一致。

　　上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。

　　B、采用百分比而出现的变形

　　这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的，常出现在IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，这是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

　　当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分比，这样就不会出现变形了。

　　

C、表格单元格之间互相干扰引起的变形

　　这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，而又不知原因在哪，很是令人讨厌。

　　本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如没有，可能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。

　　我们知道，同一行的表格单元在诸如DreamWeaver 或FrontPage中经常频繁地被拆分，所以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：colspan、rowspan。colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和，如下图。


　　　　


　　这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值)，即colspan=3；而竖向的高度是三个表格单元高度的总和，即rowspan=3。

< 随着Internet在中国的飞速发展和不断普及，越来越多的人将网络作为获取信息、学习知识的最佳工具。国内外的各种传统媒体也争先恐后地在网上推出电子版：如《电脑报》、《光明日报》、《中国青年报》等等。于是，在网上读书看报就成了网虫兼书虫们乐此不疲的开心事了。
　　开启七八个浏览器窗口虽然可同时看几个网站，但浏览器窗口越开越多，机器的资源就越发紧张。对于那些喜欢在上网的同时听听MP3音乐的人来说，常常就只能忍痛割爱了（内存不够！）。有没有什么好的解决办法呢？
　　最容易想到的办法就是使用HTML语言中的Frame框架。设计过主页的朋友都知道，使用Frame可以将页面划分成几个互不影响的框架，每个框架中可以加载一个页面。而且，不同框架中的页面之间可以没有任何关系。这样可以充分地利用页面空间，加大页面的信息量。但是，Frame有个缺陷：只能将浏览器的窗口进行划分，对于大于Frame大小的页面就只能加上滚动条来移动显示窗口，很不方便。虽然，利用Frame，将不同的报刊站点放在不同的Frame中显示，可以减少同时打开浏览器的数目，但是，狭小的阅读空间却让人无法忍受！
　　其实，HTML语言中还有一个与Frame有着亲缘关系的标签IFRAME，利用它可以让我们达到目的。IFRAME是Inline Frame的缩写，称为内联框架。使用IFRAME，网页的设计者可以在HTML页面的任何地方插入一个内联框架，而不必像使用Frame前需要在一个主页面里用FrameSet标签为每个Frame划分空间。与一般的Frame不同的是，每个IFRAME可以独立地定义其大小，而不是瓜分本来就不大的一个浏览器窗口！也就是说，一个IFRAME可以和浏览器窗口一样大，甚至更大！这样，显示空间的问题也解决了。
　　下面的一个HTML页面文件，就是用IFRAME设计的一个“网上阅览室”。在一个页面上，IFRAME实现了同时显示三个不同报刊站点的内容，而每个站点的显示空间都是一个整屏！向Frame说再见吧！
　　你可以改变IFRAME的SRC属性，让它指向你所喜欢的报刊站点，定制你自己的网上阅览室！
　　注:请使用IE浏览器(3.0以上)，Netscape不支持该标签。
　　《html》
　　《head》
　　《title》网上阅览室《/title》
　　《/head》
　　《body》
　　《p align=″center″》《big》《font color=″＃0000FF″ face=″楷体_GB2312″》《strong》《big》《big》我的网上阅览室《/big》《/big》《/strong》《/font》《/big》《/p》
　　《p align=″center″》《font color=″＃FF0000″》光明日报《/font》《/p》
　　《IFRAME height=450 width=100％ src=″http://www.gmd.com.cn/″》
　　《/IFRAME》
　　《p align=″center″》　《/p》
　　《p align=″center″》《font color=″＃FF0000″》电脑报《/font》《/p》
　　《IFRAME height=450 width=100％ src=″http://www.cpcw.com″》
　　《/IFRAME》
　　《p align=″center″》　《/p》
　　《p align=″center″》《font color=″＃FF0000″》中国青年报《/font》《/p》
　　《IFRAME height=450 width=100％ src=″http://www.cyd.com.cn″》
　　《/IFRAME》
　　《/body》
　　《/html》
（陕西　陈剑）

SyntaxHighlighter.highlight();
[!--infotagslink--]

相关文章