html固定顶部导航栏和底部导航栏

最新推荐文章于 2024-05-19 09:58:49 发布
最新推荐文章于 2024-05-19 09:58:49 发布
阅读量5.2k 收藏 46
点赞数 4
分类专栏： Vue学习 文章标签： html css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwqc262/article/details/119837440
版权

固定顶部导航栏，在样式(css)中加入以下代码

  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  background: #eaeaea

固定底部导航栏，在样式(css)中加入以下代码

  position:fixed;
  left:0;
  bottom:0;
  width: 100%;
  z-index: 1000;
  background: #eaeaea
大图书馆的牧羊人
关注
  • 4
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端代码分享——常用的手机端底部导航栏（内含源码）
Why_does_it_work的博客
07-14 2550
【代码】前端代码分享——常用的手机端底部导航栏。
html侧边导航栏,浮动侧边导航栏的基本布局
weixin_35840528的博客
06-08 2467
先来一张效果图效果图HTMLJS Bin头部内容左侧的一些内容首页学习中心考试中心考试动态子元素1--首页子元素2--学习中心子元素3--考试中心子元素4--考试动态子元素5子元素6子元素7CSS*{margin:0;padding:0;}body{overflow-y: scroll;-ms-overflow-style: none;scrollbar-width: none;}body::-w...
html+css——做一个简单的底部导航栏
qq_51869518的博客
07-23 5447
小项目由html和css实现。实现了网页底部的一个简单的导航栏样式，非常适合新手小白来上手练习的小项目，代码部分;html与css分开讲解和设计。简洁易懂，快来上手试试吧！如果你有更好的设计思路，欢迎底部留言或者私信我。...............
HTML的导航栏的代码@沁宁
weixin_63066781的博客
12-11 3399
运行效果图： 记得点赞，加关注哦！
html实现导航栏
最新发布
studyinstall的博客
05-19 896
【代码】【无标题】
底部导航栏怎么写？
杜永康的博客
08-29 2519
1.回忆一下，任何手机商城页面，底部导航栏都算固定在下面的，不管页面内容有多少，不管用户怎么滑动，底部导航栏始终在下面。3.点击导航栏上的图标或者文字时，所点的图标可能会有放大效果。4.不管页面颜色怎么改变，导航栏颜色始终不变，是独立的。以上为图像定位的知识，具体详细的内容，参见以上上链接。孰能生巧，当然，可以将代码研究一下，也可以作为模板套用。2.点击到导航栏上的图标或者文字时，会跳转另一页面。对于新手来说，多练，多练，多练！底部导航栏需要怎么写？
html底部固定菜单栏,HTML+CSS底部footer两种固定方式
weixin_39702479的博客
06-25 5314
网页常见的底部栏(footer)目前有两种：一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;body {padding-bottom: 50px;}.footer {position: fixed;left: 0px;bottom: 0px;width: 100%;height: 50px;background-color: #eee;z...
用HTML来做导航栏
qq_59080175的博客
06-29 1万+
text-decoration : none 用于清除 a 标签的下划线； list-style : none 用于清除 li 前面的小圆点； padding ：0px 因为导航栏里的文字并不是字数相等，所以为了美观，我们不去直接设置 盒子的宽度，而是用一个内边距给它撑开； float ：left 一浮都浮，使得所有盒子在一行显示； ul li a: hover 用来设置鼠标滑过的效果。 让我们看看最后的效果吧...
html关于将导航栏置于页面顶部
m0_58522778的博客
03-13 4048
访问网页时将页面下拉，导航栏依旧在页面最顶部 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .head{ border-bottom: 2px solid red; width: 100%;
手机移动端固定在顶部的导航栏代码
05-19
手机移动端固定在顶部的导航栏代码，支持iOS，Android（暂不支持WP）等系统以webkit为内核的浏览器，建议在PC端使用以webkit为内核的浏览器（如：Google Chrome）中缩小浏览器窗口宽度查看效果,PC端查看效果需要用...
JQuery使导航栏固定于网页顶部
12-15
4. **实现逻辑**：在JQuery代码中，可以设定一个阈值，比如当页面顶部与导航栏底部的距离小于某个值时，导航栏变为固定定位。这可以确保导航栏在合适的时候出现。 5. **参考示例**：提供的参考示例...
Bootstrap编写导航栏和登陆框
09-02
在本文中，我们将深入探讨如何使用Bootstrap框架来创建一个功能完备的导航栏和登录框。Bootstrap是一个流行的前端开发工具，它提供了预定义的CSS样式、JavaScript组件和HTML标记，可以帮助开发者快速构建响应式和...
固定导航浮动在顶部效果html代码
11-09
在网页设计中，"固定导航浮动在顶部效果"是一种常见的用户体验优化技巧，它使得用户在浏览长页面时能始终保持导航栏在视野范围内。这个标题所指的“固定导航浮动在顶部效果html代码”是一个实现这一功能的源码示例。...
网页带图标固定在右侧的右侧导航
01-22
本项目实现的是一个带有图标的固定在右侧的导航栏，它包括了固定定位、响应式设计以及返回顶部等实用功能。下面将详细讲解相关知识点： 1. **固定定位（Fixed Positioning）**： 在CSS中，`position: fixed;`属性...
html+css+javascript常用实例之 app首页效果
qq_29848853的博客
03-07 1734
首页底部导航栏
css+html模仿京东app底部导航栏
weixin_45631100的博客
12-26 2001
css+html模仿京东app底部导航栏 完成效果如下： 上下滑动页面，底部导航栏一直存在，位置不变 底部导航栏实现代码如下： 只需css写超简单代码 重点是footer标签，其余标签是为和京东导航栏一样而设置的样式 footer { width: 193rem; margin-top: 2rem; height: 25rem; background-color: white; padding-bottom: 1px; position: fixed; //定位 bottom: 0;
html底部跟屏导航栏
weixin_33924312的博客
06-11 169
2019独角兽企业重金招聘Python工程师标准>>> ...
html实现好看的多种风格导航菜单(附源码)
热门推荐
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
html div页面固定,将div固定浮动网页底部代码
weixin_28850145的博客
06-03 2344
div固定浮动网页底部CSS代码,非JS实现纯DIV CSS构造将DIV层静止浮动在网页阅读器底部的。CSS代码：position: fixed;bottom: 0;z-index: 100正文：1、position: fixed 相对定位的元素，相关于浏览器窗口进行定位。元素(例如DIV)的位子经由 "left", "top", "right" 以及 "bottom" 属性发展规定。2、bott...
html网页制作生成底部导航栏
12-14
在HTML网页制作中，生成底部导航栏有多种方式，以下是其中两种常用的方式： 1.使用HTML和CSS手动制作底部导航栏 在HTML文件中，可以使用`<footer>`标签来定义底部区域，然后在CSS文件中使用样式表对其进行修饰。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>底部导航栏</title> <style> footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; } footer a { color: #fff; text-decoration: none; margin: 0 20px; } </style> </head> <body> <!-- 页面内容 --> <footer> <a href="#">首页</a> <a href="#">分类</a> <a href="#">购物车</a> <a href="#">我的</a> </footer> </body> </html> ``` 在上面的例子中，`<footer>`标签定义了底部区域，使用CSS样式表对其进行修饰，其中`position: fixed;`使其固定在底部，`bottom: 0;`使其与底部对齐，`width: 100%;`使其宽度占满整个屏幕，`height: 50px;`定义了高度，`background-color: #333;`定义了背景颜色，`color: #fff;`定义了字体颜色，`text-align: center;`使其文字居中，`line-height: 50px;`定义了行高。`<footer>`标签内部的`<a>`标签定义了导航栏的链接，使用CSS样式表对其进行修饰。 2.使用框架组件模块生成底部导航栏 在移动app前端开发中，可以使用框架组件模块来生成底部导航栏。例如，在使用Hbuilder进行移动app前端开发时，可以使用mui框架提供的底部选项卡模板。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>底部导航栏</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="http://cdn.static.runoob.com/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet" /> <script src="http://cdn.static.runoob.com/libs/mui/3.7.1/js/mui.min.js"></script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">底部导航栏</h1> </header> <div class="mui-content"> <!-- 页面内容 --> </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-bars"></span> <span class="mui-tab-label">分类</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-cart"></span> <span class="mui-tab-label">购物车</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">我的</span> </a> </nav> </body> </html> ``` 在上面的例子中，使用了mui框架提供的底部选项卡模板，其中`<header>`标签定义了顶部栏，`<div>`标签定义了页面内容，`<nav>`标签定义了底部选项卡，`<a>`标签定义了选项卡的链接，`<span>`标签定义了选项卡的图标和标签。使用mui框架可以快速生成底部导航栏，并且可以对其进行自定义。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值