当前位置:  编程技术>WEB前端

CSS标签切换代码实例教程 比较漂亮

    来源: 互联网  发布时间:2014-09-06

    本文导语:  我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时我们发现一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式,...

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时我们发现一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成。

一、标签切换总体的实现思路:

  实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,如何实现这样的标签切换效果:
  1、首先要放置标签切换的容器,可以是选项卡形式,也可以是链接的形式;
  2、放置具体的内容,并默认显示其中的一个为显示状态。其它的内容则进行隐藏;
  3、当用户点击选项卡或链接时,应用javascript切换到指定的层进行显示,而其它的内容层进行隐藏;
  4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。

  我们看最终本实例的效果图片:

二、根据上面的思路我们开始整理HTML代码。我们作了如下规划:

 

    
    
    
    

    
    

    
    

    
    
    

  1、我们布置一个总体的容器,并应用类woaicss。
  2、设置一个无序列表UL作为选项卡或链接的容器(下面详细介绍)。
  3、我们分别设置了四个层,作为内容层(我们假想有四个切换)。请特别注意这四个层均应用了类
woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第
一个层的样式为块元素,即显示出该内容层。而其它三层均进行了隐藏。

三、我们开始进一步完善HTML代码。无序列表UL增加一些链接:

 
    
        
  • 52CSS.com

  •         
  • Div CSS教程

  •         
  • CSS布局实例
  •         
            
  • WEB标准化

  •     
      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>> 52CSS.com关于列表UL制作的文章 > 点击这里查看 

        
     
     

    您可能感兴趣的文章:

  • css首字放大实例代码
  • css Hspace 和vspace的图片控制实例
  • css font缩写总结附实例
  • css Sprites小实例代码
  • DIV+CSS网页另类上下布局的实例代码
  • CSS3实例分享之多重背景的实现(Multiple backgrounds)
  • <font color=red>又一个典型css实例
  • CSS关于相对定位和绝对定位的说明实例
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • 第9天:第一个CSS布局实例
  • CSS可以做的几个令你叹为观止的实例分享
  • 代码实例之纯CSS代码实现翻页效果
  • <font color=red>CSS 实用实例(推荐)
  • web标准布局实例教程,用定位轻松解决CSS复杂布局
  • css实现气泡框效果(实例加图解)
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • jquery获取css中的选择器(实例讲解)
  • css图片切换效果代码[不用js]
  • ASP、PHP与javascript根据时段自动切换CSS皮肤的代码
  • W3C标准:实时切换CSS样式
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • PHP去除html标签,php标记及css样式代码参考
  • 批量修改标签css样式以input标签为例
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • asp.net添加CSS、JS、Meta标签的方法
  • Asp.net 后台添加CSS、JS、Meta标签的方法
  • CSS 浮动清理,不使用 clear:both标签
  • 实用的利用 CSS + <em>标签 来完成一个三角形的制作
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • 纯CSS实现标签导航制作
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
  • css利用A标签的背景可能作出很有意思的效果第1/2页
  • 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3