网页菜单

网页菜单是一个网页的重要部分，它提供了用户可以对网站所有页面的导航，也是可能是内容的分类，例如淘宝衣服鞋子水果电脑等等之类，也可以是

类似于游戏宣传网页一样子，酷炫的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 的手风琴加树结构做菜单导航有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示先来看原来的效果改变后的效果,当然我已经做好了 ...

随机推荐

实际项目中的一个angularjs 应用
实际需求:通过下拉框,选择自己需要的类型,创建元素(要求必须是输入点击保存了才能出现对应的类型块) html代码: <div class="list-panel-data"& ...
今天遇到了批量删除 redis 某个前缀的所有 key，发现只能是这么解决。
redis-cli KEYS "php*" | xargs redis-cli DEL 利用 linux的管道输出命令 xargs 根据返回结果逐条删除. 上面这条命令可 ...
自定义view文字垂直居中
FontMetricsInt fontMetrics = deletePaint.getFontMetricsInt(); int baseline = rect.top + (rect.height ...
windbg无法下载符号文件
symbol file path: srv*d:\symbolslocal*http://msdl.microsoft.com/download/symbols 即使设置是对的,但我用.reload, ...
Java线程(七)：Callable和Future
转自:http://blog.csdn.net/ghsau/article/details/7451464 本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果. C ...
Ganglia安装搭建
Ganglia的安装部署前言 1 一.Ganglia组件 1 二.安装依赖 2 三.安装expat依赖 2 四.安装confuse 3 五.安装ganglia 4 六. 服务端配置(gmetad 节 ...
<java基础学习>RE 基础语法
public class MyFirstJavaProgram{ public static void main(String[] args ){ System.out.println("H ...
ROS语音交互（三）科大讯飞语音在ROS平台下使用
以上节tts语音输出为例下载sdk链接:http://www.xfyun.cn/sdk/dispatcher 1.下载SDK,解压: 2.在ROS工作空间下创建一个Package: catkin_c ...
C++小项目：directx11图形程序（一）：主框架
最近在学习DIRECTX11,在学习过程中编写了一个程序,到现在发现这个程序也有几行代码了,结构还算整齐,就想把这个程序分享出来,其中涉及到了C++程序的架构,windows窗口程序编写,和Direc ...
SQL查询关于相对路径、矢代、绝对路径、递归、计算列的速度对比跟优化-SOD群记录
1秒查原本递归的查询. 适用于:上下级.多层查询 -- Get childs by parent id WITH Tree AS ( SELECT Id,ParentId FROM dbo.Node ...

Html 之菜单导航（二）