html tab复习

<html xmlns="">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title></title>
 <style type="text/css">
 body{font:"宋体";font-size:12px;}
 a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
 a:hover{color:#ff0000;text-decoration:underline;}
 #Tab{margin:0 auto;width:220px;border:1px solid #BCE2F3;}
 .Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;}
 .Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
 .Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;}
 .Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
 .Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}
 .Contentbox ul{list-style:none;margin:7px;padding:0;}
 .Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
 </style>
 <script>
 <!--
 function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
 }
 //-->
 </script>
</head>
<body>
<br><br>
<div id="Tab">
  <div class="Menubox">
    <ul>
      <li id="menu1" οnmοuseοver="setTab('menu',1,2)" class="hover">高职高专</li>
      <li id="menu2" οnmοuseοver="setTab('menu',2,2)" >民办学校</li>
    </ul>
  </div>
  <div class="Contentbox"> 
    <div id="con_menu_1" class="hover">
      <ul>
        <li>·<a href="#">北京工业职业技术学院</a></li>
        <li>·<a href="#">北京财贸职业学院</a></li>
        <li>·<a href="#">天津职业大学</a></li>
        <li>·<a href="#">大连职业技术学院</a></li>
        <li>·<a href="#">辽宁交通高等专科学校</a></li>
        <li>·<a href="#">浙江金融职业学院</a></li>
        <li>·<a href="#">山东商业职业技术学院</a></li>
        <li>·<a href="#">宁波职业技术学院</a></li>
        <li>·<a href="#">武汉职业技术学院</a></li>
      </ul>
    </div>
    <div id="con_menu_2" style="display:none">
      <ul>
        <li>·<a href="#">江西蓝天学院</a></li>
        <li>·<a href="#">西安外事学院</a></li>
        <li>·<a href="#">湖南涉外经济学院</a></li>
        <li>·<a href="#">西安翻译学院</a></li>
        <li>·<a href="#">三江学院</a></li>
        <li>·<a href="#">北京城市学院</a></li>
        <li>·<a href="#">黄河科技学院</a></li>
        <li>·<a href="#">吉林华桥外国语学院</a></li>
        <li>·<a href="#">浙江树人学院</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

效果如下:

 

这几天不知道公司是怎么安排的,让我写一个tab 这可是一个美工做的,让一个写程序的做,这不要命吗?还是硬着头皮做吧。但是有一个问题一直围绕着我,就是 UL li 为什么用了 margin 了,内容还是自动向后缩了很长一段,怎么弄还是不行,查了半天没有解决,今天灵光一闪,出来了,原来默认情况下 padding 及内边距是有默认值的。据说是40px;但是后来在一些API上查有的是0;搞不懂了,也许是浏览器的关系吧,下面的就是这样,所以在做样式表的时候不要依赖浏览器,吧样式用代码搞定,不管是哪个版本浏览器全部搞定。 

元素的内边距:边框和内容区之间的距离,控制该区域最简单的属性是 padding 属性。

padding 简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释:不允许使用负值。

例子 1:padding:10px 5px 15px 20px;

上内边距是 10px右内边距是 5px下内边距是 15px左内边距是 20px

例子 2:padding:10px 5px 15px;

上内边距是 10px右内边距和左内边距是 5px下内边距是 15px

例子 3:padding:10px 5px;

上内边距和下内边距是 10px右内边距和左内边距是 5px

例子 4:padding:10px;所有 4 个内边距都是 10px

说明:

默认值:0继承性:no版本:CSS1JavaScript 语法:object.style.padding="10px 5px"

实例

设置 p 元素的 4 个内边距:

p { padding:2cm 4cm 3cm 4cm; } 单边内边距属性

也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:

padding-toppadding-rightpadding-bottompadding-left 边距属性:  margin     元素所占空间的边缘到相邻元素之间的距离。也就是说如 div1 div2 这两个层之间的距离边距属性(margin)

这个属性是设定边距宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右边距属性。

你可以为上下左右边距设置相同的宽度。示例入下:

.d1 {margin:1cm}

你也可以分别设置边距,顺序是上,右,下,左。示例如下:

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代码表示,上边距为1cm,右边距为2cm,下边距为3cm,左边距为4cm。

 

说到这里不禁想起来了盒子模型来:

CSS 中有个重要的概念,就是盒子模式 (Box model)。

如下图:

盒子里由外至里依次是:margin 边距border 边框    padding 间隙 (也有人称做补丁)content (内容,比如文本,图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

 CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。

 

下面说说 border 属性

边框风格属性(border-style):

这个属性用来设定上下左右边框的风格,它的值如下:

none (没有边框,无论边框宽度设为多大)

‍dotted (点线式边框)

‍dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

‍效果如下:



边框宽度属性(border-width)

这个属性用来设定上下左右边框的宽度,它的值如下:

medium (是缺省值)

 thin (比medium细)

thick (比medium粗)

用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

效果如下:


边框颜色属性(border-color)

这个属性用来设定上下左右边框的颜色。例句如下:

.d5 {border-color:gray;border-style:solid;}

边框属性(border)

这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:

.d1 {border:5px solid gray;}

单边边框属性

上下左右四个边框不但可以统一设定,也可以分开设定。

设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
html tab切换是一种常见的网页交互效果,可以通过点击不同的标题来显示不同的内容区域。实现这个效果的思路是给每个标题绑定事件,当点击某个标题时,显示对应的内容区域,同时隐藏其他内容区域。 具体的实现步骤如下: 1. 在HTML中创建四个标题和四个内容区域,可以使用<ul>和<li>来创建标题列表,使用<div>来创建内容区域。 2. 使用JavaScript监听标题的点击事件,当点击某个标题时,获取该标题对应的索引值。 3. 根据索引值找到对应的内容区域,将其显示出来,并隐藏其他内容区域。 这里提供一个基本的HTML结构和JavaScript代码的示例供参考: HTML部分: ``` <ul class="tab-title"> <li class="active">标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> <div class="tab-content"> <div class="content active">内容一</div> <div class="content">内容二</div> <div class="content">内容三</div> <div class="content">内容四</div> </div> ``` CSS部分: ```css .tab-title li { display: inline-block; margin-right: 10px; cursor: pointer; } .tab-content .content { display: none; } .tab-content .active { display: block; } ``` JavaScript部分: ```javascript var titles = document.querySelectorAll('.tab-title li'); var contents = document.querySelectorAll('.tab-content .content'); for (var i = 0; i < titles.length; i++) { titles[i].addEventListener('click', function() { // 移除所有标题的 active 类 for (var j = 0; j < titles.length; j++) { titles[j].classList.remove('active'); } // 隐藏所有内容区域 for (var k = 0; k < contents.length; k++) { contents[k].classList.remove('active'); } // 添加当前标题的 active 类 this.classList.add('active'); // 获取当前标题的索引值 var index = Array.prototype.indexOf.call(titles, this); // 显示对应索引值的内容区域 contents[index].classList.add('active'); }); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值