`
rebecca
  • 浏览: 314967 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

横向导航学习

阅读更多

(一)今天学习了一下横向导航设计,利用 CSS 布局实现导航与 table 布局有很大区别 ^^

(二)传统的表格式导航制作如下代码,利用 table

简单实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>table方式实现tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table width=”800”  height=”24” border=”0 ”  cellpadding=”0”  cellspacing=”0”  bgcolor=”#FFFFFF”>
 <tr  align=”center”>
     <td  bgcolor=“#ececec”><a href=“#”>首 页</a></td>
     <td  bgcolor=“#ececec”><a href=“#”>新 闻</a></td>
     <td  bgcolor=“#ececec”><a href=“#”>参 考</a></td>
     <td  bgcolor=“#ececec”><a href=“#”>Blog </a></td>
     <td  bgcolor=“#ececec”><a href=“#”>论 坛</a></td>
     <td  bgcolor=“#ececec”><a href=“#”>其 它</a></td>
</tr>
</table>
</body>
</html>

 

 

 

 效果图如下:
 

注意:把边框和边距都设为 0 ,隐藏表格线;设定每个单元格中的文本居中对齐。这样就实现了一个简单的横向导航。( table 方法的要点是:先设计导航数据表,再将导航内容装入每个单元格中。)

(三)利用 CSS 来设计它。 CSS 就是为了实现表现与内容的分离。

html 文件中编写如下代码(上下省略):

 

<div id=”nav”>
<ul >
<li><a href=”#” id="current">首 页</a></li>
<li><a href=”#”>新 闻</a></li>
<li><a href=”#”>参 考</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>论 坛</a></li>
<li><a href=”#”>其 它</a></li>
</ul>  </nav>

 

CSS 文件中代码如下(为了方便测验, CSS 代码放到 html head 中即可,详情如下):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head>
<title>CSS方式实现tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
<!--
#nav li {
   float:left;
   display:inline;
   
}
#nav li a{
   color:#000000;
   text-decoration:none;
   paddding-top:4px;
   display:block;//使a 变为块状对象,下面就可以对它设定高宽等
   width:97px;
   height:22px;
   text-align:center;
   background-color:#ececec;
   margin-left:2px;
}
#nav li a:hover{
   background-color:#bbbbbb;//鼠标移到频道上出现响应
   color:#ffffff;
}
#nav li a #current{
   background-color:#2788da;
   color:#ffffff;
}
#nav{
   
   height:26px;
   border-bottom:2px solid  #2788da;
}

-->
</style>

</head>
<body>
<div id="nav">
<ul>
<li><a href=”#” id="current">首 页</a></li>
<li><a href=”#”>新 闻</a></li>
<li><a href=”#”>参 考</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>论 坛</a></li>
<li><a href=”#”>其 它</a></li>
</ul>
</div>
</body>
</html>

 

 效果图如下,当鼠标放到导航上时,背景色会变色发生响应。


 

( ) 相比较 table css 的实现, CSS 优势十分明显,代码简洁灵魂,可重用,利于维护。

 

( ) 调整 CSS 代码结合 PS 做背景图片,最终设计的横向导航如下:



(六)导航还有很多设计类型,常见的纵向导航,还有像 javaeye 网站的二层复合式导航结构,还有下拉菜单式 / 弹出式导航,如果有机会,都要亲自一一实现去学习。

  • 大小: 11.1 KB
  • 大小: 9.1 KB
  • 大小: 7.5 KB
3
0
分享到:
评论
1 楼 qwjcool 2008-11-15  
加油

相关推荐

    导航汇总(横向导航 竖向导航 三级导航 二级导航)

    1. **横向导航**:横向导航通常位于页面顶部,它简洁明了,适用于展示主要的类别或功能。这种布局节省空间,易于用户快速识别。"横向导航不用点击"可能指的是悬浮式导航,即当用户滚动页面时,导航栏始终保持可见。 ...

    3级横向导航菜单

    通过研究和理解这些代码,开发者可以学习如何构建自己的3级横向导航菜单,并根据实际需求进行定制。此外,还可以参考现有的开源框架和库,如Bootstrap或Foundation,它们通常提供了现成的导航菜单组件,便于快速开发...

    div+css+ul-li制作横向导航栏

    以上代码创建了一个基本的横向导航栏,你可以根据需要调整颜色、字体、边距等细节以适应你的设计风格。 **拓展知识点:** 1. **响应式设计**:为了适应不同设备的屏幕尺寸,可以使用媒体查询(`@media`)来改变导航...

    很好看的二级横向导航菜单

    标题中的“很好看的二级横向导航菜单”是指一种在网页设计中常见的交互元素,它用于组织和展示网站的层级结构,使用户能便捷地访问不同级别的页面。这种类型的导航菜单通常出现在网页顶部,以水平布局展示一级菜单项...

    横向导航栏+动态树连在一起的

    在IT行业中,构建用户友好的界面是至关重要的,而横向导航栏和动态树形结构是两种常见的交互元素。本文将详细解析"横向导航栏+动态树连在一起"的设计概念及其应用,结合压缩包中的yahaitt_ext_dynamicTree资源,帮助...

    第七天_横向导航菜单

    第七天 横向导航菜单今天我们开始学习《十天学会web标准(div+css)》的html列表,包含以下内容和知识点:

    3级横向导航菜单.rar

    在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速理解和访问网站的各个部分。一个良好的导航系统可以提升...通过学习和应用这些知识,开发者可以创建出高效且用户友好的多级横向导航菜单,提升网站的整体品质。

    菜单js特效, 仿flash(横向导航和竖向导航)

    本篇将详细讲解"菜单js特效,仿Flash(横向导航和竖向导航)"这一主题,包括其原理、实现方法以及实际应用。 首先,我们需要理解JavaScript (js) 是一种客户端脚本语言,它在用户浏览器上运行,可以动态地更新页面...

    完美的二级css横向导航条

    本文将深入探讨如何创建一个完美的二级CSS横向导航条,结合实际案例“完美的二级css横向导航条”进行详细讲解。 首先,我们来理解一下二级导航条的概念。一级导航条通常位于页面顶部,包含网站的主要分类;二级导航...

    Android 网易新闻横向导航源码.zip

    【Android 网易新闻横向导航源码】是一款基于Android平台的应用程序开发示例,它展示了如何实现新闻应用中的横向滑动导航功能。这个源码是开发者学习Android应用设计和编程,尤其是对于UI布局和触摸事件处理的重要...

    多个html横向导航菜单

    在网页设计中,横向导航菜单是网站布局的重要组成部分,它为用户提供了一种直观且便捷的方式来浏览网站的不同页面和部分。本教程将详细讲解如何创建多个HTML横向导航菜单,并结合简单的CSS样式来提升用户体验。 ...

    Android应用源码之横向导航滑动无限扩充.rar

    通过深入研究这个源码,开发者可以学习到如何在Android中实现高效、流畅的横向导航滑动,同时理解如何扩展和优化此类界面,以适应大规模数据和用户交互。对于Android开发者来说,这是一个很好的学习和实践项目。

    导航栏(横向、竖向折叠)

    在本资源包中,你可能会发现各种动态效果,如鼠标悬停时的下拉菜单、平滑过渡的滑块以及渐变色彩变化等,这些都可以使横向导航栏更具吸引力。 其次,竖向折叠导航栏,又称侧边栏或抽屉式导航,常用于空间有限或者...

    jquery漂亮的横向滑出导航

    标题中的“jQuery漂亮的横向滑出导航”指的是使用jQuery库创建的一种动态、美观的网页导航菜单。这种导航菜单在用户操作时,通常会从侧边横向滑出,为用户提供直观且吸引人的交互体验。jQuery,一个JavaScript库,因...

    经典蓝色横向二级导航栏

    【标题】:“经典蓝色横向二级导航栏”是一个网页设计元素,通常用于网站的顶部,以提供清晰、有组织的菜单结构,帮助用户快速访问不同页面。这种导航栏以蓝色为主色调,采用横向布局,通常包括主菜单项和下拉的子...

    Android网易新闻横向导航源码

    在Android开发领域,横向导航是一种常见的用户界面设计,它提供了流畅的浏览体验,让用户能够轻松地在不同内容之间切换。网易新闻的横向导航是这种设计的一个优秀实例,它结合了美观与实用性,使得用户能够在新闻...

    3级横向导航菜单js代码

    本资源提供的是一个实现3级横向导航菜单的JavaScript代码,适用于那些希望在自己的网站上添加多层次、响应式的导航结构的开发者。 3级横向导航菜单通常包含主菜单项,这些菜单项下拉显示子菜单,子菜单项进一步展开...

    安卓横向导航栏源码

    在Android应用开发中,横向导航栏(Horizontal Navigation Bar)是一种...以上知识点涵盖了在Android中实现横向导航栏的主要技术和实践,通过深入学习和理解这些概念,开发者能够有效地在自己的应用中实现类似的功能。

    五款漂亮的CSS横向下拉菜单导航条.rar

    本文将详细探讨标题“五款漂亮的CSS横向下拉菜单导航条”所涵盖的知识点,以及如何利用CSS来创建这样的效果。 一、CSS基础 CSS(层叠样式表)是一种用于描述HTML或XML(包括SVG、XHTML等)文档样式的语言。通过CSS...

    CSS横向导航条-3

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速浏览网站的...在提供的压缩包“CSS横向导航条-3”中,可能包含了实现这种导航条的示例代码,进一步学习和研究这些代码将有助于深化理解和应用这些概念。

Global site tag (gtag.js) - Google Analytics