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 布局,在以后工作学习中 有很重要的作用

时间: 2024-08-13 05:46:12

Html 之菜单导航的相关文章

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

转-TabHost组件(二)(实现底部菜单导航)

http://www.cnblogs.com/lichenwei/p/3975095.html 上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定义View(ImageView+TextView)来设置一个底部菜单的样式 这边再补充一种更为灵活的方法,可以把TabWidget隐藏,用(RadioGroup+RadioButton)来代替,并利用监听器的方式来实现监听点击点击跳转Activity. 在讲解之前,先补充几点: 1.当我们取得TabHost的

转-TabHost组件(一)(实现底部菜单导航)

http://www.cnblogs.com/lichenwei/p/3974009.html 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面. TabHost选项卡,说到这个组件,不得不先说一件事情,翻翻谷歌提供给我们的API,我们可以发现这样的一段话: 它告诉我们,这个组件在安卓4.0之后已经被废弃了,建议我们新的程序应该使用Fragment组件来代替它. 其实并不出乎意料,使用过Tab

frame实现菜单导航

效果如下: main.html <html> <frameset cols="200,*"> <frame src="menu.html"> <frame src="pref.html" name="view_frame"> </frameset> </html> menu.html <html> <body> <h3>

学习制作菜单导航

之前自己学习时写的菜单导航: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css">

基于jquery宽屏菜单导航【精品】

demo预览地址:http://www.qhttl.com/content/view/2014/07/18/jiaoben75/jiaoben75/index.html 下载地址:基于jquery宽屏菜单导航 基于jquery宽屏菜单导航[精品],布布扣,bubuko.com

企业站常用的点击后弹出下拉菜单导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

web水平菜单导航

效果: HTML代码: <!doctype html><html><head><meta charset="utf-8"><title>菜单导航垂直菜单</title><link rel="stylesheet" type="text/css" href="style.css"></head> <body><ul&

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航

本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示 先来看原来的效果 改变后的效果,当然我已经做好了,最后只放出代码供大家参考,其实网上也有这方面的资料,但是不是很好用,我还是自己写了 改变后的效果 手风琴一直都是比较漂亮和受欢迎的,但是基于树多级别来说,做起来就比较麻烦,所以我这里也用了手风琴加树的模式来做 注:上面的图标都是乱添加的,并不代表意思 进入正文: 首先必须下载一些图标.可以自行百度网页小图标

利用ExpandableListView和gridview 显示可展开折叠菜单导航

这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupView和getChildView两种的重写来实现.在子列表项目比较多的情况下,可以通过GridView来布局子列表. 下面来说说ExpandableListView的适配器ExpandableListadapter的一些变量和方法: 一.首先:我们知道ExpandableListView分为父列表和子