比较复杂的用户界面，tab面板  伸缩面板和折叠面板等组件。

 

tab面板和菜单实际上分为两种
           一种是切换各个tab页中的内容时并不刷新浏览器窗口，仅仅是被隐藏起来了  利用javascript显示和隐藏tab面板

          另一种是切换各个tab页中的内容时，会刷新浏览器窗口，实际上就是更换了一个新的html页面    也可以局部刷新tab页面内的区域，利用ajax技术。
            浏览器无刷新的制作效果为tab面板，因为他是一个页面中的一个区域
           浏览器刷新的制作效果为tab菜单，因为它是多个页面之间的导航菜单
一.tab菜单
     浏览器刷新  即载入不同的页面
    1. 搭建html结构
    为每个页面都设置相同的框架
  <body id="home">
   <ul id="tabnav">
           <li class="home"><a href="home.htm">home</a></li>
           <li class="dev"><a href="dev.htm">dev</a></li>
           <li class="design"><a href="design.htm">design</a></li>
           </ul>
   <ul>
     <div id="content">
     <ul id="list">
         <li>1.asdfasdf</li>
         <li>2.asdfgasdfasdf</li>
          <li>3.asdfaasdghhhjjkkksdf</li>
     </ul>
    </div>
</body>
除了每个页面的具体内容，即上面代码中div中包含的部分外，所有tab页面的整体框架都是完全相同的，每个页面都采用<link>语句调用相同的css外部文件，而页面的具体内容所采用的css则放在页面内用<style>标记控制，代码如下
     <link href="tab.css" type="text/css" rel="stylesheet">
2.设置整体样式
外部的tab。css文件中定义各个css属性:
    body{margin:10px;}
   #content{
     border-left:1px solid #lla3ff;
    border-right:1px solid #lla3ff;
   border-bottom:1px solid #lla3ff;
    padding:5px;
    font-size:12px;
   }
3.设置tab的样式
ul #tabnav{
     list-style-type:none;
    margin:0px;
    padding-left:0px;
    padding-bottom:23px;
    border-bottom:1px solid #11a3ff;
   font:bold 12px verdanna,arial;
}
 
再设置li的样式
      ul#tabnav li{
     float:left;
    height:20px;
   
    margin:0 3 0 0;
   border:1 solid #11a3ff;
}

 

 
设置所有超链接的3个伪类，
ul#tabnav a:link,ul#tabnav a:visited{
display:block;
color:#006eb3;
text-decoration:none;
padding:5 10 3 10;
}
ul#tabnav a:hover{
 
color:#ffffff;
}
 
 
设置当前页的tab样式
 
每个页面的body标记都添加唯一的id，因此可以设置当前页面的菜单项，如home.htm的home菜单等，
给当前页的菜单项添加白色的下边框，从而覆盖了ul标记中设置的蓝色下边框，实现了tab菜单的效果，此时效果如下所示
  body#home li.home,body#dev li.dev,body#design li.design...{
border-bottom:1px solid #ffffff;
color:#000000;
 
}
           
    tab菜单和核心部分已经完成，下面为当前页面的菜单项添加单独的超链接效果，以区别于其他页面，代码如下
body#home li.home a:link,body#home li.home a:visited,body#home li.dev a:visited,......{
color:#000000;
 
}
body#home li.home a:hover,body#dev li.dev a:hover...
{
color:#006eb3;
text-decoration:underline; 
}
 
为每个页面添加相应的内容，内容部分使用css于公共的css样式文件分别存放，可以使用style嵌入到页面中
代码如下：
<link href="tab.css" type="text/css" rel="stylesheet">
<style type="text/css">
放置各个页面单独的具体内容所使用的css
</style>
 
 二，借助于spry实现tab面板 
         1html结构
<body>
<div id="tp1" class="tps">
<ul class="tpg">
<li class="tt" tabindex="0"><span>t1</span></li>
<li class="tt" tabindex="0"><span>t2</span></li>
</ul>
 
</div>
<div class="tpcontentg">
<div class="tpc">内容1</div>
<div class="tpc">内容2</div>
</div>
</body> 

2,背景图片


  3.设置整体的css样式

.tps{
margin:0;
padding:0;
float:left;
clear:none;
width:100%;
}

 
.tpg{
margin:0;
padding:0;
}
4.设置单个tab的css的样式
.tt{
display:block;
height:30px;
float:left;
position:relative;
top:2;
padding:0 0 0 0;
margin:0 0 0 0;
background:url('tab-back.gif');
list-style:none;
cursor:pointer;
color:#fff;
font:bold 14 arial;
-moz-user-select:none;
-khtml-user-select:none;
}
5.设置单个tab的滑动门背景
要利用html中span标签作为钩子来载入右边的背景图
将tt设置为padding：0 0 0 15；
对span增加css设置
.tt span{
display:block;
background:url('tab-back.gif') right top;
padding:7 25 7 0;}

6.设置鼠标经过效果

.tthover{
 
}
更改为：
.tthover span{
display:block;
background:url('tab-hover.gif') right top;
padding:7 25 7 0;
}
 

7.设置当前页效果
.ttselected{
 
border-bottom:1px solid #eee;
}
  替换为
.ttselected{
background:url('tab-current.gif');
color:#900;
}
.ttsecected span{
display:block;
background:url('tab-current.gif') right top;
padding:7 25 7 0;
}
8.设置tab页内容的css样式
  .tpcontentg{
clear:both;//清除浮动的影响
border:solid 2 #900;
 
}
 
 
 9.鼠标经过时换页
