首先是css样式，比如这样的：
padding: 0;
list-style: none;
font-size: 12px;
width: 298px;
<span style="color: #
height: 98px;
<span style="color: #
margin: 10px;
<span style="color: #
border:1px solid #7c7c7c;
<span style="color: #
overflow: hidden;
<span style="color: #
<span style="color: #
.notice-tit{
<span style="color: #
height: 27px;
<span style="color: #
background-color: #eaeaea;
<span style="color: #
position: relative;
<span style="color: #
<span style="color: #
.notice-tit ul{
<span style="color: #
position: absolute;
<span style="color: #
width: 300px;
<span style="color: #
left: -1px;
<span style="color: #
<span style="color: #
<span style="color: #
.notice-tit ul li{
<span style="color: #
float: left;
<span style="color: #
width: 58px;
<span style="color: #
height: 26px;
<span style="color: #
line-height: 26px;
<span style="color: #
text-align: center;
<span style="color: #
border-bottom: 1px solid #7c7c7c;
<span style="color: #
padding: 0 1px;
<span style="color: #
<span style="color: #
.notice-tit ul a{
<span style="color: #
text-decoration: none;
<span style="color: #
display: block;
<span style="color: #
<span style="color: #
.notice-tit ul .select{
<span style="color: #
background-color: white;
<span style="color: #
border-right: 1px solid #7c7c7c;
<span style="color: #
border-left: 1px solid #7c7c7c;
<span style="color: #
border-bottom: 1px solid white;
<span style="color: #
padding: 0;
<span style="color: #
<span style="color: #
/*.notice-tit ul li:hover{
<span style="color: #
background-color:
<span style="color: #
border-right: 1px solid #7c7c7c;
<span style="color: #
border-left: 1px solid #7c7c7c;
<span style="color: #
border-bottom: 1
<span style="color: #
padding: 0;
<span style="color: #
<span style="color: # &/script&
注意:1.需要给.notice-tit这个盒子设置相对定位，ul设置绝对定位并且left:-1px(如果不设置-1，ul这个盒子不会和.notice-tit这个盒子完全重叠，因为.notice-tit有个1px 的边框);
　　　2.要给ul下面的li标签设置左右padding 1px；当悬浮的时候出现左右1px的border，同时把当前悬浮的li左右padding设置为0,这样悬浮的时候不会因为li加了2px的左右边框而导致宽度增加;
然后是HTML结构：
1 &div class="notice"&
&div class="notice-tit" id="notice-tit"&
&li class="select"&&a href="#"&公告&/a&&/li&
&li&&a href="#"&规则&/a&&/li&
&li&&a href="#"&论坛&/a&&/li&
&li&&a href="#"&安全&/a&&/li&
&li&&a href="#"&公益&/a&&/li&
<span style="color: #
<span style="color: #
&div class="notice-con" id="notice-con"&
<span style="color: #
&div style="display: block"&我是内容1&/div&
<span style="color: #
&div style="display: none"&我是内容2&/div&
<span style="color: #
&div style="display: none"&我是内容3&/div&
<span style="color: #
style="display: none"&我是内容4&/div&
<span style="color: #
style="display: none"&我是内容5&/div&
<span style="color: #
<span style="color: #
首先定个小目标比如实现简单的点击或者悬浮的TAB切换：
1.获取#notice-tit下面的所有li节点，获取#notice-con下面的所有div节点。
2.遍历#notice-tit下面的所有li节点并添加ID和悬浮或者点击事件。
　添加id的作用是悬浮在当前ID上时对应的显示.notice-con内的div。
1 &script&
//获取id封装成一个函数$()方便调用
function $(id){
//如果传入的参数类型为字符串则获取当前ID元素，否则返回id
return typeof id==="string"?document.getElementById(id):
//window.onload表示当文档加载完毕时执行函数
window.onload=function(){
//获取#notice-tit下面的全部li元素
<span style="color: #
var titles=$('notice-tit').getElementsByTagName('li');
<span style="color: #
//获取#notice-con下面的全部div元素
<span style="color: #
var divs=$('notice-con').getElementsByTagName('div');
<span style="color: #
//遍历所有li标签，给每个li加上id和值，并且绑定事件
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
//给每个li加上id和值
<span style="color: #
titles[i].id=i;
<span style="color: #
//给每个li绑定事件
<span style="color: #
titles[i].onmouseover=function(){
<span style="color: #
//悬浮后首先应该初始化每个li和div上的类和display
<span style="color: #
for(var j=0;j&titles.j++){
<span style="color: #
titles[j].className="";
<span style="color: #
divs[j].style.display="none";
<span style="color: #
<span style="color: #
//给当前悬浮元素添加属性
<span style="color: #
titles[this.id].className="select";
<span style="color: #
divs[this.id].style.display="block";
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # &/script&
初步效果实现了，如果需要点击效果把上面的onmouseover改为onclick。一般的tab标签有个延时的效果，更有利于用户体验，下面来加个定时器。
1 &script&
//获取id封装成一个函数$()方便调用
function $(id){
//如果传入的参数类型为字符串则获取当前ID元素，否则返回id
return typeof id==="string"?document.getElementById(id):
//window.onload表示当文档加载完毕时执行函数
window.onload=function(){
//获取#notice-tit下面的全部li元素
<span style="color: #
var titles=$('notice-tit').getElementsByTagName('li');
<span style="color: #
//获取#notice-con下面的全部div元素
<span style="color: #
var divs=$('notice-con').getElementsByTagName('div');
<span style="color: #
//遍历所有li标签，给每个li加上id和值，并且绑定事件
<span style="color: #
var timer=null;
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
//给每个li加上id和值
<span style="color: #
titles[i].id=i;
<span style="color: #
//给每个li绑定事件
<span style="color: #
titles[i].onmouseover=function(){
<span style="color: #
//this指向当前悬浮的对象并存进变量that中,用that做一个this的引用
<span style="color: #
var that=this;
<span style="color: #
//当存在定时器的时候我们需要把它清除,如果悬浮的时间少于500毫秒，
<span style="color: #
//则不会执行后面的函数，一般定时器前面都需要有个清除的步骤。
<span style="color: #
if(timer){
<span style="color: #
//清除定时器
<span style="color: #
clearTimeout(timer);
<span style="color: #
//初始化变量的值
<span style="color: #
timer=null;
<span style="color: #
<span style="color: #
//设置定时器，执行函数的时间延迟了500毫秒
<span style="color: #
timer=setTimeout(function(){
<span style="color: #
//悬浮后首先应该初始化每个li和div上的类和display
<span style="color: #
for(var j=0;j&titles.j++){
<span style="color: #
titles[j].className="";
<span style="color: #
divs[j].style.display="none";
<span style="color: #
<span style="color: #
//给当前悬浮元素添加属性
<span style="color: #
//这个地方不能用this.id了，因为this指向了window这个对象了,
<span style="color: #
titles[that.id].className="select";
<span style="color: #
divs[that.id].style.display="block";},500);
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # &/script&
下面来实现一个标签页轮播的效果
思路:设置一个索引index=0，和一个定时器timer，在定时器setInterval()中隔2秒不停的去把索引加一，然后根据索引找到对应的元素节点进行操作,注意index不能无限的增加，最大值根据li的数量来决定。
window.onload=function(){
var titles=$('notice-tit').getElementsByTagName('li');
var divs=$('notice-con').getElementsByTagName('div');
//声明一个空的变量来储存定时器
var timer=null;
//索引值，初始值为0
var index=0;
//设置一个定时器,每隔2秒去执行函数
timer=setInterval(function(){
<span style="color: #
//每执行一次index加一
<span style="color: #
<span style="color: #
//设置index的最大值，超过则设为0
<span style="color: #
if(index&=titles.length){
<span style="color: #
<span style="color: #
<span style="color: #
//添加样式前应初始化全部样式
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
titles[i].className="";
<span style="color: #
divs[i].style.display="none";
<span style="color: #
<span style="color: #
//给索引为index的节点去添加样式
<span style="color: #
titles[index].className="select";
<span style="color: #
divs[index].style.display="block";
<span style="color: #
<span style="color: #
终极目标来了：tab悬浮切换+延时效果+自动轮播
1 &script&
//获取id封装成一个函数$()方便调用
3 function $(id){
//如果传入的参数类型为字符串则获取当前ID元素，否则返回id
return typeof id==="string"?document.getElementById(id):
function tab(){
//声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
var index=0,timer=null,timer2=null;
<span style="color: #
var titles=$('notice-tit').getElementsByTagName('li');
<span style="color: #
var divs=$('notice-con').getElementsByTagName('div');
<span style="color: #
for(var j=0;j&titles.j++){
<span style="color: #
//给每个li设置ID
<span style="color: #
titles[j].id=j;
<span style="color: #
//给每个li绑定悬浮事件
<span style="color: #
titles[j].onmouseover=function(){
<span style="color: #
//悬浮时首先清除延时定时器
<span style="color: #
clearInterval(timer);
<span style="color: #
//清除轮播定时器
<span style="color: #
clearTimeout(timer2);
<span style="color: #
//初始化两个定时器
<span style="color: #
timer2=null;
<span style="color: #
timer=null;
<span style="color: #
//this的一个引用，因为在setTimeout中this指向window对象
<span style="color: #
var that=this;
<span style="color: #
//创建一个延时定时器
<span style="color: #
timer2=setTimeout(function(){
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
titles[i].className="";
<span style="color: #
divs[i].style.display="none";
<span style="color: #
<span style="color: #
titles[that.id].className="select";
<span style="color: #
divs[that.id].style.display="block";
<span style="color: #
//鼠标悬浮时改变index的值为当前的id
<span style="color: #
index=that.
<span style="color: #
<span style="color: #
<span style="color: #
//给每个Li绑定鼠标离开时的事件
<span style="color: #
titles[j].onmouseout=function(){
<span style="color: #
//创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
<span style="color: #
//所以鼠标离开后会自动播放下一个tab
<span style="color: #
timer=setInterval(function(){
<span style="color: #
<span style="color: #
if(index&=titles.length){
<span style="color: #
<span style="color: #
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
titles[i].className="";
<span style="color: #
divs[i].style.display="none";
<span style="color: #
<span style="color: #
titles[index].className="select";
<span style="color: #
divs[index].style.display="block";
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
//创建之前看是否存在轮播定时器，有就清除掉
<span style="color: #
if(timer){
<span style="color: #
clearInterval(timer);
<span style="color: #
timer=null;
<span style="color: #
<span style="color: #
//创建一个轮播定时器
<span style="color: #
timer=setInterval(function(){
<span style="color: #
<span style="color: #
if(index&=titles.length){
<span style="color: #
<span style="color: #
<span style="color: #
for(var i=0;i&titles.i++){
<span style="color: #
titles[i].className="";
<span style="color: #
divs[i].style.display="none";
<span style="color: #
<span style="color: #
titles[index].className="select";
<span style="color: #
divs[index].style.display="block";
<span style="color: #
<span style="color: # }
<span style="color: # tab();
<span style="color: # &/script&
做这个标签页demo的过程中感觉单独的功能做出来还是比较能理解，难理解的是把三个功能做在一起，重复做了几遍，经常会卡壳，不知道下一步的思维逻辑。下一步终极+目标是代码优化了，上面的代码太多的重复，后续如何，下回分解。
阅读(...) 评论()表格细边框的两种CSS实现方法-css教程-PHP中文网QQ群微信公众号还没有收藏表格细边框的两种CSS实现方法在网页制作中，细边框这个制作方法是必不可少的。这里admin10000.com介绍2种常见的表格细边框制作方法，均通过XHTML验证。&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&表格细边框的两种CSS实现方法&/title&
&style type=&text/css&&
/* 利用表格样式 border-collapse: collapse 实现细边框 */
width: 300
height: 200
border: 1px solid #
border-collapse:
.tab1 td, .tab1 th
border: 1px solid #
padding: 5
/* 利用表格样式 border-spacing:0 和表格与单元格背景色的不同来实现细边框。
IE7及更早浏览器不支持border-spacing属性，可以通过table的标签属性cellspacing来替代。*/
width: 300
height: 200
background-color: #
border-spacing: 1
.tab2 td, .tab2 th
background-color: #
第一种 （通过XHTML验证）
&table class=&tab1&&
Admin10000.com
Admin10000.com
Admin10000.com
Admin10000.com
第二种 （通过XHTML验证）
&table class=&tab2&&
Admin10000.com
Admin10000.com
Admin10000.com
Admin10000.com
相关文档：用CSS hack技术解决浏览器兼容性问题以上就是表格细边框的两种CSS实现方法的详细内容，更多请关注php中文网其它相关文章！共3篇434点赞收藏.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号没有更多推荐了，
不良信息举报
举报内容：
制作了一个仿淘宝的tab框
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！网站已改版，请使用新地址访问：
tabpop js实现的div弹出框效果，弹框本身支持tab选项卡。一般的 标题栏是不能 JavaScript 246万源代码下载- www.pudn.com
&文件名称: tabpop& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 46 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：js实现的div弹出框效果，弹框本身支持tab选项卡。一般的弹出框标题栏是不能实现tab选择的！-div pop-up effect js implemented, playing box itself supports tab tab. Usually the title bar of a pop-up box is selected tab can not be achieved!
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&带tab的弹出框\cfwbox.js&&.....................\cfwboxtab.css&&.....................\images\del.jpg&&.....................\......\line.jpg&&.....................\......\loading.gif&&.....................\......\u_qt1.png&&.....................\......\u_qt1.psd&&.....................\......\u_qt2.png&&.....................\style.css&&.....................\tab1.html&&.....................\tab2.html&&.....................\tab3.html&&.....................\tab4.html&&.....................\tab5.html&&.....................\弹出tab页测试.html&&.....................\images&&带tab的弹出框
&输入关键字，在本站246万海量源码库中尽情搜索：&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
表格细边框的两种CSS实现方法
摘要：在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&htmlxmlns=&http://www.w3.org/1999/xhtm
在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&表格细边框的两种CSS实现方法&/title&
&style type=&text/css&&
/* 利用表格样式 border-collapse: collapse 实现细边框 */
width: 300
height: 200
border: 1px solid #
border-collapse:
.tab1 td, .tab1 th
border: 1px solid #
padding: 5
/* 利用表格样式 border-spacing:0 和表格与单元格背景色的不同来实现细边框。
IE7及更早浏览器不支持border-spacing属性,可以通过table的标签属性cellspacing来替代。*/
width: 300
height: 200
background-color: #
border-spacing: 1
.tab2 td, .tab2 th
background-color: #
&/style& &/head& &body&
第一种 (通过XHTML验证)
&table class=&tab1&&
Admin10000.com
Admin10000.com
Admin10000.com
Admin10000.com
第二种 (通过XHTML验证)
&table class=&tab2&&
Admin10000.com
Admin10000.com
Admin10000.com
Admin10000.com
&/table& &/body& &/html&
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
表格细边框的两种CSS实现方法相关信息，包括
的信息，所有表格细边框的两种CSS实现方法相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International}