html+css——做一个简单的底部导航栏

VIP文章 已于 2022-07-28 18:25:31 修改
阅读量5.2k 收藏 20
点赞数 9
分类专栏： 前端项目 文章标签： html css
于 2022-07-23 12:26:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51869518/article/details/125945546
版权

ps：小项目由html和css实现

目录

项目设计 

效果图

设计

html部分

 css部分

源代码

项目设计 

效果图

  话不多说，先直接上一下完成后的效果图；

   通过以上效果图可以大致想一下你的思路，以及设计的方法。然后可以先自己动手试试。然后在与我的设计思路进行比对，如果你有更好的设计思路。欢迎分享到评论区哦！

设计

html部分

  首先使用一个div标签，同时添加一个属性id。注意id名称的定义是不允许重复的

最低0.47元/天 解锁文章
valiant小东
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端代码分享——常用的手机端底部导航栏（内含源码）
Why_does_it_work的博客
07-14 2308
【代码】前端代码分享——常用的手机端底部导航栏。
js+html实现网页底部菜单栏
06-06
利用js和html做的一个简单底部菜单栏
Android-Flutter-BottomNavigationBar：该如何优雅实现底部导航栏
最新发布
2301_76190858的博客
03-31 292
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。欢迎大家一起交流讨论啊~如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。[外链图片转存中…(img-T3VZ61QS-1711857667768)]欢迎大家一起交流讨论啊~本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录。
html实现好看的导航主页(附源码)
xcLeigh
11-25 1万+
html实现好看的导航主页(附源码) html实现好看的导航主页，html导航博客，html导航界面，通过头部主菜单，中部搜索导航，尾部悬浮出现底部菜单，右侧音乐播放按钮，背景酷炫的动态效果，实现好看的导航主页。用作自己的常用辅助导航界面，还有屏幕保护界面，全屏(F12)查阅效果更加。
底部导航栏和左右滑动
SunRains
11-06 902
基本上每个APP应用都有自己的导航栏，但是使用的方法各有不同，常用的方法如下： （1）使用LinearLayout+TextView实现。 （2）使用RadioGroup+RadioButton实现。 （3）使用TabLayout+ViewPager实现。 （4）使用BottomNa...
html 一款底部导航的实现
学海无涯苦造舟
10-14 4794
</html> <!DOCTYPE html> <html> <head> <meta name="taoxue" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/jquery.mobile-1
HTML5+CSS3制作底部导航栏
热门推荐
weixin_42442856的博客
10-20 2万+
目录 前言 一、底部导航栏示例图 二、HTML框架 1.一号盒子 2.二号盒子 总结 ​​​​​​ 前言 在日常的网上冲浪中，我们常常在网页最底部，看到一大堆链接，非常整齐，一目了然，那么是如何实现的呢？...... 提示：以下是本篇文章正文内容，下面案例可供参考 一、底部导航栏示例图 图1-底部导航栏 二、HTML框架 1.一号盒子 由图1可知，该部分由两个个盒子划分，我们先搭建一号盒子的框架，这里我们用，<dl>...
底部导航栏怎么写？
杜永康的博客
08-29 2409
1.回忆一下，任何手机商城页面，底部导航栏都算固定在下面的，不管页面内容有多少，不管用户怎么滑动，底部导航栏始终在下面。3.点击导航栏上的图标或者文字时，所点的图标可能会有放大效果。4.不管页面颜色怎么改变，导航栏颜色始终不变，是独立的。以上为图像定位的知识，具体详细的内容，参见以上上链接。孰能生巧，当然，可以将代码研究一下，也可以作为模板套用。2.点击到导航栏上的图标或者文字时，会跳转另一页面。对于新手来说，多练，多练，多练！底部导航栏需要怎么写？
HTML的导航栏的代码@沁宁
weixin_63066781的博客
12-11 3315
运行效果图： 记得点赞，加关注哦！
导航栏html代码
qq_55299191的博客
10-11 2万+
效果如下 html 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航制作</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/public.css"> </head>.
html+css+javascript常用实例之 app首页效果
qq_29848853的博客
03-07 1607
首页底部导航栏
一个HTML5底部导航栏特效.rar
07-10
一个HTML5底部导航栏特效，显示在网页最底部的小菜单栏，页脚导航特效，带动画特效，右侧还有小图标，美化的挺漂亮，CSS3代码，运行于支持HTML5的浏览器中，移动设备的浏览器效果最佳。
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
html+jquery+CSS实现最简单的右侧导航栏效果
12-31
html+jquery+CSS实现最简单的右侧导航栏效果
底部导航栏 js html css
07-14
底部导航栏 js html css
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
html+css实现固定导航栏
芊嵛
12-07 1287
为什么搜索那么多方式都不能用，又乱又杂，我不信邪，自己总结写了一种固定导航栏的方式，希望能帮到你。
html中的底部导航栏,html中导航栏固定在头部或者底部
weixin_28932617的博客
06-09 2109
demo.body{width: 98%;height: 200%;}.nav{background: url("global_nav_bg.png") repeat-x scroll 0 0 transparent;height: 35px;width: 100%;z-index: 9998;position: fixed;left: 0px;}.top{top: 0px;}.bottom{bo...
HTML+bootstrap+css做一个导航栏包含下拉菜单代码
11-26
以下是一个使用HTML、Bootstrap和CSS制作的带有下拉菜单的导航栏的示例代码： ```html <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> ``` 这段代码使用了Bootstrap的导航栏组件和下拉菜单组件。其中，`navbar`类定义了导航栏的基本样式，`navbar-brand`类定义了导航栏中的Logo，`navbar-toggler`类定义了导航栏的折叠按钮，`navbar-nav`类定义了导航栏中的菜单项，`nav-item`类定义了菜单项的样式，`nav-link`类定义了菜单项中的链接样式，`dropdown`类定义了下拉菜单的样式，`dropdown-menu`类定义了下拉菜单的菜单项样式，`dropdown-item`类定义了下拉菜单中的菜单项样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

valiant小东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值