向上滑动的蓝色大气导航菜单

<html>
<head>
<title>项部的窗口</title>
<style type="text/css">
<!--
body { margin: 0px;padding: 0px;text-align: center;}
TD {FONT-SIZE: 12px; COLOR: #333;}
#toubiao {BORDER-BOTTOM: #e2e2e2 1px solid;}
-->
</style>
</head>
<body>
<SCRIPT>
function toueme(){
document.getElementById("toubiao").style.display="none";
}
</SCRIPT>
<DIV id=toubiao>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="82%"><a target="_blank" href="/">
<span style="text-decoration: none"><font color="#808080">源码爱好者为您提供有质量的学习资源,编程资源,电子书籍等,你是学习的好地方。</font></span></a></td>
    <td width="14%" align="right"><a style="CURSOR: hand" onClick=toueme()>
<img src="http://codefans.net/jscss/demoimg/200903/close3.gif" hspace="6" border=0></a></td>
  </tr>
</table>
</DIV>
</body>
</html>

转载于:https://www.cnblogs.com/ThirdEye/archive/2009/07/12/1521857.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML和CSS示例,用于创建一个滑动顶部固定导航菜单: HTML代码: ```html <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus magna quis lectus mattis, vel malesuada mi dictum. Etiam non odio non ipsum fermentum mollis. Nullam auctor nulla a mi scelerisque, vel lobortis sapien convallis. Sed vel lacus lorem. Nunc condimentum nunc eu velit finibus, vel venenatis nunc pulvinar. Sed at nulla sit amet purus bibendum interdum. Sed sed lectus vitae sapien tristique mattis. Sed sit amet justo ac neque faucibus auctor. Aenean vel enim vitae ipsum semper venenatis.</p> <p>Phasellus pulvinar leo non mi eleifend, ac luctus quam efficitur. Donec aliquam lorem sit amet lacus euismod, vel sollicitudin ex interdum. Fusce congue, lorem id vulputate molestie, orci leo facilisis sapien, et commodo felis leo quis sapien. Praesent nec purus id ligula commodo feugiat. Suspendisse potenti. Fusce commodo mi vel est eleifend, vel vestibulum nulla maximus. Praesent non risus ut velit consequat varius. Mauris ut tellus sit amet ligula porttitor accumsan. Donec accumsan aliquam condimentum. Integer nec bibendum mauris. Donec congue, ex id luctus elementum, elit sapien commodo leo, euismod placerat arcu magna vel metus. Aenean laoreet, velit vel bibendum interdum, nisi nibh porta lectus, ac pellentesque ligula arcu eu elit. Nullam id est sed elit scelerisque tincidunt eu sed lorem. Sed vel diam nec ante egestas feugiat.</p> <p>Aliquam erat volutpat. Aliquam ut arcu id mi blandit ultricies. Nullam vel odio eu urna lacinia semper quis vel dui. Donec nec placerat risus. Morbi lacinia, justo quis consequat porttitor, arcu velit lobortis est, eget eleifend nibh sem eget nulla. Sed bibendum auctor nunc, eu pharetra purus. Fusce sed laoreet est. Quisque euismod dictum mi, eget efficitur dolor pulvinar id. Vivamus ac finibus nisl. Aliquam erat volutpat. Ut quis malesuada justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lacinia augue vel metus accumsan, et interdum enim aliquam. Nam sit amet blandit quam. Donec id nibh euismod, malesuada nunc et, rhoncus ipsum.</p> </main> ``` CSS代码: ```css header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); z-index: 9999; /* 设置一个较高的 z-index 值,使导航菜单在其他元素之上 */ } nav { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; } ul { list-style: none; margin: 0; padding: 0; display: flex; } li { margin: 0 10px; } a { text-decoration: none; color: #333; } main { margin-top: 80px; /* 为了避免内容被导航菜单遮挡,需要设置一个与导航菜单高度相等的 margin-top */ } ``` 通过将`header`元素设置为固定定位并将`top`属性设置为0,我们可以将导航菜单固定在页面顶部。此外,我们还可以使用`z-index`属性将其置于其他元素之上。使用简单的Flexbox布局,我们可以轻松地将导航菜单水平居中,并在菜单项之间添加一些间距。最后,我们为内容区域设置了一个与导航菜单相等的`margin-top`,以避免内容被导航菜单遮挡。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值