<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.footbar_wrap{ position:fixed; bottom:0; left:0;width:100%;}
.footbar{ width:96%; height:26px; line-height:26px; margin:0 auto; background:url(http://filer.blogbus.com/1490833/resource_14908331264066940z.jpg) repeat-x 0 0; border-left:1px solid #b4b4b4; border-right:1px solid #b4b4b4;}
* html .footbar_wrap{ position:absolute; left:0; width:101.4%;top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);} //IE6hack,提出来写比用_来区分会舒服些
ul{ margin:0; padding:0; }
li{ width:100px; text-align:center; float:left;position:relative;margin-left:1px;}
.thespan{ position:absolute; top:-100px; left:-1px; font-size:12px; display:none; width:100px;height:100px; border:1px solid #ccc; border-bottom:none;}
.clear{ clear:both;}
li:hover{ border:1px solid #ccc; border-top:none; background:#fff}
li:hover span{ display:block;}
li p{ margin:0 0 2px 0;}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="http://www.blogbus.com/user/js/jquery.js"></script>
<script>
$(function(){
$(".footbar li:eq(0)").hover(function(){
$(this).css({ border: "1px solid #ccc", background: "#fff"});
$(this).css("border-top", "none");$(this).css("border-bottom", "none");
$(".thespan:eq(0)").css("display","block");
},
function(){
$(this).css({ border: "none", background: "none"});
$(this).css("border-top", "none");
$(".thespan:eq(0)").css("display","");
})
$(".footbar li:eq(1)").hover(function(){
$(this).css({ border: "1px solid #ccc", background: "#fff"});
$(this).css("border-top", "none");
$(this).css("border-bottom", "none");
$(".thespan:eq(1)").css("display","block");
},
function(){
$(this).css({ border: "none", background: "none"});
$(this).css("border-top", "none");
$(".thespan:eq(1)").css("display","");
})
})
</script>
<![endif]-->
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="footbar_wrap">
<div class="footbar">
<ul>
<li><a href="#">about</a><span class="thespan"><p>关于我们</p><p>联系我们</p></span></li>
<li><a href="#">contct</a><span class="thespan">联系我们</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
`g-footer-container`的样式定位了底部导航条，使其始终固定在屏幕底部，并设置了适当的阴影效果以增强视觉层次感。 接着，我们关注`src/components/tabbar/index.vue`文件，这是`Tabbar`组件的定义。这个组件包含...
网页底部浮动导航条是网页设计中的一个重要元素，它通常位于页面的最下方，始终保持在用户的视线范围内，即使用户滚动页面也不会消失。这种设计可以提供便捷的用户体验，使用户能够快速访问网站的主要链接或功能，...
"超过一定高度出现左右浮动导航及底部固定导航代码"是一个常见的网页设计模式，旨在优化用户体验，特别是在内容丰富的长页面中。这个设计模式的目的是使导航在页面滚动到一定高度时变为固定位置，以便用户始终可以...
1. `position`: 为了使导航条始终固定在页面底部，可以将元素的`position`属性设置为`fixed`。这将使元素相对于浏览器窗口定位，而不是相对于其父元素。 2. `bottom`: 当`position`设置为`fixed`时，可以使用`...
在网页设计中，底部固定导航（Fixed Footer）是一种常见的布局方式，它能让用户在滚动页面时始终保持导航栏在屏幕底部可见，提供便捷的链接跳转。这个“css3网页底部固定导航.zip”压缩包文件很可能包含了一个示例...
在网页设计中，创建一个固定在页面底部的漂浮导航条是常见的需求，它能确保用户在滚动页面时始终保持导航可见，提供便捷的导航功能。本文将深入探讨如何使用CSS和DIV来实现这样一个多浏览器兼容的固定底部导航条。 ...
这个名为"基于jQuery超过一定高度出现左右浮动导航及底部固定导航代码.rar"的压缩包提供了一种实现方法，利用JavaScript库jQuery来创建动态的、响应式的导航系统。以下是对这个主题的详细说明： 首先，jQuery是一个...
让我们深入探讨一下如何在Android中实现这样一个通用、可扩展且自由定制的底部导航条。 首先，我们需要了解底部导航栏的基本结构。通常，它包含3到5个图标，每个图标代表一个不同的功能区域。点击图标时，相应的...
导航条原本正常显示,可能不一定在顶部位置.但当然滚动鼠标时,导航条或广告图片会自动紧贴顶部,当鼠标重新滚动到顶部时,则导航又恢复正常...共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
在网页设计中，创建一个始终固定在页面底部的菜单提示导航是提高用户体验的重要手段。这种设计使得用户在浏览页面时，无论滚动到哪个位置，都能方便地访问导航菜单。本教程将详细介绍如何利用jQuery实现这样的功能，...
网页底部的浮动通栏与导航条是网页设计中常见的元素，它们为用户提供了一种便捷的交互方式，即使在页面滚动时也能保持可见。这个主题主要涉及CSS（层叠样式表）布局技术，包括定位（positioning）、固定定位（fixed ...
为了实现头部和底部固定，我们可以使用CSS（层叠样式表）来控制它们的定位。CSS允许我们用`position`属性设置元素的定位方式。对于头部和底部，我们可以将它们的`position`设置为`fixed`，这会使它们始终固定在屏幕...
flex布局实现顶部导航，底部导航固定，内容区内容高度超过可展示区域时出现滚动条，内容高度不足时铺满屏幕。
这种布局方式在现代网页设计中非常常见，尤其在导航栏、广告条、版权信息等需要始终可见的元素上。接下来，我们将深入解析实现这一效果的技术细节。 ### CSS属性详解 #### position: fixed `position: fixed;`是...
该插件实现了一种交互效果：当用户在网页上滚动时，导航条会从页面底部开始移动，随着页面的向下滚动逐渐靠近顶部，直到用户滚动到一定位置后，导航条会固定在页面顶部，方便用户随时访问导航链接。这种效果通常被...
导航条原本正常显示,可能不一定在顶部位置.但当然滚动鼠标时,导航条或广告图片会自动紧贴顶部,当鼠标重新滚动到顶部时,则导航又恢复正常...共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
1. **滑动效果**：当用户滚动页面时，导航条可以实现固定在顶部或底部，这种效果称为粘性导航。它可以始终保持导航条可见，方便用户随时访问。实现这种效果可以使用CSS的`position: sticky`属性或JavaScript/jQuery...
1. **定位与浮动**：CSS中的position属性（如static、relative、absolute、fixed）和float属性可以用来设置导航条在页面上的位置，使它能够固定在顶部、底部或侧边。 2. **盒模型与尺寸**：理解CSS盒模型（content...
导航条通常位于页面的顶部、侧边或底部，以便用户在不同页面间轻松切换。在本文中，我们将深入探讨“导航条 Menu”的设计原理、实现方法以及优化技巧。 一、导航条的设计原则 1. 清晰易懂：菜单的选项应简洁明了，...