html tab复习

来源：互联网发布：java ee书编辑：程序博客网时间：2024/06/08 04:05

<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>

</script>
</head>
<body>
<br><br>
<div id="Tab">
<div class="Menubox">
    <ul>
      <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">高职高专</li>
      <li id="menu2" onmouseover="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。

‍