javascript适应不同分辨率的导航栏

 

转自:http://cache.baidu.com/c?m=

9d78d513d9d430dc4f9d94697c17c0161f4

381132ba7d7020fa58438e0732b37506793ac56200774d9d27c1

616de3a4b9b832104361453b38cc9f85daccb855c249f5135676a845613a30e

dfce5153c537e059fed81df0cbf025e2ddc6949f0a5c9015433897f1f8471d449432a

5033194e7c214464810cdbc6d3ae8590078c33e01ab17a7bd677900f5f1d70f4fc228d

a361394ad37b23454eb04a46841621bfe&p=84759a45d19d50e507a8c7710957&user=baidu

 

jsp javascript 适应不同 分辨率 导航栏
2007-06-21 22:51:35
 
大中小
    在线货物追踪系统( http://huayou.vicp.cc)在设计时,我用了1024×768的 分辨率,结果很多客户还是800×600的 分辨率,这样,不仅广告会占用位置(不过单击就关闭了),并且"报价服务"和"货物追踪"的下拉列表会忽前忽后.在网上搜了一段时间,大多都是用替换文件的方法来实现的,但我这里是在每个JSP文件中用 jsp:include来实现的,必须在导航文件中解决问题.
    解决思路是:用javascript来输入层的CSS,只需动态的改变left的值即可,简单吧,还让自己忙了那么久!
...

<style type="text/css">
<!--
body {
 margin-top: 0px;
 background-image: url(img/logoback.gif);
 background-color: #999999;
}
-->
</style>
<script type="text/JavaScript">
document.write('<style type="text/css">');
document.write('#s1024 {');
document.write('position:absolute;');
document.write('left:');
document.write(455-(1024-screen.width)/2);
document.write('px;');

document.write('top:143px;');
document.write('width:82px;');
document.write('height:63px;');
document.write('z-index:1;');
document.write('background-color: #0C01D1;');
document.write('visibility: hidden;');
document.write('}');
document.write('#t1024 {');
document.write('position:absolute;');
document.write('left:');
document.write(525-(1024-screen.width)/2);
document.write('px;');
document.write('top:142px;');
document.write('width:92px;');
document.write('height:43px;');
document.write('z-index:2;');
document.write('background-color: #0C01D1;');
document.write('visibility: hidden;');
document.write('}</style>');
</script>

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<div id="s1024">
  <table width="80" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="airprice.jsp"> 空运报价</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF" ></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="expressprice.jsp"> 快递报价</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF" ></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="takedelivery.jsp"> 香港派送费</a></td>
    </tr>
  </table>
</div>
<div id="t1024">
  <table width="90" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"> <a href="airtracke.jsp">空运追踪</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF"></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"> <a href="customer.jsp">中港快递追踪</a></td>
    </tr>
  </table>
</div>

.

.

.

<a href="netorder.jsp">网上订单</a> | <a href="#" οnclick="MM_showHideLayers('s1024','','show','t1024','','hide')">服务报价</a> |
    <a href="#" οnclick="MM_showHideLayers('s1024','','hide','t1024','','show')">货物追踪</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,Bootstrap提供了多种导航栏样式,可以满足不同的需求。以下是一个简单的Bootstrap导航栏的实现步骤: 1. 在页面中引入Bootstrap的CSSJS文件。 2. 在HTML页面中添加导航栏的HTML代码。例如: ``` <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> ``` 3. 在JS文件中实现点击导航栏菜单的逻辑。例如: ``` $('.navbar-nav .nav-link').on('click', function () { $('.navbar-nav .nav-item').removeClass('active'); $(this).parent().addClass('active'); }); ``` 通过以上步骤,就可以实现一个简单的Bootstrap导航栏了。在实际应用中,可以根据需求进行样式和功能的调整。 ### 回答2: Bootstrap导航栏是一种在网站上设置菜单和导航的常用工具。Bootstrap是一种流行的前端开发框架,提供了一整套用于设计和构建网站的工具和组件。 Bootstrap导航栏具有以下特点和优势。首先,它提供了一个响应式设计,可以适应不同设备和屏幕尺寸,使网站在手机、平板电脑和桌面上都可以正常显示。其次,Bootstrap导航栏具有丰富的样式和布局选项,可以满足不同风格和需求的网站设计。开发人员可以通过简单的CSS类和HTML结构来自定义导航栏的外观和行为。此外,Bootstrap导航栏还提供了一套有用的JavaScript组件,如下拉菜单、折叠菜单和滚动监听,可以增加网站的交互性和功能性。 为了使用Bootstrap导航栏,首先需要引入Bootstrap的CSSJavaScript文件。然后,在HTML代码中,使用适当的CSS类来创建导航栏的结构。可以选择水平导航栏或垂直导航栏,并添加Logo、菜单项和下拉菜单等内容。通过调整CSS类和样式,可以设置导航栏的背景颜色、字体样式和图标等。 总之,Bootstrap导航栏是一种方便实用的工具,可以帮助开发人员轻松构建现代化且功能丰富的导航界面。它提供了一系列的组件和选项,使得设计和定制导航栏变得简单而灵活。无论是个人网站、企业门户还是电子商务网站,使用Bootstrap导航栏都可以提高用户体验和网站的可用性。 ### 回答3: Bootstrap导航栏是一种基于CSSJavaScript的前端框架,用于快速构建响应式的、现代化的网页导航栏。它具有简单易用、高度可定制和兼容性强的特点,因此被广泛应用于网站和Web应用的开发中。 使用Bootstrap导航栏可以帮助我们快速搭建一个具有层次结构的导航菜单。它提供了许多不同的导航样式,比如顶部导航、下拉菜单、卡片式导航等等。我们可以根据自己的需求选择合适的样式,并进行简单的自定义。 除了外观上的定制之外,Bootstrap导航栏还具有很多有用的功能。通过使用JavaScript插件,我们可以实现一些常见的导航交互效果,比如下拉菜单、折叠菜单、切换选项卡等等。这些功能可以大大提升用户体验,并使导航更加灵活和易用。 另外,Bootstrap导航栏还支持响应式布局。这意味着导航栏会根据用户设备的不同自动调整样式和布局,以适应不同的屏幕大小和分辨率。这样,我们不需要为不同的设备编写不同的代码,可以节省大量的开发间和精力。 总之,Bootstrap导航栏是一个非常有用和方便的前端框架,可以帮助我们快速构建漂亮、功能强大的导航菜单。无论是初学者还是经验丰富的开发者,都可以从中受益。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值