DDR爱好者之家 Design By 杰米
我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时我们发现一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成。
一、标签切换总体的实现思路:
实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,如何实现这样的标签切换效果:
1、首先要放置标签切换的容器,可以是选项卡形式,也可以是链接的形式;
2、放置具体的内容,并默认显示其中的一个为显示状态。其它的内容则进行隐藏;
3、当用户点击选项卡或链接时,应用javascript切换到指定的层进行显示,而其它的内容层进行隐藏;
4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。
我们看最终本实例的效果图片:
二、根据上面的思路我们开始整理HTML代码。我们作了如下规划:
<div class="woaicss">
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
</ul>
<div class="woaicss_con" id="woaicss_con1" style="display:block;">
</div>
<div class="woaicss_con" id="woaicss_con2" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con3" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con4" style="display:none;">
</div>
</div>
1、我们布置一个总体的容器,并应用类woaicss。
2、设置一个无序列表UL作为选项卡或链接的容器(下面详细介绍)。
3、我们分别设置了四个层,作为内容层(我们假想有四个切换)。请特别注意这四个层均应用了类
woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第
一个层的样式为块元素,即显示出该内容层。而其它三层均进行了隐藏。
三、我们开始进一步完善HTML代码。无序列表UL增加一些链接:
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(1)">52CSS.com</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(2)">Div CSS教程
</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(3)">CSS布局实例
</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(4)">WEB标准化</a></li>
</ul>
1、我们为无序列表UL应用了两个类woaicss_title、woaicss_title_bg1,第一个类可以对UL及LI、
链接进行整体的外观控制。以实现整体美化效果。我们也为无序列表UL指定了一个id为woaicsstitle,目
的在于可以应用javascript进行样式控制。
2、我们增加了四个链接,并对链接目标指定为:javascript:void(0)。我们应该了解,当链接为“#
”时,浏览器会回到页面顶部。而此处我们并不希望看到这样的结果,因为在很多情况下,我们的切换框
并不一定是在网页的第一屏,如果点击链接回到顶部,访客就不会立即看到内容层所出现的变化。失去了
制作标签切换效果的意义。
3、我们为链接设置了onclick动作avascript:woaicssq(x)。我们在这里向javascript传递参数,以
执行不同的脚本,实现切换的效果。
四、开始进行javascript脚本的编写:
function woaicssq(num){
for(var id = 1;id<=4;id++)
{
var MrJin="woaicss_con"+id;
if(id==num)
document.getElementById(MrJin).style.display="block";
else
document.getElementById(MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
if(num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
javascript脚本工作原理作简要的说明:
(由于本站52CSS.com仅针对CSS进行讨论,这里对此脚本不作详细分析)
1、设置函数woaicssq,并从标签切换的链接中获取参数,如:javascript:woaicssq(2)
2、声明变量id为数值为1并小于等于4。这是我们四个内容层的数值。
3、声明变量MrJin为"woaicss_con"+id; (请注意我们在第一步骤所设置内容层的id,如:
id="woaicss_con2"。)当id为所指定的数值时,则该层的属性为display="block";。否则层的属性为
display="none"。即实现了内容层显示与隐藏的切换功能。
4、当变量id为1-4其中的某一个数值是,对id为woaicsstitle的容器进行样式定义,如:
woaicss_title woaicss_title_bg3。这样我们就可以通过不同的class类,对切换链接进行不同的样式定
义,当某一层显示的时候,我们可以对该层所对应的链接作出一些指示。如选项卡的突出状态等。
五、开始CSS的编写:
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
总体布局声明,去除列表项预设标记,设置文字大小为12px,去除文字装饰线,外边距与内边距均为
零。
.woaicss {
width:438px;
height:300px;
overflow:hidden;
margin:50px auto;
}
总体标签切换窗口的样式定义,宽高设置,溢出为隐藏,上下外边距为50px,左右为自动,实现水平
居中对齐。
.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}
无序列表UL的样式,宽高设置,背景图片为btn_bg.png。
.woaicss_title li {
display:block;
float:left;
margin:0 2px 0 0;
display:inline;
text-align:center;
}
无序列表内列表项的样式,设置为块元素并应用向左的浮动,右侧外边距为2px。将列表项内联,文
字对齐方式为居中。
.woaicss_title li a {
display:block;
width:90px;
heigth:30px;
line-height:34px;
color:#fff;
}
列表项链接的样式,设置为块元素并指定了宽高,行高为34px,颜色为白色color:#fff;
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}
列表项链接的悬停样式,颜色为#f0f0f0,加下划线作为装饰线。
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时,相应的对无序列表的
样式进行重新定义,我们在此处对背景图定位进行了调整,实现了选项卡片的突出状态。
.woaicss_con {
display:block;
width:438px;
height:270px;
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
内容层的样式定义,指定宽高,并设置背景图片con_bg.png。52CSS.com请您特别注意,这里的背景
图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。
六、内容充实:
我们为内容层填充一定的内容,并对其进行美化,例如:(仅说明其一,其它三个雷同。)
<ul>
<li><a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器!详细图文讲解
!</a></li>
<li><a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
<li><a href="#" title="">XHTML与CSS入门经典 从零开始系列教程!</a></li>
<li><a href="#" title="">DIV+CSS布局入门示例(目录)</a></li>
<li><a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
<li><a href="#" title="">DIV CSS布局实例:用css网站布局之十步实录!(目录)
</a></li>
<li><a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习!</a></li>
<li><a href="#" title="">Div+CSS 网页布局 教程!</a></li>
</ul>
我们充实的内容层为一个UL无序列表,我们对其进行样式定义:
.woaicss_con ul {
width:418px;
height:250px;
margin:12px auto;
}
.woaicss_con li {
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.woaicss_con li a {
color:#03c;
}
.woaicss_con li a:hover {
color:#069;
text-decoration:underline;
}
此处不是本文重点,所以不再赘述,相关的知识请参考:> 52CSS.com关于列表UL制作的文章 <<<
七:细节修饰
我们这里的链接并未起到真正的URL转向的作用,仅是一个标签,所以我们可以将其虚线框去除,以
让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件:
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
我们在CSS样式中添加这一句代码:a {behavior:url(xuxian.htc)}
这样就可以去除了链接虚线框(请注意 在FF中此效果无效)。
八:最终效果及举一反三:
我们最终即可实现了这样的效果,您可以 > 点击这里查看 <<<
在我们的实现工作中可能会遇到另外一种情况:
我们需要实现当鼠标划过时进行切换,当鼠标点击时打开相应内容的链接。
我们将无序列表UL作如下修改即可实现:
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="#" onmouseover="javascript:woaicssq(1)">52CSS.com</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(2)">Div CSS教程</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(3)">CSS布局实例</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(4)">WEB标准化</a></li>
</ul>
我们通过些微的调整即实现了这样的效果,
一、标签切换总体的实现思路:
实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,如何实现这样的标签切换效果:
1、首先要放置标签切换的容器,可以是选项卡形式,也可以是链接的形式;
2、放置具体的内容,并默认显示其中的一个为显示状态。其它的内容则进行隐藏;
3、当用户点击选项卡或链接时,应用javascript切换到指定的层进行显示,而其它的内容层进行隐藏;
4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。
我们看最终本实例的效果图片:
二、根据上面的思路我们开始整理HTML代码。我们作了如下规划:
<div class="woaicss">
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
</ul>
<div class="woaicss_con" id="woaicss_con1" style="display:block;">
</div>
<div class="woaicss_con" id="woaicss_con2" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con3" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con4" style="display:none;">
</div>
</div>
1、我们布置一个总体的容器,并应用类woaicss。
2、设置一个无序列表UL作为选项卡或链接的容器(下面详细介绍)。
3、我们分别设置了四个层,作为内容层(我们假想有四个切换)。请特别注意这四个层均应用了类
woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第
一个层的样式为块元素,即显示出该内容层。而其它三层均进行了隐藏。
三、我们开始进一步完善HTML代码。无序列表UL增加一些链接:
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(1)">52CSS.com</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(2)">Div CSS教程
</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(3)">CSS布局实例
</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(4)">WEB标准化</a></li>
</ul>
1、我们为无序列表UL应用了两个类woaicss_title、woaicss_title_bg1,第一个类可以对UL及LI、
链接进行整体的外观控制。以实现整体美化效果。我们也为无序列表UL指定了一个id为woaicsstitle,目
的在于可以应用javascript进行样式控制。
2、我们增加了四个链接,并对链接目标指定为:javascript:void(0)。我们应该了解,当链接为“#
”时,浏览器会回到页面顶部。而此处我们并不希望看到这样的结果,因为在很多情况下,我们的切换框
并不一定是在网页的第一屏,如果点击链接回到顶部,访客就不会立即看到内容层所出现的变化。失去了
制作标签切换效果的意义。
3、我们为链接设置了onclick动作avascript:woaicssq(x)。我们在这里向javascript传递参数,以
执行不同的脚本,实现切换的效果。
四、开始进行javascript脚本的编写:
function woaicssq(num){
for(var id = 1;id<=4;id++)
{
var MrJin="woaicss_con"+id;
if(id==num)
document.getElementById(MrJin).style.display="block";
else
document.getElementById(MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
if(num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
javascript脚本工作原理作简要的说明:
(由于本站52CSS.com仅针对CSS进行讨论,这里对此脚本不作详细分析)
1、设置函数woaicssq,并从标签切换的链接中获取参数,如:javascript:woaicssq(2)
2、声明变量id为数值为1并小于等于4。这是我们四个内容层的数值。
3、声明变量MrJin为"woaicss_con"+id; (请注意我们在第一步骤所设置内容层的id,如:
id="woaicss_con2"。)当id为所指定的数值时,则该层的属性为display="block";。否则层的属性为
display="none"。即实现了内容层显示与隐藏的切换功能。
4、当变量id为1-4其中的某一个数值是,对id为woaicsstitle的容器进行样式定义,如:
woaicss_title woaicss_title_bg3。这样我们就可以通过不同的class类,对切换链接进行不同的样式定
义,当某一层显示的时候,我们可以对该层所对应的链接作出一些指示。如选项卡的突出状态等。
五、开始CSS的编写:
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
总体布局声明,去除列表项预设标记,设置文字大小为12px,去除文字装饰线,外边距与内边距均为
零。
.woaicss {
width:438px;
height:300px;
overflow:hidden;
margin:50px auto;
}
总体标签切换窗口的样式定义,宽高设置,溢出为隐藏,上下外边距为50px,左右为自动,实现水平
居中对齐。
.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}
无序列表UL的样式,宽高设置,背景图片为btn_bg.png。
.woaicss_title li {
display:block;
float:left;
margin:0 2px 0 0;
display:inline;
text-align:center;
}
无序列表内列表项的样式,设置为块元素并应用向左的浮动,右侧外边距为2px。将列表项内联,文
字对齐方式为居中。
.woaicss_title li a {
display:block;
width:90px;
heigth:30px;
line-height:34px;
color:#fff;
}
列表项链接的样式,设置为块元素并指定了宽高,行高为34px,颜色为白色color:#fff;
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}
列表项链接的悬停样式,颜色为#f0f0f0,加下划线作为装饰线。
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时,相应的对无序列表的
样式进行重新定义,我们在此处对背景图定位进行了调整,实现了选项卡片的突出状态。
.woaicss_con {
display:block;
width:438px;
height:270px;
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
内容层的样式定义,指定宽高,并设置背景图片con_bg.png。52CSS.com请您特别注意,这里的背景
图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。
六、内容充实:
我们为内容层填充一定的内容,并对其进行美化,例如:(仅说明其一,其它三个雷同。)
<ul>
<li><a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器!详细图文讲解
!</a></li>
<li><a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
<li><a href="#" title="">XHTML与CSS入门经典 从零开始系列教程!</a></li>
<li><a href="#" title="">DIV+CSS布局入门示例(目录)</a></li>
<li><a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
<li><a href="#" title="">DIV CSS布局实例:用css网站布局之十步实录!(目录)
</a></li>
<li><a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习!</a></li>
<li><a href="#" title="">Div+CSS 网页布局 教程!</a></li>
</ul>
我们充实的内容层为一个UL无序列表,我们对其进行样式定义:
.woaicss_con ul {
width:418px;
height:250px;
margin:12px auto;
}
.woaicss_con li {
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.woaicss_con li a {
color:#03c;
}
.woaicss_con li a:hover {
color:#069;
text-decoration:underline;
}
此处不是本文重点,所以不再赘述,相关的知识请参考:> 52CSS.com关于列表UL制作的文章 <<<
七:细节修饰
我们这里的链接并未起到真正的URL转向的作用,仅是一个标签,所以我们可以将其虚线框去除,以
让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件:
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
我们在CSS样式中添加这一句代码:a {behavior:url(xuxian.htc)}
这样就可以去除了链接虚线框(请注意 在FF中此效果无效)。
八:最终效果及举一反三:
我们最终即可实现了这样的效果,您可以 > 点击这里查看 <<<
在我们的实现工作中可能会遇到另外一种情况:
我们需要实现当鼠标划过时进行切换,当鼠标点击时打开相应内容的链接。
我们将无序列表UL作如下修改即可实现:
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="#" onmouseover="javascript:woaicssq(1)">52CSS.com</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(2)">Div CSS教程</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(3)">CSS布局实例</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(4)">WEB标准化</a></li>
</ul>
我们通过些微的调整即实现了这样的效果,
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]