`
downpour
  • 浏览: 717477 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
00a07ae5-264f-3774-8903-8ad88ce08cb0
Struts2技术内幕
浏览量:117949
4d8508f2-c0dd-3df8-9483-04cc612afbbc
SpringMVC深度探险...
浏览量:230647
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
阅读更多
最近在研究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,就可以将那根横线遮去了。


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

附件为


分享到:
评论
71 楼 linginfanta 2007-05-10  
支持,
70 楼 zzy_1983 2007-05-09  
好东西 支持一下
69 楼 micrexp 2007-05-08  
downpour 写道
最近在研究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个无序列表来表示一级菜单和二级菜单。代码如下:


顺便贴一个我写的

 <!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>Untitled Page</title>
    <link type="text/css" href="gridstyle.css" rel="StyleSheet"/>
    <script language="javascript" type="text/javascript">
        var HK_TabItem = function(){
            this.tabControl = null;
            var button = document.createElement("div");           
            var items = new Array();
            var active = false;
            this.appendItem = function(value){
                items[items.length] = value;
                value.oldVisible = value.style.display;
                value.style.display = "none";
            }
            this.getElement = function(){
                return button;
            }
            this.setCaption = function(value){
                button.innerText = value;
            }
            this.setActive = function(){
                if(active){return};
                button.className = "tab_tabbuttonactive";
                this.tabControl.setActiveTab(this);
                for(var i=0;i<items.length;i++){
                    items[i].style.display = items[i].oldVisible;
                }
                active = true;
            }
            this.deActive = function(){
                button.className = "tab_tabbutton";
                for(var i=0;i<items.length;i++){
                    items[i].style.display = "none";
                }
                active = false;
            }
            function onClick(){
                button.tab.setActive();
            }
            button.attachEvent("onclick",onClick);
            button.className = "tab_tabbutton";
            button.tab = this;
        }
        var HK_TabControl = function(){
            var activeTab = null;
            var banner =document.createElement("div");
            var head = document.createElement("div");
            var line = document.createElement("div");
            var tab = document.createElement("div");
            var padding = document.createElement("div");
            banner.className = "tab_banner";
            head.className = "tab_head";
            line.className = "tab_line";
            padding.className = "tab_padding";
            line.innerHTML = "&nbsp;";
            tab.appendChild(banner);
            tab.appendChild(line);
            banner.appendChild(head);            
            this.tabs = new Array();
            this.setActiveTab = function(value){
                if(activeTab!=null){
                    activeTab.deActive();
                }             
                activeTab = value;   
            }
            this.getActiveTab = function(){
                return activeTab;
            }
            this.appendTab = function(){
                var tab = new HK_TabItem();
                banner.appendChild(tab.getElement());
                tab.tabControl = this;
                return tab;
            }
            this.parent = null;  
            this.init = function(){
                this.parent.appendChild(tab);
                banner.appendChild(padding);
                padding.style.pixelWidth = banner.offsetWidth - padding.offsetLeft-2;
            }          
        }
    </script>
</head>
<body>
<div id="test"></div>
    <div id="test1" style="width: 100px; height: 100px">
        <input id="Button1" type="button" value="button" />
        asdfasdf</div>
    <div id="test2" style="width: 100px; height: 100px">
        asdfasdf<input id="Text1" type="text" /></div>
    <div id="test3" style="width: 100px; height: 100px">
        <input id="Checkbox1" type="checkbox" />asdfasdf</div>
    <div id="test4" style="width: 100px; height: 100px">
        asdfasdf<input id="Hidden1" type="hidden" /></div>
        <script>
            var tabcontrol = new HK_TabControl();
            var tab = tabcontrol.appendTab();    
            tab.setCaption("test1");
            tab.appendItem(document.getElementById("test1"));                  
            var tab = tabcontrol.appendTab();    
            tab.setCaption("test2");
            tab.appendItem(document.getElementById("test2"));     
            var tab = tabcontrol.appendTab();    
            tab.setCaption("test3");
            tab.appendItem(document.getElementById("test3"));     
            var tab = tabcontrol.appendTab();    
            tab.setCaption("test4");
            tab.appendItem(document.getElementById("test4"));     
            tab.setActive();            
            tabcontrol.parent = document.getElementById("test");
            tabcontrol.init();
        </script>

</body>
</html>

css:

tab_tabbuttonactive
{
    cursor:hand;
    text-align:center;
    vertical-align:middle;
    background-color: #cde6f8;
    border-width:1px;
    border-top:solid 1px #336699;
    border-left:solid 1px #336699;
    border-right:solid 1px #336699;
    display:inline;
    float:left;  
    height:26px;
    width:80px;
    text-align:center;
    vertical-align:middle;
    line-height:2;
}
.tab_padding
{
    cursor:hand;
    text-align:center;
    vertical-align:middle;
    border-bottom:solid 1px #336699; 
    border-width:1px;
    background-color: #98b1c4; 
    display:inline;
    float:left;  
    height:27px;
}
.tab_tabbutton
{
    cursor:hand;
    text-align:center;
    vertical-align:middle;
    border-bottom:solid 1px #336699; 
    border-width:1px;
    background-color: #98b1c4; 
    display:inline;
    float:left;  
    height:26px;
    width:80px;
    text-align:center;
    vertical-align:middle;
    line-height:2;
}
.tab_banner
{
    cursor:hand;
    text-align:center;
    vertical-align:middle;
    background-color: #98b1c4; 
    height:27px;  
}
.tab_head
{
    cursor:hand;
    text-align:center;
    vertical-align:middle;
    border-bottom:solid 1px #336699; 
    border-width:1px;
    background-color: #98b1c4; 
    display:inline;
    float:left;  
    width:12px;
    height:27px;
}
.tab_line
{
    background-color:#cde6f8;
    line-height: 6px;
}
68 楼 InnocentBoy 2007-05-08  
总体感觉不太细腻,效果是有了。
67 楼 zyl123456 2007-05-08  
66 楼 zyl123456 2007-05-07  
  
  可能我表达不清楚,我的意思是通过调用一个head文件,点不同栏目的时候,该栏目就高亮显示,就是要这种效果...

  就是要在head.asp这个文件里动态调用<div id="attendanceNavg">这个里的id值,那么这个id值如何才能实现动态啊.

  比如现在前台栏目有:栏目一、栏目二、栏目三,如何能让id的值分别对应到这三个栏目。。。
65 楼 zyl123456 2007-05-07  
动态取得ID后,是不是在CSS样式表也要加上相应的样式啊
64 楼 zyl123456 2007-05-07  
大哥,能否指点小妹一下,后台相关菜单的ID是怎么写的啊,怎么样才能动态生成那个ID号,就是前面li调用的那个ID。我用的是ASP,不知道怎么写啦,不然要高光显示各栏目,就得做很多个head文件了。。。小妹谢谢了。。。
比如后台功能菜单有公司简介、产品展示、联系我们,那么如何才能生成那个ID号呢?
63 楼 gs.liutong 2007-05-06  
CSS真不错,就是不太会用,有时间要学学了。
62 楼 kj23 2007-04-30  
可能你只着眼与tab的效果实现了

我提问过很多次了,当几十张乃至更多的页面在这里切换

都写在一个页面上恐怕不现实吧,这才是设计的初衷,否则上面很多朋友介绍的作品都比这个好吧

代码建议在ff下面跑一下,和ie下看到的差别还是蛮大的,主要是css上需要调整一下
61 楼 laochake 2007-04-30  
kj23 写道
M是不是立体的这个问题其实不属于View设计的范畴。

这个页面设计的再好一点,就是让2级菜单成为一级菜单的一个子项。

这样就能体现zkj说的立体模型了


在lz的基础上修改
1.去除了css对id的依赖
2.把2级菜单成为一级菜单的一个子项,选中时,通过一小段js将其显示
60 楼 laochake 2007-04-30  
kj23 写道
M是不是立体的这个问题其实不属于View设计的范畴。

这个页面设计的再好一点,就是让2级菜单成为一级菜单的一个子项。

这样就能体现zkj说的立体模型了



我修改了一下:
1.去除了 css 文件对 id 的依赖
2.把2级菜单设为一级菜单的一个子项,选中某个一级菜单时,用一小段js将二级详细显示出来


欢迎拍砖
59 楼 maxima 2007-04-29  
mark,好帖.
58 楼 pipi2142001 2007-04-28  
支持原创!!
57 楼 wzc1981 2007-04-26  
谢谢!已下载。
56 楼 iostrip 2007-04-24  
先谢谢楼上的回复了!
我是一个刚刚入行的人,编程的水平不好。楼上能不能在详细的解释一下怎么用呢?怎样使用usercontrol page 来调用这些按钮呢?另外,如果使用usercontrol的话,还有没有现在的效果呢?
我现在的项目分为4层:管理员,销售人员,主管和普通用户。每一个用户都对应不同的菜单。如果我采用楼主的按钮的话,每一个按钮就对应一个Html页,楼主的按钮用了十几个页面。楼上能不能就楼主的代码(最主要的是效果一样),创建一个有主从关系的按钮,2级菜单成为一级菜单的一个子项。这样的话,用一个菜单栏就够了。
恳请各位高人相助了!
55 楼 kj23 2007-04-24  
.net 写成UserControl更加方便,而且还可以实现编辑器视图,比java爽多了。

二级菜单转为子项也很简单啊


<asp:Repeater id=Repeater1 runat="server">
<ul>
<ItemTemplate>
<li>
   <ul>
     <li/>
   </ul>
</li>
</ItemTemplate>
</ul>
</asp:Repeater>



差不多就是这个意思

css要调整一下,改成下来或者抽屉式的都很方便的



54 楼 iostrip 2007-04-24  
楼主做的真的很漂亮,而且正是我想要得。但是,我是使用Asp.net的。没有看明白楼主的JSP代码(将这段HTML的片断抽取到一个JSP中,然后include到真正的业务页面上)。
能不能请楼主再辛苦一下,做一个菜单让2级菜单成为一级菜单的一个子项(用javascript也不要紧),或者给详细讲解一下在程序中自动调用的过程呢!
我的项目中正好需要一个这样的菜单。恳请楼主帮忙了!
53 楼 Gothic 2007-04-20  
cherami 写道
不错,值得参考
不错不错 .
52 楼 penghao122 2007-04-20  
.收了

相关推荐

    js控制层和DIV+CSS实现TAB菜单

    在网页设计中,"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合,用于创建交互式的用户界面。这个主题涉及到JavaScript(JS)、层(Layer)管理、Div(CSS布局元素)以及CSS(级联样式表)的使用。下面我们将...

    jQuery+CSS3竖排手风琴tab代码

    总结,这个竖排手风琴Tab代码通过结合jQuery的事件处理和DOM操作,以及CSS3的样式和动画功能,创建了一个互动性高且视觉效果良好的用户界面。设计师可以根据需要调整颜色、布局和动画参数,以适应不同项目的需求。

    div+css制作tab页软件,超好用

    标题中的“div+css制作tab页软件,超好用”表明这是一个基于HTML的Tab页设计工具,主要利用了Web前端的两种核心技术:Div(division)和CSS(Cascading Style Sheets)。Div是HTML5中的一个块级元素,常用于布局和...

    jQuery+CSS3制作简单的Tab选项卡.zip

    本教程将通过结合jQuery、CSS3以及HTML5来教你如何创建一个简单易用的Tab选项卡。以下是详细的知识点讲解: 1. **HTML5**: HTML5是现代网页开发的基础,它提供了更多的语义化标签,如`&lt;section&gt;`、`&lt;article&gt;`和`...

    CSS3实现的Tab多页签代码

    通过以上步骤,我们便能使用CSS3实现一个功能完备、视觉效果良好的Tab多页签。当然,还可以根据需求进一步优化,比如增加动画效果、自适应布局等,以提供更加出色的用户体验。记得在实际应用中,确保代码的可维护性...

    HTML5与CSS3web前端开发技术习题答案.pdf

    HTML5不仅是一个标记语言,还是一个完整的Web开发框架,它融合了HTML、CSS3和JavaScript,带来了许多新特性和改进,主要包括以下几点: - **良好的语义特性:** HTML5通过引入新的结构元素如`section`、`article`、...

    一个仿淘宝的tab卡选框 jquery+css

    本项目“一个仿淘宝的tab卡选框”利用jQuery和CSS技术实现了这一功能,旨在提供类似淘宝网站的交互效果。下面我们将深入探讨这个项目所涉及的知识点。 首先,我们来了解jQuery。jQuery是一个轻量级的JavaScript库,...

    HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

    【HTML5+CSS3 实现灵动的动画TAB切换效果】是一种常见的前端交互设计,这篇文章提供了一个DEMO,展示了如何利用这两种技术创建具有动画效果的标签页切换。在HTML5中,我们通常使用`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`等元素构建...

    javascript+CSS实现Tab效果

    标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计,即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容,提高用户体验,尤其在信息组织和展示时非常实用。下面将...

    jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效.zip

    这个“jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效.zip”压缩包提供了一个实际的示例,展示了如何将这些技术融合在一起实现Tab标签栏的动态切换效果。下面我们将详细讨论这些技术及其在项目中的应用。...

    码农jQuery页签切换Tab标签切换+导航栏+手风琴

    首先,我们来看"jQuery_tab.html",这通常是一个展示页签切换效果的示例页面。页签切换是一种常见的UI设计元素,用于在有限的空间内展示大量内容。通过jQuery,我们可以轻松地创建这样的功能。基本思路是利用CSS定义...

    div+css制作Tab选项卡.docx

    然后,我们使用CSS隐藏所有内容div,除了第一个(这里我们用了一个类名"conts"来标识): ```css #content div { display: none; } #content .conts { display: block; } ``` 至此,基本的Tab选项卡已经完成,...

    jQuery+div+css选项卡列表样式

    在网页设计中,选项卡(Tab)是一种常见的交互元素,用于组织和展示大量内容,而无需用户滚动或点击多个页面。jQuery 是一个广泛使用的 ...它体现了前端开发中的灵活性和可复用性,是网页设计中的一个重要工具。

    【html+css+jquery】仿原神静态官网

    在本项目中,我们主要探讨如何使用HTML、CSS和jQuery技术来创建一个仿原神静态官网。这个项目涉及到了多个网页设计与交互的关键元素,包括轮播图效果、回到顶部功能、下拉菜单以及tab切换和登录功能。下面将详细阐述...

    实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件

    Coda-Slider的核心功能在于将多个内容区域(通常包含图片、文本或任何HTML元素)封装在一个可滑动的容器内,用户可以通过点击Tab或自动滚动来切换显示的内容。这个插件利用CSS来控制布局和样式,使得切换过程不仅...

    html+css+javaScript基础使用.docx

    ### HTML+CSS+JavaScript 基础使用 #### JavaScript 的定义和特点 ##### 特点概述 JavaScript 是一种直译式的脚本语言,其特点包括动态类型、弱类型及基于原型的语言特性。JavaScript 支持多种内置数据类型,并且...

    xhtml+CSS 菜单

    压缩包中提到的"csstabdesigner2"可能是一个CSS Tab Designer的版本,这是一个用于创建和预览CSS样式tab组件的工具。该工具可以帮助开发者快速生成符合需求的CSS代码,节省手动编写和调试的时间。通过这个工具,你...

    美漂亮的实用div+css模仿select下拉控件

    在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...

Global site tag (gtag.js) - Google Analytics