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