在编写HTML页面时,会用到导航栏,那么导航栏怎么来编写呢 ?我们在这里说一下导航栏的编写方法。导航栏有多种不同的格式我们可以根据需要来进行选择。
我们在这里可以编写简单的导航栏。
<!DOCTYPE html> <html> <body> <div> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </div> </body> </html>
实现的功能如图片展示
上图是实现了垂直的导航栏,我们通过ul和li标签可以来实现,在a标签中我们可以添加超链接,设置我们的超连接功能。如果需要,我们还可以设置水平的导航栏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style> .nav ul li { float: left; background-color: #e7ffb0; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </div> </body> </html>
我们可以在<style>里面设置他的水平导航栏 ,用float,意思是浮动,可以加参数:left 左;right 右;none 默认值。元素不浮动,并会显示在其在文本中出现的位置;inherit 规定应该从父元素继承 float 属性的值。在<style>标签中我们还可以设置背景颜色。
效果图如下
再根据我们的需要来设计其他的一些样式。这里我们拿水平栏,元素居中添加背景色为例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style type="text/css"> .nav { width: 960px; height: 60px; border: 1px solid red; margin: 100px auto; } .nav ul li { float: left; background-color: #e7ffb0; } .nav ul li a { display: block; width: 240px; text-align: center; line-height: 60px; text-decoration: none; color: #5a3467; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </div> </body> </html>
这样我们就做好了简单的可以使用的导航栏了 。效果图如下
这样我们还可以设置高级点的,给它设置一个鼠标悬停方法
.nav ul li a:hover { cursor: pointer; background-color: #645e55; color: #cdff83; }
这样鼠标悬停就可以有别的颜色的效果展示。
我们解释一下一些属性:text-align 这个是文本对齐的方式,就是我们导航栏里面的文本的对齐方式;text-decoration是对文本的修饰方式 none为定义标准的文本,underline为下划线等;cursor: pointer为光标呈现为指示链接的指针(pointer为一只手)。如果还有什么不懂得可以看这篇文章 http://www.w3school.com.cn/html5/index.asp
相关推荐
网页顶部导航菜单,简易CSS样式,宽度,高度可自行调整。
ToolBar 隐藏掉系统原先的导航栏 clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,clear 就要放在最后。 Bootstrap 模态框(Modal)插件 ...
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...
先来看下iPhone X机型的样子 上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示 h5做成的移动端页面,常见...top:0等常规写法,就会出现头部的导航栏被
10.9 在页脚区域添加导航栏 10.10 添加可折叠的导航按钮 10.11 实现可折叠的输入表单 10.12 实现手风琴样式的折叠面板 10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚 10.15 最简单的手机相册 ...
3-9 导航条 3-10 特殊特效 第三部 分程序设计浅谈 第4章 程序写作浅谈 4-1 Javascript写作概念 4-2 Javascript写作格式 4-3 Javascript语句格式 4-4 隐藏Javascript程序代码 4-5 Javascript最好写在原始代码的哪里?...
修改顶部导航栏 header添加栏波浪,来源 再次修改栏文章内容页面,效果比以前好些 2019.12 优化了几个代码,结构更清晰,修复了几处CSS显示问题 修改文章内容显示宽度,和一些标签样式 更新了 (画廊)标签可设置...
在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。...
调整产品分类的写法以避免因分类过多导致的高度不够用 调整会员中心发布文章字数判断方式,更准确 修复熊掌号推送在新版编辑器下可能无法正常推送的问题 修改会员中心发布的文章为待审状态 修复网站开启ssl后弹窗...
<br>5.4 导航位置 <br>5.4.1 顶部导航 <br>5.4.2 底部导航 <br>5.4.3 左导航 <br>5.4.4 右导航 <br>5.4.5 中心导航 <br>5.5 导航的一致性 <br>5.6 导航和滚动 <br>5.7 导航和...
<br>5.4 导航位置 <br>5.4.1 顶部导航 <br>5.4.2 底部导航 <br>5.4.3 左导航 <br>5.4.4 右导航 <br>5.4.5 中心导航 <br>5.5 导航的一致性 <br>5.6 导航和滚动 <br>5.7 导航和...
2.9.1 写法优先权 2.9.2 选择符优先权 2.9.3 样式继承 2.9.4 !important语法 2.10 代码注释 2.11 CSS开发环境与调试环境 第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么 3.1.2 如何使用div 3.1.3 理解div ...
2.修复:修复了手机版本下会员中心编辑邮箱和手机时,无法打开导航栏的问题 3.优化:用户提交订单时,增加了对收件信息的验证 S-CMS医院建站系统 v5.0 build20200731更新说明: 1.优化:对上传文件模块的反馈提醒做...
修复:修复了后台导航栏不显示表单管理菜单的BUG2.优化:优化了后台功能模块权限的分配3.新增:商品分类模块新增了自定义链接功能S-CMS电子商城系统系统(含微信小程序)v5.0 bulid20200917更新说明:1.修复:修复了...
• 4.1.htm 条件语句内单行代码的写法 • 4.2.htm 变量赋初值 • 4.3.htm if…else举例 • 4.4.htm 用else进行更多选择 • 4.5.htm if语句的嵌套之一 • 4.6....
• 4.1.htm 条件语句内单行代码的写法 • 4.2.htm 变量赋初值 • 4.3.htm if…else举例 • 4.4.htm 用else进行更多选择 • 4.5.htm if语句的嵌套之一 • 4.6....
46、修复 当开启顶部导航固定、头像区域固定时,滚动页面出现页面、元素跳动,及元素闪烁等问题 47、修复 dintval BUG 48、优化 HTTPS兼容性优化 49、修复 目前系统内存在的部分小Bug 50、【轻量级 PR】:修复 一处...
PR】:修复target书写错误问题44、【轻量级 PR】:修复 在宽屏模式下点击切换配色时,宽屏状态被破坏且无法切换的问题45、【轻量级 PR】:修复 在PHP 5.3下核心报错的Bug46、修复 当开启顶部导航固定、头像区域固定...
2.3 综合案例分析—导航条在项目中的应用/37 2.3.1 需求分析/37 2.3.2 效果界面/38 2.3.3 功能实现/38 2.3.4 代码分析/40 2.4 本章小结/41 第3章 jQuery操作DOM /42 3.1 DOM基础/43 3.2 访问元素/44 3.2.1...
46、修复 当开启顶部导航固定、头像区域固定时,滚动页面出现页面、元素跳动,及元素闪烁等问题 47、修复 dintval BUG 48、优化 HTTPS兼容性优化 49、修复 目前系统内存在的部分小Bug 50、【轻量级 PR】:修复 ...