网页设计-公用导航栏

最新推荐文章于 2024-04-14 12:10:13 发布

老※

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量1.3k

点赞数 5

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/qq_58572751/article/details/127250580

版权

一、asp语言和php语言（有待检验，还未具体深入学习）

根据所写的导航栏，对应写成head.asp,如主页index.asp.在网页主内容部分开头位置调用asp文件，增加如下代码：

<!–  #include file=”head.asp”    –>

php语言类似与asp文件。

二、通过html的iframe标签（这种方法的导航栏格式位置可能还需要再具体调节）

制作一个公共的导航栏文件head.html,调用该文件的位置为，为主页文件代码开始位置添加如下代码：

<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"
scrolling="no" src="head.html" height="auto" width="100%"></iframe>

在使用这种方法时，需注意将链接的跳转打开方式改为在新窗口或选项卡中打开文档即target属性改为_blank。如下：

<a href="example.html"></a>

通过改变target属性，可以避免在当前页面打开，影响美观。

三、通过javascript语言

将所编写的head.html文件，转为js文件，即head.js,调用方法亦是在开始位置增加如下代码：

<script type="" src="head.js"></script>

注意通过将html文件转为js文件后，要注意乱码问题。

如果需要将文件格式转换可以通过以下网址：

html文件转换工具

转换完的格式以下为例：

document.writeln("<!DOCTYPE html>");
document.writeln("<html lang=\'zn-CN\'>");
document.writeln("<head>");
document.writeln("    <meta charset=\'UTF-8\'>");
document.writeln("    <title>导航栏</title>");
document.writeln("    <link rel=\'stylesheet\' href=\'../css/demo.css\'/>");
document.writeln("</head>");
document.writeln("<body>");
document.writeln("<div class=\'top\'>");
document.writeln("    <ul>");
document.writeln("        <li><a href=\'https://www.gushici.net/shici/22/42902.html\' target=\'_blank\'>首页</a></li>");
document.writeln("        <li><a href=\'#\'>指南</a></li>");
document.writeln("        <li><a href=\'#\'>娱乐</a></li>");
document.writeln("        <li><a href=\'#\'>教育</a>");
document.writeln("            <ul>");
document.writeln("                <li>");
document.writeln("                    <a href=\'liti.html\' target=\'_blank\'>例题</a>");
document.writeln("                </li>");
document.writeln("            </ul>");
document.writeln("        </li>");
document.writeln("        <li>");
document.writeln("            <a href=\'#\'>资产表</a>");
document.writeln("            <ul>");
document.writeln("                <li><a href=\'shouru.html\' target=\'_blank\'>收入表</a></li>");
document.writeln("                <li><a href=\'zaiwu.html\' target=\'_blank\'>负债表</a></li>");
document.writeln("            </ul>");
document.writeln("        </li>");
document.writeln("        <li>");
document.writeln("            <a href=\'#\'>我要留言</a>");
document.writeln("            <ul>");
document.writeln("                <li><a href=\'#\'>建议</a></li>");
document.writeln("                <li><a href=\'#\'>留言</a></li>");
document.writeln("            </ul>");
document.writeln("        </li>");
document.writeln("        <li style=\'float:right\'>");
document.writeln("            <a class=\'active\' href=\'denglu.html\' target=\'_blank\'>登录</a>");
document.writeln("            <ul>");
document.writeln("                <li><a href=\'wy.html\' target=\'_blank\'>注册</a></li>");
document.writeln("            </ul>");
document.writeln("        </li>");
document.writeln("        <li style=\'float:right\'><a href=\'#about1\'>关于我们</a></li>");
document.writeln("    </ul>");
document.writeln("</div>");
document.writeln("</body>");
document.writeln("</html>");

通过这种方法，如果需要调用公共的导航栏文件，可以随时通过链接对应的head.js文件实现。方便即使链接。

有问题处尽情指正。