Html 之菜单导航（二）
网页菜单
网页菜单是一个网页的重要部分，它提供了用户可以对网站所有页面的导航，也是可能是内容的分类，例如淘宝 衣服 鞋子 水果 电脑 等等之类，也可以是
类似于游戏宣传网页一样子，酷炫的js特效 flash特效 等等。 菜单是很重要的部分 那么菜单的设计和布局，也需要熟知道，那么我们找个某网的菜单，来仿照做一
个简单的web网页间跳转 导航。
需要用的一些标记:
<a> 标记，它就是一个超链接标记 HTML超链接
<img>标记，显示图片使用的标记 HTML图片
一些 css 样式。后面文章会做详细说明。
首先新建一个网页，新建一张页面，名称命名为 index.html，如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.baidu.com">初见倩女</a>
<a href="#">快速成长</a>
<a href="page2.html">进阶宝典</a>
<a href="page3.html">线下社交</a>
</body>
</html>
新建一个 page2.html,随意在body 中书写一些内容.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style=" text-align: center;">
<span style="color: green;background-color: red;">这是页面 page2！！！！</span>
</body>
</html>
新建一个 page3.html,随意在body中书写一些内容.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style=" text-align: center;">
这里是页面333333
</body>
</html>
保存完毕后，可以试试点击后的效果。
项目结构如图:
可以发现： a标记的href 属性可以连接本地文件夹下的其它html 网页，也可以是远程的网络资源地址。
此时可以发现 index page2 page3 这三张页面是在同一个目录下，那么 如果我们把一个文件放在其它文件夹下，还可以正常访问吗？
答案是否定的，那么 下面来说路径的问题：
首页，我们都知道电脑有 C盘 找一个文件一级一级找下去，会有一个完整的文件路径才可以找到对应的文件。网站也是同理。
当前网站项目中，根目录为文件夹:qnyhWeb ,index是放置于这个文件夹下。
相对路径: 相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。 简而言之，就是相对于当前文件的路径。
我们把之前的文件目录改成如下：
可以发现之前，a标记 href 中写到路径 点击之后找不到 page2 页面了，那么我们如何修改href的值 来找到这个文件呢？
../ 表示当前目录，路径可以修正写为: ../mulu2/page2.html （相对路径的写法）
绝对路径是指目录下的绝对位置，直接到达目标位置。
路径可以修正写为: mulu2/page2.html
如图：
Image 标记 使用方式 同上，一下给一段html ，感兴趣的可以看下效果：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<body> <img src="http://res.qn.netease.com/qt/15/0907_jobs//images/ys-header_6682a0d.jpg" style="width:200px; height: 200px;"/>
<a href="http://www.baidu.com">初见倩女</a>
<a href="#">快速成长</a>
<a href="mulu2/page2.html">进阶宝典</a>
<a href="page3.html">线下社交</a>
<img src="http://res.qn.netease.com/pc/fab/20160803145343/img/share_c300e1b.jpg" style="width:200px; height:200px;"/>
</body>
</html>
Image
下节会介绍CSS 样式，CSS样式就好比网页的衣服，学会使用Div+css 布局 或者table 布局，在以后工作学习中 有很重要的作用
Html 之菜单导航（二）的更多相关文章
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout（二）菜单导航
一.前言 上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始. 二.实现 这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护 ...
- 基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- 转-TabHost组件(二)（实现底部菜单导航）
http://www.cnblogs.com/lichenwei/p/3975095.html 上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定 ...
- 安卓开发笔记——TabHost组件(二)（实现底部菜单导航）
上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定义View(ImageView+TextView)来设置一个底部菜单的样式 这边再补充一种更为灵 ...
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事（续）——主界面
引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...
- 转-TabHost组件(一)（实现底部菜单导航）
http://www.cnblogs.com/lichenwei/p/3974009.html 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用wind ...
- 利用ExpandableListView和gridview 显示可展开折叠菜单导航
这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupVi ...
- 安卓开发笔记——TabHost组件(一)（实现底部菜单导航）
什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面. TabHost选项卡,说到这个组件, ...
- Android：有关下拉菜单导航的学习（供自己参考）
Android:有关==下拉菜单导航==的学习 因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航
系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示 先来看原来的效果 改变后的效果,当然我已经做好了 ...
随机推荐
- 关于链接到QQ客服的问题，原来只需要在a标签上加一串话而已呐~~~~
<a class="btn" target=blank href=tencent://message/?uin=&Site=www.woyouli.com&M ...
- PDF 补丁丁 0.5.0.2691 发布（替换字库新增字符映射功能）
新版本在替换 PDF 字体功能中增加了替换字符的功能. 某些 PDF 文档可能由于编码错误的问题,复制出来的文本是乱码. 对于这种文档,可以使用此功能将错误的编码映射到正确的字符上,从而实现修复文档的 ...
- innodb log file size 配置估算以及修改
root@localhost:(none) 06:22:17>pager grep seq PAGER set to 'grep seq' root@localhost:(none) 06:30 ...
- List 集合线程安全测试
最近在做一些代码整理工作,涉及到List 线程安全问题,查了一些资料.网上有些资料说List 增减成员(Add , Remove) 是安全的,但不保证成员属性值访问安全性,及禁止对 List 跨线程遍 ...
- 转-httpd 2.4.4 + mysql-5.5.28 + php-5.4.13编译安装过程
一.编译安装apache 1.解决依赖关系 httpd-2.4.4需要较新版本的apr和apr-util,因此需要事先对其进行升级.升级方式有两种,一种是通过源代码编译安装,一种是直接升级rpm包.这 ...
- 爬虫：selenium + phantomjs 解决js抓取问题(一)
selenium模块主要用来做测试,模拟键盘.鼠标来操作浏览器. phantomjs 就像一个无界面的浏览器一样. 两个结合能很好的解决js抓取的问题. 测试代码: #coding=utf-8 fro ...
- 进程间通信--pipe
管道的两种局限性: 历史上,他们是半双工的(即数据只能够在一个方向上流动). 现在某些系统也提供全双工管道,但是为了最佳的移植性,我们决不应该预先假定系统使用此特性 他们只能够在具有公共祖先的进程间使 ...
- Android Activity中获取当前焦点的控件,自动化输入EditText
获取焦点的view对象 View view=getWindow().getDecorView().findFocus(); 如果是EditText if(view instanceof EditTex ...
- spring知识
Spring以IoC.AOP问主要思想,鞥协同struts,hibernate,webwork,jsf,iBatis等框架. Spring最主要的思想史IoC(Inversion of Control ...
- 开源一个完整的iOSApp《丁丁美图》供初学者学习
学习iOS开发的时候,得益于开源社区的大量开源项目,去年开始购买了个人开发者账号,写了这个练手项目<丁丁美图>,并上传到了App Store(Ipad版本被驳回也懒得处理).现在将代码开源 ...