使用HTML＋CSS编写一个灵活的Tab页

downpour

浏览: 717148 次
性别:
来自: 上海

最近访客更多访客>>

perzer

myxiaoribeng

jiangqunit

ymgjava

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Struts2技术内幕
浏览量：117847

: SpringMVC深度探险...
浏览量：230599

文章分类

社区版块

存档分类

博客分类：

HTML CSS 项目管理配置管理 JavaScript

最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。

首先看一下预览界面：

样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

下面开始讲述一下完成上述页面的步骤。

1. 构建HTML
构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里，我们应该合理分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是完全错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。
回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下：

<div class="navg">
	<div id="attendance" class="mainNavg">
		<ul>
			<li id="attendanceNavg"><a href="#">考勤管理</a></li>
			<li id="teachNavg"><a href="#">教学管理</a></li>
			<li id="communicationNavg"><a href="#">家校互通</a></li>
			<li id="systemNavg"><a href="#">系统管理</a></li>
		</ul>
	</div>	
	<div id="dailyAttendance" class="secondaryNavg">
		<ul>
			<li id="dailyAttendanceNavg"><a href="#">当天考勤</a></li>
			<li id="leaveApproveNavg"><a href="#">请假审批</a></li>
			<li id="attendanceStatisticsNavg"><a href="#">考勤统计</a></li>
			<li id="attendanceCollectNavg"><a href="#">考勤汇总</a></li>
		</ul>
	</div>
</div>

其中，2个div将菜单级别划分开。其实在以后还会有其他的功效。此时，我们不妨View一下这张页面，我们可以惊喜的发现，这张页面就想Word文档一样，是可读的，这一点我们可以在整个过程做完以后再一次验证。

2. 构建基本CSS

先简单的让ul横向排列，这里面要注意元素float之后要注意清理

然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式，这里有个比较重要的地方是A这个元素变成块级元素（display: block），这样可以便于我们下面做一些处理，也能使整个菜单应用到链接样式。
而其中的line-height，恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。

.navg .mainNavg UL {
	margin: 0;
	padding: 0;
	list-style: none;
}
.navg .mainNavg UL LI {
	float: left;	
	background-color: #E1E9F8;
	background: url(../images/tab_right.gif) no-repeat right top;
	margin: 10px 3px;
	height: 25px;
}

.navg .mainNavg UL LI A {
	display: block;
	height: 25px;
	padding: 0 25px;
	line-height: 24px;
	background-color: #E1E9F8;
	background: url(../images/tab_left.gif) no-repeat left top;
	text-decoration: none;
	float: left;
	text-align:center;
	color: #fff;
	font-weight: bold;	
}

3. 使宽度自适应

我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术

简单来说，就是在LI上应用一幅大图像背景，并让这个背景居于右侧

然后在A上应用一个小图像背景，并让这个背景居于左侧，遮住大图像边缘

这样无论菜单文字内容长度怎么变，都不会破坏原来的结构了。

4. 当前菜单高亮显示

如果高亮当前页面，这个有很多种做法，最死板的是在每个页面上显式的定义类。
但是对于web项目来说，页面多数是动态的，所以这样不是最理想的方法。

我这里采用的方法是CSS选择器的灵活使用

#attendance #attendanceNavg,
#teach #teachNavg,
#communication #communicationNavg,
#system #systemNavg {
	background: url(../images/tab_right_on.gif) no-repeat right top;
}
#attendance #attendanceNavg A,
#teach #teachNavg A,
#communication #communicationNavg A,
#system #systemNavg A {
	background: url(../images/tab_left_on.gif) no-repeat left top;
	color: #0000ff;
}

在<div id="attendance" class="mainNavg">的代码中，我们可以使用不同的id作为选择器，由于CSS中的选择器id的优先级将大于class，所以只要根据id配合上li上面的id，就可以达到动态选择高亮选中的目的。

事实上，由于我们的页面都是动态的，所以id可以由后台生成，这样就可以通过id的不同组合非常精巧的实现了我们的需求。

5. 小技巧

最后可能还有一个问题你在想怎么实现的，就是高亮的tab如何把下面的横线遮掉的

很简单，图片上的小技巧。将高亮的图片高度设置为25px，而普通的图片设置为24px。然后通过padding，就可以将那根横线遮去了。

我们可以使用类似的方式，把二级菜单也做出来，这里就不详细叙述了。大家可以结合源码试一下。

