选项卡式导航"/>
html选项卡式导航
html选项卡式导航
我喜欢制表符，只要它们存在，我就做了他们！ 让我们看看是否可以利用一些javascript和CSS3功能构建出色的选项卡式导航。 我们将使用javascript自动检测访问者当前所在的标签，甚至使其与IE6兼容。 CSS3pie万岁！
步骤1：HTML <head>
容易的部分
因为我们希望页面与IE 6-8兼容，所以我们使用“ HTML-4.01 Transitional”文档类型。 让我们看一下模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>testfile</title><meta name="tutor" content="Bob de Ruiter"><meta name="author" content="Your Name"><!-- Date: 2011-07-07 --></head><body></body>
</html>死链接总比没有链接好！
您的Web编辑器应具有此模板，否则请将其复制到主文件夹中的index.php。
我们有三个外部文件，稍后将创建或添加。 就像我曾祖父经常说的：死掉的链接总比没有链接要好。 pie.htc将通过css文件进行链接，因此我们只需要链接javascript和css文件即可。
<head><link href="tabs.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="tabs.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>testfile</title><meta name="tutor" content="Bob de Ruiter"><meta name="author" content="Your Name"><!-- Date: 2011-07-07 --></head>步骤2：HTML <body>
这是计划：
容器，标题和内容是div层。 该容器包含所有内容，其功能是防止内容缩小到800px以上。 标头是制表符系统，内容不言而喻。 标签系统由无序列表组成，我们将它们水平对齐。 每个列表项都包含指向另一个页面的链接。 考虑到这一点，提出标记并不难：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd"><html lang="en"><head><link href="tabs.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="tabs.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>testfile</title><meta name="tutor" content="Bob de Ruiter"><meta name="author" content="Your Name"><!-- Date: 2011-07-07 --></head><body><div id="container"><div id="header"><ul><li><a rel="external" href="index.php">DSNR Home</a></li><li><a rel="external" href="protect.php">Protection</a></li><li><a rel="external" href="brain.php">Brainz!</a></li></ul></div><div id="content">content</div></div></body>
</html>到目前为止，这是我们所拥有的：
更多推荐
html选项卡式导航
发布评论