• atitit.导航的实现最佳实践and声明式编程


    atitit.导航的实现最佳实践and声明式编程

    1. 顶部水平栏导航 1

    2. 竖直/側边栏导航 1

    3. 选项卡导航 1

    4. 面包屑导航 1

    5. 标签导航 1

    6. 搜索导航 2

    7. 分面/引导导航 2

    8. 页脚导航 3

    9. 20. 在不同页面上使用相同的导航代码 3

    10. 结论大多数站点使用不仅仅一种导航设计模式 3

    11. 參考 4

    1. 顶部水平栏导航

    2. 竖直/側边栏导航

    3. 选项卡导航

    4. 面包屑导航

    作者:: 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com

    转载请注明来源: http://blog.csdn.net/attilax

    5. 标签导航

    标签导航

    标签经常被用于博客和新闻站点。它们经常被组织成一个标签云,导航项可能按字母顺序排列(通经常使用不同大小的链接来表示这个标签下有多少内容),或者按流行程度排列。

    标签是出色的二级导航而非常少用于主导航。他能够提高站点的可发现性和探索性。标签云通常出如今边栏或底部。假设没有标签云,标签则通常包含于文章顶部或底部的元信息中,这样的设计让用户更easy找到相似的内容。

    6. 搜索导航

    出式菜单和下拉菜单导航

    7. 分面/引导导航

    分面/引导导航(也叫做分面检索或引导检索)最常见于电子商务站点。基本上来说引导导航给你提供额外的内容属性筛选。如果你在浏览一个新的LCD显示器,引导导航可能会列出大小,价格,品牌等选顶。基于这些内容属性,你能够导航到匹配你的条件的项。

    引导导航在拥有巨大数量货物的大型电子商务站点中是非常宝贵的。用户通过直接搜索通常非常难找到他们想要的东西,而且添加了用户漏掉一个产品的或能性。比如他们可能搜索一个灰褐色的产品,但你可能将它标记了灰色或褐色,尽管它可能就是用户想要的东西。

    8. 页脚导航

    9. 20. 在不同页面上使用相同的导航代码

    很多网页上都有导航菜单,当进入某页时,菜单上对应这一项就应该变灰,而其它页亮起来。一般要实现这个效果,须要敲代码或专门为每一页做设计,如今靠CSS就能够实现这个效果。

    首先,在导航代码中使用CSS类:
    Home

    About us

    Contact us
    然后分别为每一页的Body指定一个id,和上面类同名。如。

    然后设计CSS例如以下:


    #home .home, #about .about, #about .about
    {
    commands for highlighted navigation go here
    }


    这里,当id设为home时,.home就会起作用,也就是class设为home的那一行导航条就会显示出特殊效果来。其它页也是如此。

    10. 结论大多数站点使用不仅仅一种导航设计模式

    大多数站点使用不仅仅一种导航设计模式。比如一个站点可能会用顶部水平栏导航作为主导航系统,并使用竖直/側边栏导航系统来辅助它,同一时候还用页脚导航 来作冗余,添加页面的便利度。当选择你的导航系统基于的导航设计模式时,你必须选择支持你的信息结构以及站点特性的方案。导航是站点设计的重要部分,它的 效果必须有坚实的基础设计

    11. 參考

    在不同页面上使用相同的导航代码_attilax_新浪博客.htm

    站点导航设计模式指南(1--6) 站长之家.htm

  • 相关阅读:
    【JZOJ3347】树的难题
    【JZOJ3379】查询
    【JZOJ3337】wyl8899的TLE
    【JZOJ3318】Brunhilda的生日
    【JZOJ3319】雪地踪迹
    2018暑假集训——待做且可尝试去做的题
    2018暑假集训专题小结 Part.2
    2018.07.13【省赛模拟】模拟B组 【GDOI2016模拟】作业分配
    2018暑假集训专题小结 Part.1
    2018.07.12【2018提高组】模拟B组 【NOIP2015模拟10.27】魔法阵
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/3915529.html
Copyright © 2020-2023  润新知