在html代码中加入如下语句
<div id="tp1" class="tp">
<ul class="tpg">
<li class="tpt tabindex="0" onmouseover="tp1.showpanel(0)"><span>home</span></li>
<li class="tpt tabindex="0" onmouseover="tp1.showpanel(1)"><span>web development</span></li>
</ul>
</div>
增加onmouserover事件处理语句   当鼠标指针经过时就会显示该tab页
 
 
三。折叠面板
效果如下图
 

1.简历基本的折叠面板

 
 
 
 
2.准备背景图片

12章 应用spary制作高级网页组件的更多相关文章

  1. mysql 12章_MySQL数据库的高级管理

    一. 用户管理 Root用户是MySQL数据库管理系统中的系统管理员,但在实际开发过程中通常需要根据不同的开发者分配不同的用户,这样有利于用户的管理和维护. . 用户的创建: ) 方式1:使用MySQ ...

  2. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  3. 20191105 《Spring5高级编程》笔记-第12章

    第12章 使用Spring远程处理 12.4 在Spring中使用JMS 使用面向消息的中间件(通常成为MQ服务器)是另一种支持应用程序间通信的流行方法.消息队列(MQ)服务器的主要优点在于为应用程序 ...

  4. javascript高级程序设计第3版——第12章 DOM2与DOM3

    12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...

  5. Linux就这个范儿 第12章 一个网络一个世界

    Linux就这个范儿 第12章 一个网络一个世界 与Linux有缘相识还得从一项开发任务说起.十八年前,我在Nucleus  OS上开发无线网桥AP,需要加入STP生成树协议(SpanningTree ...

  6. Hadoop专业解决方案-第12章 为Hadoop应用构建企业级的安全解决方案

    一.前言: 非常感谢Hadoop专业解决方案群:313702010,兄弟们的大力支持,在此说一声辛苦了,春节期间,项目进度有所延迟,不过元宵节以后大家已经步入正轨, 目前第12章 为Hadoop应用构 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (30) ------ 第六章 继承与建模高级应用之多对多关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第六章  继承与建模高级应用 现在,你应该对实体框架中基本的建模有了一定的了解,本章 ...

  8. 敏捷软件开发：原则、模式与实践——第12章　ISP：接口隔离原则

    第12章 ISP:接口隔离原则 不应该强迫客户程序依赖并未使用的方法. 这个原则用来处理“胖”接口所存在的缺点.如果类的接口不是内敛的,就表示该类具有“胖”接口.换句话说,类的“胖”接口可以分解成多组 ...

  9. 鸟哥的linux私房菜——第12章 正则表达式与文件格式化处理

    12.1什么是正则表达式 正则表达式就是处理字符串的方法,它是以行为单位来进行字符串的处理行为,正则表达式通过一些特殊符号的辅助,可以让用户轻易达到查找.删除.替换某特定字符串的处理程序. vi.gr ...

随机推荐

  1. ztree的CheckBox不显示问题解决办法

    问题: 在使用ztree插件时需要设置 zTree 的节点上是否显示 checkbox / radio,但设置后不显示复选框/单选框,如下图所示 设置方法: var setting = { check ...

  2. SPOJ SORTBIT Sorted bit squence （数位DP，入门）

    题意: 给出一个范围[m,n],按照二进制表示中的1的个数从小到大排序,若1的个数相同,则按照十进制大小排序.求排序后的第k个数.注意:m*n>=0. 思路: 也是看论文的.一开始也能想到是这种 ...

  3. 如何将SAP Multi Target应用部署到SAP云平台的Cloud Foundry环境去

    SHINA是SAP HANA Interactive Education的缩写,是一个demo应用,用于演示如何开发SAP HANA原生应用. 这个应用包含了sample数据以及HANA数据库表,vi ...

  4. UVA 11134 FabledRooks 传说中的车 （问题分解）

    摘要:贪心,问题分解. 因为行列无关,所以这个二维问题可以分解成两个一维问题. 优先队列实现:类似区间点覆盖的问题,先按照左端点排序,相同然后在按右端点排序(灵活性小的优先选).最优的选法,当然是要使 ...

  5. CF Gym 100463D Evil (二维前缀和+离散)

    题意:给一些带颜色的点,求一个最小的矩形,恰好包括一半的红色点,且不包括蓝色点. 题解:暴力,求个二维前缀和,用容斥原理更新一下.N很小所以我采用了离散优化,跑了个0ms. 之前没写过二维前缀和,加上 ...

  6. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  7. 一步一步教你用IntelliJ IDEA 搭建SSM框架（1）

    1.基本概念 SSM框架指:Spring MVC + Spring + MyBatis Spring MVC是一种web层mvc框架,用于替代servlet,处理|响应请求,获取表单参数,表单校验等 ...

  8. Python01 VSCode开发环境和入门程序

    1.Python的下载和安装 最新版本python3.7.3 https://www.python.org/downloads/release/python-373/ web-based: 在线安装包 ...

  9. Java第7次作业：造人类（用private封装，用static关键字自己造重载输出方法）什么是面向对象程序设计？什么是类和对象？什么是无参有参构造方法 ？什么是封装？

    什么是面向对象程序设计? 我们称为OOP(Object  Oriented  Programming) 就是非结构化的程序设计 要使用类和对象的方法来进行编程 什么是类,什么是对象 类就是封装了属性和 ...

  10. d3.js--04(enter和exit)

    enter() 当DOM数量少于data的数量,或者压根一个都没有的时候,我们一般会希望让程序帮忙创建. <!DOCTYPE html> <html> <head> ...