前端开发——导航栏的制作

最新推荐文章于 2024-03-08 21:23:34 发布
VIP文章 最新推荐文章于 2024-03-08 21:23:34 发布
阅读量9.1k 收藏 12
点赞数 3
文章标签： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40172361/article/details/79595892
版权

在前端开发中，导航栏制作是比较基本的操作，这是我写的导航栏的代码。

先写基本的HTML文件，用div框起来，使用ul标签。


结果是这样的


使用css文件设置样式


先给导航栏设置宽，高和背景颜色，然后使用p标签左浮动，ul标签右浮动，使其脱离文档流在一行显示；将p标签的line-height和top的height值设置一样，使p标签居中显示；line-height设置垂直居中，text-align设置水平居中，导航栏完成

最低0.47元/天 解锁文章
qq_40172361
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端网页期末大作业
01-10
主页设计布局是在网站的左上角是网站标题名称和导航栏菜单，菜单栏主要分为晴空、海边、田野分别用a标签的href属性链接到对应的网易云音乐链接，右上角有个人头像，点击会旋转360度，并播放对应的背景音乐。网站导航栏下方的主体内容分为五个部分，分别是晴空、海边、田野、青春、成熟，每部分内容都包括一张图片和对应主题的文字介绍，图片跟文字的排版使用div+css样式控制宽高和间距大小。网页底部是使用footer标签的Copyright声明。 首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片放到pic文件夹中，背景音乐放到music文件夹中。
用VB做导航菜单界面
03-14
配合http://topic.csdn.net/u/20100311/09/1e11f535-5bd9-45aa-adeb-3c70f0a967bf.html用
WordPress建站入门教程：如何创建菜单和设置前端导航菜单？
boke112的博客
03-08 1147
今天boke112百科就继续跟大家分享WordPress站点如何创建菜单和设置前端导航菜单
BootStrap制作导航条实例代码
11-23
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 bootstrap 导航条摸索了好久，要不就是左边和右边不会水平对齐，要不就是颜色不一样，菜鸟最后终于搞定，直接把代码放这里，以后直接用 代码如下所示： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
导航条菜单制作
05-25
前端首页开发，导航条菜单制作，使用jQuery，html等技术
导航栏的制作
WYF857446152的博客
04-14 4279
我们在看到一些网页的布局中，浮动总是离不开身影，浮动目的为了完成实现水平布局，有一个良好的布局，背后一定藏着一个良好的思维，请看思维导图 浮动为了实现水平布局的完成，在使用浮动之后元素脱离了文档流，使元素可以实现水平布局 这时就通过float：left/right；进行自己想要的布局。 浮动的特性：1.所有标签同排显示2.行标签适应所有CSS特性3.默认内容撑开盒子宽高4.元素脱离文档流 加入了浮动之后，网页布局还有许多为了不影响以后的布局，所以一般我们要清除浮动防止父级元素无法检测到子级的存在，高
5.前端入门之制作一个导航条
d3582077的专栏
02-03 361
ul也设置float:left是因为，它的左右还要带个img标签，左右边角封闭，当然你如果不需要这个圆角矩形的效果，不带img图片，你也可以不用设置float:left。用ps的切片工具，把图片的两边取下来，还有中间也要取一部分（不是文字区域），分隔线的图片也取下来，那么就会有四张图片，如下：（它们的高度都是一致的）这里的li背景图片是分隔符，我们只需要每项前有一个就行，所以no-repeat不平铺，实现了有分隔图片的效果。源文件就不上传了，你们可以把文章里那几张图片另存为，然后试一下。
【前端WEB】1、使用HTML+CSS+JS实现网页导航栏效果（原创含源码）
weixin_52938153的博客
12-24 1921
导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的导航栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
手把手教你制作网页导航栏
热门推荐
m0_56329037的博客
05-01 3万+
手把手教你制作网页导航栏 众所周知，导航栏是网页的重要组成部分，本篇文章将会带你由浅入深的制作导航栏，子菜单，样式风格变化等。 导航栏的重要部分——ul标签 在导航栏中的文字，都是以无序列表 ul 和 li 标签实现的。 下面通过几个小例子来为大家介绍如何实现网页导航栏的制作。 1.用ul标签做一个简单般的菜单样式，首先在一个div盒子里创建一个无序列表，如图所示 运行结果如下图所示： 2.之后我们可以让列表横过来，需要用到css的浮动样式也就是float标签。 我们需要让它向左浮动如图所示： 运行结果如
CSS嵌套导航栏
北极鱼
07-31 1693
在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉,或者在一个只能读纯文字的手持设备--它们将无算从你的网站读到所有的数据.如果你的委拖人不注重这方面,那么告诉他繁杂的菜单会阻止搜索引擎的排名.(木木:像禅意
HTML页嵌套导航栏且实现页面跳转
PanTianTianO的博客
04-27 1万+
最近正在研究用python解析表格并用图表的形式对数据进行展示，由于是个小demo，前后就一起写了，然后在写前端页面的时候想加一个导航栏，刚开始使用的是用table去进行规划，最后的效果是横向导航栏，但是我期望的是侧边导航栏，于是又开启了新一轮的摸索… 使用iframe进行页面嵌套 将整个页面划分为一个大的div，然后分成两个小的div，左边的div嵌套导航页面，右边的div展示需要展示的东西 下图为嵌入导航页的代码，src为嵌套页面路径，配置一下宽高，然后左边悬浮 <div class="lef
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
01-30
5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用 5.9 搜索手机通讯录自动完成——使用ContentResolver 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件资源管理...
Google Android SDK开发范例大全(PDF完整版4)（4-4）
01-30
5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用 5.9 搜索手机通讯录自动完成——使用ContentResolver 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件资源管理...
Google Android SDK开发范例大全(PDF高清完整版3)（4-3）
01-30
5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用 5.9 搜索手机通讯录自动完成——使用ContentResolver 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件资源管理...
Google+Android+SDK开发范例大全
03-07
第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——AutoCompleteTextView与GoogleSearchAPI 9.3 前端产生QRCode二维条形码——GoogleChartAPI 9.4 以经纬度查找目的地位置——...
Google Android SDK 开发范例大全02
03-26
5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用-p178 5.9 搜索手机通讯录自动完成——使用ContentResolver-p82 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件...
企业数字化转型暨数据仓库（数仓）建设方案.pptx
最新发布
05-06
企业数字化转型暨数据仓库（数仓）建设方案.pptx
2024年中国LED切割灯行业研究报告.docx
05-06
2024年中国LED切割灯行业研究报告
目前世界上最好的机器学习&深度学习&神经网络&图神经网络&卷积网络&多层感知机画图工具&基于PPT
05-06
在当今快速发展的人工智能领域中，一款集成了机器学习、深度学习、神经网络、图神经网络、卷积网络及多层感知机可视化功能的画图工具脱颖而出，成为全球范围内最受欢迎和认可的工具之一。这款工具不仅仅是一个简单的绘图软件，它的设计初衷是为了让复杂的网络结构和算法直观化，从而帮助研究者、学者及开发人员更容易地理解和分享他们的工作。 最令人印象深刻的特色之一是它基于PPT的编辑能力，这允许用户在熟悉的PPT编辑环境中创建、编辑和展示复杂的网络结构。用户可以利用拖拉组件、调整尺寸、修改颜色和形状等功能，无缝地将科研成果或项目展示集成到演示文稿中，极大地提高了工作的效率和表现力。 该工具不仅支持广泛的网络结构和模型，还包含丰富的库和模块，让用户能够轻松自定义和扩展自己的模型。它的用户界面友好、直观，无论是机器学习的新手还是资深研究员，都能快速上手，将精力更多地集中在创新和研究上，而不是图形的绘制和编辑上。 此外，它强大的共享和合作功能，使得团队成员可以实时共享他们的成果，促进了知识的交流和项目的进展。这款工具不仅改善了人工智能领域内部的工作方式，也为更广泛的受众提供了学习和理解复杂算法的窗口。 总
前端当中垂直二级导航栏制作
06-01
垂直二级导航栏可以通过 HTML、CSS 和 JavaScript 实现。下面是一个简单的示例： HTML： ```html <div class="nav"> <ul class="main-nav"> <li><a href="#">导航1</a> <ul class="sub-nav"> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> </ul> </li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a> <ul class="sub-nav"> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> </ul> </li> </ul> </div> ``` CSS： ```css .nav { width: 200px; } .main-nav { list-style: none; margin: 0; padding: 0; } .main-nav > li { position: relative; } .main-nav a { display: block; padding: 10px; background-color: #eee; color: #333; text-decoration: none; } .sub-nav { display: none; position: absolute; top: 0; left: 200px; list-style: none; margin: 0; padding: 0; } .main-nav li:hover .sub-nav { display: block; } .sub-nav li a { display: block; padding: 10px; background-color: #ddd; color: #333; text-decoration: none; } ``` JavaScript： ```javascript // 如果需要对主导航的当前项添加样式，可以使用以下代码 var current_url = window.location.href; var main_nav_links = document.querySelectorAll('.main-nav a'); for (var i = 0; i < main_nav_links.length; i++) { if (main_nav_links[i].href === current_url) { main_nav_links[i].classList.add('current'); } } ``` 这个示例中，我们使用了一个 `ul` 列表来创建导航，每个导航项都可以包含一个子导航。我们使用了 CSS 的 `position` 属性来定位子导航，以及 `display` 属性来控制子导航的可见性。当鼠标悬停在主导航上时，我们通过 CSS 的 `:hover` 伪类来显示子导航。对于 JavaScript 部分，我们可以在当前页面的链接与主导航链接相匹配时，为主导航项添加一个 `.current` 类。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值