附件为

Prototype.rar (87.2 KB)
描述: 源文件
下载次数: 11319

分享到：

若干条J2EE应用中运用“配置”的最佳实践 | OpenSessionInView详解

2007-02-12 23:52
浏览 62587
评论(71)
论坛回复 / 浏览 (61 / 144242)
查看更多

51 楼 cherami 2007-04-17

不错，值得参考

50 楼 JansonMike 2007-04-16

你提供的源代码怎样登录呀，就是用户名和密码是多少？

49 楼 kj23 2007-03-28

Js的解决方案有很多，仁者见仁，智者见智了

这个tab也有一模一样的一个js版本，但是项目中，如果使用js，我就用到frame来切换了，开发就变得不那么方便了

48 楼 hred 2007-03-28

附件是Jquery 下的一个plugin ，N种tab效果。对比一下。

47 楼 blu3leaf 2007-03-28

这东西好啊~~正愁界面呢~~多谢lz大人

46 楼 huansinho 2007-03-25

我觉得CSS在开发时可以很好的解决编程人员和网页设计人员的问题

45 楼 chenxu 2007-03-08

非常的不错,可以直接拿来用到项目中

44 楼 kj23 2007-03-07

那不是又回到当年用table去模拟layout的老路上去了

这种做法的唯一好处，就是可以无级变色，换skin用，代码上来说非常多的无语义标签掺杂其中

43 楼 pdw2009 2007-03-07

http://www.alistapart.com/
CSS Tab Designer 2 是专门做这种Tab的一个工具。

42 楼 Julian 2007-02-28

downpour 写道

Readonly 写道

netfishx 写道

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

please google it:

http://www.spiffycorners.com/

Readonly老大终于重出江湖拉。

这网站也真够变态的，用<b> + CSS去拼圆角，哈有想法。

不过正常人貌似不会这样搞的吧。

google早就这么干了。参见google gi的便签纸频道

41 楼 Julian 2007-02-28

downpour 写道

Readonly 写道

netfishx 写道

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

please google it:

http://www.spiffycorners.com/

Readonly老大终于重出江湖拉。

这网站也真够变态的，用<b> + CSS去拼圆角，哈有想法。

不过正常人貌似不会这样搞的吧。

google早就这么干了。参见google gi的便签纸频道

40 楼 downpour 2007-02-28

Readonly 写道

netfishx 写道

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

please google it:

http://www.spiffycorners.com/

Readonly老大终于重出江湖拉。

这网站也真够变态的，用<b> + CSS去拼圆角，哈有想法。

不过正常人貌似不会这样搞的吧。

39 楼 Readonly 2007-02-28

netfishx 写道

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

please google it:

http://www.spiffycorners.com/

38 楼 netfishx 2007-02-28

gougou8180 写道

不怎么样嘛挺烂的东西全是写死的圆角用的图片不是用div拼起来

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

37 楼 godson_2003 2007-02-28

效果很好啊

楼主能不能再发一些关于表单列表的demo?

36 楼 jerry_shen 2007-02-27

各位，麻烦问问示例的登入用户名和密码，在代码里好像找不到吗。

35 楼 gao277 2007-02-27

不错的好东西，收藏一下

34 楼 tiger.passion 2007-02-26

代码2效果如图：

33 楼 tiger.passion 2007-02-26

效果如图：

32 楼 tiger.passion 2007-02-26

我参照着楼主做了一个简易纵向的菜单，但出现了一点小小疑惑，希望大家帮解决下。
css代码：

