网页设计-公用导航栏

一、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文件实现。方便即使链接。

有问题处尽情指正。

网页设计-公用导航栏相关推荐

Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件下载保存为AntDes ...
HTML网页入门练习——导航栏布局设计
导航栏布局实现如下导航栏: 首先进行页面需求分析,如图所示导航栏分为三部分,包括标志.导航.用户按钮.为了使结构看起来明显,我们使用色块表示,确保结构正确之后再往里面填充内容. 具体步骤如下: (1 ...
如何从SEO优化角度设计网站导航栏？
导航栏一般位于网站的标题之下的位置,对用户浏览网有着一定的导航作用,引导用户更快速的找到有价值的信息.在搜索引擎蜘蛛进行爬行时,导航条也是首选,优质的导航条不仅能够获得搜索引擎的喜爱还能利于网站权重的 ...
网页设计中分栏布局的几种实现方案
在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局.这其中又以部分栏固定,部分栏自适应的方式最为常见.下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案. 三栏布局三栏布局最常 ...
HTML页面设计之导航栏
一. 导航栏 DIV+CSS布局先设计一个大盒子,用来盛放整条的导航栏,宽度就是屏幕的宽度: #navigator{/*导航栏*/height:30px;width:1000px;font-si ...
HTMLCSS设计小米导航栏
小米导航栏: 准备工作: 把需要实现的设计图放到ps中,量取需要的宽度高度间距值: 话不多说:直接上代码: <div class="box"> // 一个大盒子可以用n ...
HTML5实现一种很常见的网页布局设计（导航栏在左侧）
一.代码实现 <!DOCTYPE html> <html><head><meta charset="utf-8" /><tit ...
Photoshop网页设计之导航
很多企业网站栏目规划不合理.导航系统不完善.相信很多朋友都有同感吧.主要表现在栏目设置重叠.交叉.或者栏目名称意义不明确,容易造成混淆,使得用户难以发现需要的信息,有些网站则栏目过于繁多和杂乱,网站导 ...
前端课设-二手商城-网页设计
前端课设-二手商城-网页设计有导航栏,各种商品标签,轮播图等等,详细情况请看下图: 点我下载资源点我下载资源

网页设计-公用导航栏

网页设计-公用导航栏相关推荐

最新文章

热门文章