使用HTML�Q�CSS�~�写一个灵�zȝ��Tab��?转脓)

��q�� — Tue, 27 Mar 2007 01:31:00 GMT

首先看一下预览界面：

样例HTML可以讉K��Q�http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

下面开始讲�q�C��下完成上�q�页面的步骤�?/p>

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

代码

< 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 = "#" > 家校互�?/span> a > li >
< li id = "systemNavg" > < a href = "#" > �pȝ��理 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 = "#" > 考勤�l�计 a > li >
< li id = "attendanceCollectNavg" > < a href = "#" > 考勤汇�?/span> a > li >
ul >
div >
div >

其中�Q?个div��菜单��别划分开。其实在以后�q�会有其他的功效。此�Ӟ��我们不妨View一下这张页面，我们可以惊喜的发玎ͼ��q�张��面��想Word文档一��P��是可�ȝ��Q�这一�Ҏ��们可以在整个�q�程做完以后再一�ơ验证�?/p>

2. 构徏基本CSS

先简单的让ul横向排列�Q�这里面要注意元素float之后要注意清�?/p>

然后通过分别在LI �?A 元素上应用背景来实现主菜单样式，�q�里有个比较重要的地�Ҏ��A�q�个元素变成块��元素�Q�display: block�Q�，�q�样可以便于我们下面做一些处理，也能使整个菜单应用到链接样式�?
而其中的line-height�Q�恰恰可以��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. 使宽度自适应

我们在这里��用滑动门技术来做宽度自适应。下面简单介�l�一下滑动门技�?/p>

��单来��_��是在LI上应用一�q�大囑փ�背景�Q��ƈ让这个背景居于右�?/p>

然后在A上应用一个小囑փ�背景�Q��ƈ让这个背景居于左侧，遮住大图像边�~?/p>

�q�样无论菜单文字内容长度怎么变，都不会破坏原来的�l�构了�?/p>

4. 当前菜单高亮昄��

如果高亮当前��面�Q�这个有很多�U�做法，最��L��的是在每个页面上昑ּ�的定义类�?
但是对于web��目来说�Q�页面多数是动态的�Q�所以这样不是最理想的方法�?/p>

我这里采用的�Ҏ��是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;
}

�?lt;div id="attendance" class="mainNavg">的代码中�Q�我们可以��用不同的id作�ؓ选择器，�׃��CSS中的选择器id的优先�񔞮�大于class�Q�所以只要根据id配合上li上面的id�Q�就可以辑ֈ�动态选择高亮选中的目的�?/p>

事实上，�׃��我们的页面都是动态的�Q�所以id可以由后台生成，�q�样��可以通过id的不同组合非常精巧的实现了我们的需求�?/p>

5. ��技�?/p>

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

很简单，囄��上的��技巧。将高亮的图片高度设�|��ؓ25px�Q�而普通的囄��讄��?4px。然后通过padding�Q�就可以��那�Ҏ��U�K��M��?/p>

我们可以使用�c�M��的方式，把二�U�菜单也做出来，�q�里��׃��详细叙述了。大家可以结合源码试一下�?/p>

��q�� 2007-03-27 09:31 发表评论

亚洲国产精品一区二区九九,亚洲综合精品香蕉久久网97,亚洲AV无码成人精品区狼人影院

使用HTML�Q�CSS�~�写一个灵�zȝ��Tab��?转脓)