* {margin:0; padding:0;}
body {font-size:12px; font-family:宋体; color:#666;}
ul {list-style:none;}

img {border:none;}

/* Apply */
.hackbox {clear:both;}


.colaB {width:816px;background:#c3dbf9;}
.colaBa {width:260px; float:left; background:#e1e9f8;}
.colaBb {width:540px; float:right; background:#FFFFFF; border-right:16px solid #e1e9f8;}

/* mainfull */
#mainfull{width:816px; margin:0 auto;}

#outsidebar {height: 30px;background: url("../images/logo.gif");border-bottom: 1px #FFF solid;}
/* header */
#header {height: 70px;background: url("../images/bar.gif");}
/* body */
#mainpage {width:816px; }





.nav {width:260;  background:url(../images/menu_bg.gif) repeat-x top left;}
.nav h3 a{padding:7px 50px 5px 24px; font-size:14px;  color:#FFF; display:block;}
.nav h3 a:hover{ text-decoration:none;}
.systemNav{ margin-top:10px;}
.systemNav ul {padding:10px 20px;}
.systemNav ul li{height:25px;padding-top:10px;}
.systemNav ul li a{padding:7px 50px 5px 50px; height:25px;  background:url(../images/new.gif) no-repeat center left;}
.systemNav ul li a:hover{border:1px solid #3c6eef; text-decoration:none;}




#content{ height:400px;}

/* footer */
#footer {
	height: 25px;
	background: #C3DBF9;
	border-top: 1px #F2F7FD solid;
}

html1代码：

<!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>
<title>配角 - 人物介绍 - Tears to Tiara中文专题站</title>
<meta name="Generator" content="Notepad" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="All" name="Robots" />
<meta name="SearchTitle" content="Tears to Tiara中文专题站" />
<meta name="SearchDescription" content="Tears to Tiara的相关人物介绍。" />
<meta name="Author" content="quatrn@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="Tears to Tiara的相关人物介绍。" />
<meta name="Copyright" content="youreyes.cn" />
<meta name="DC.Date" scheme="iso8601" content="2006-12-15" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Youreyes.cn" />
<meta name="Last update" content="quatrn@163.com" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/back2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainfull">
	<div id="outsidebar"></div>
	<!--header-->
	<div id="header"></div>
	<!--mainpage-->
	<div id="mainpage">
		<div class="colaB">
			<div class="colaBa">
				<!--考勤管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理</a></h3>
					
				</div>
				<!--考勤管理子菜单-->
				<div class="systemNav">
					<ul>
						<li >
							<a href="#"><strong>当天考勤</strong></a>
						</li>
						<li >
							<a href="#"><strong>请假审批</strong></a>					
						</li>
						<li >
							<a href="#"><strong>考勤统计</strong></a>
						</li>
					</ul>
				</div>
				<!--教学管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理</a></h3>
				</div>
			
				
				<!--家校互通-->
				<div class="nav">
					<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通</a></h3>
				</div>
				
				<!--系统管理-->
				<div class="nav">
					<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理</a></h3>
				</div>
			</div>
			<div class="colaBb">
				<div id="content"></div>
			</div>
			<div class="hackbox"></div>
		</div>
	</div>
	
	<!--footer-->
	<div id="footer"></div>
	<!--footer end-->
</div>
</body>
</html>

html2代码：

<!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>
<title>配角 - 人物介绍 - Tears to Tiara中文专题站</title>
<meta name="Generator" content="Notepad" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="All" name="Robots" />
<meta name="SearchTitle" content="Tears to Tiara中文专题站" />
<meta name="SearchDescription" content="Tears to Tiara的相关人物介绍。" />
<meta name="Author" content="quatrn@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="Tears to Tiara的相关人物介绍。" />
<meta name="Copyright" content="youreyes.cn" />
<meta name="DC.Date" scheme="iso8601" content="2006-12-15" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Youreyes.cn" />
<meta name="Last update" content="quatrn@163.com" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/back2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainfull">
	<div id="outsidebar"></div>
	<!--header-->
	<div id="header"></div>
	<!--mainpage-->
	<div id="mainpage">
		<div class="colaB">
			<div class="colaBa">
				<!--考勤管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理</a></h3>
					<!--考勤管理子菜单-->
					<div class="systemNav">
					<ul>
						<li >
							<a href="#"><strong>当天考勤</strong></a>
						</li>
						<li >
							<a href="#"><strong>请假审批</strong></a>					
						</li>
						<li >
							<a href="#"><strong>考勤统计</strong></a>
						</li>
					</ul>
					</div>
				</div>
				
				<!--教学管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理</a></h3>
				</div>
			
				
				<!--家校互通-->
				<div class="nav">
					<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通</a></h3>
				</div>
				
				<!--系统管理-->
				<div class="nav">
					<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理</a></h3>
				</div>
			</div>
			<div class="colaBb">
				<div id="content"></div>
			</div>
			<div class="hackbox"></div>
		</div>
	</div>
	
	<!--footer-->
	<div id="footer"></div>
	<!--footer end-->
</div>
</body>
</html>

执行代码一是好的，但代码二却有问题，始终想不明白~~~

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论