包含csstab样式的词条

如何在css中定义TAB菜单在网页中的位置?(代码)

首先 楼主不管CSS放在head，或者在body,还是外链接效果都是一样的，没有任何区别，对与菜单在网页中的位置其实很简单，如果你CSS的盒子模式嵌套得好的话，你只要用到position:relative来进行微调

成都创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为麻江企业提供专业的成都做网站、网站制作、成都外贸网站建设，麻江网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

否则的话 可以用position:absolute进行绝对调整

我把几个调整位置的代码发给你，希望对你有帮助

CSS 定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

CSS position 属性

通过使用 position 属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

用css做一个流行tab菜单，谁可以帮我详细的说明一下制作过程

你说的那个是滑动门技术吧！

中国站长里有很多例子，还可以直接看效果，菜单类的网址：

下面的例子希望对你有用：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title滑动门技术，用DIV+CSS技术实现/title

style type="text/css"

!--

#header {

background-color: #F8F4EF;

height: 200px;

width: 400px;

margin: 0px;

padding: 0px;

border: 1px solid #ECE1D5;

font-family: "宋体";

font-size: 12px;

}

#menu {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#menu li {

display: block;

width: 100px;

text-align: center;

float: left;

margin: 0px;

padding-top: 0.2em;

padding-right: 0px;

padding-bottom: 0.2em;

padding-left: 0px;

cursor: hand;

}

.sec1 { background-color: #FFFFCC;}

.sec2 { background-color: #00CCFF;}

.block { display: block;}

.unblock { display: none;}

--

/style

/head

body

script language=javascript

function secBoard(n)

{

for(i=0;imenu.childNodes.length;i++)

menu.childNodes[i].className="sec1";

menu.childNodes[n].className="sec2";

for(i=0;imain.childNodes.length;i++)

main.childNodes[i].style.display="none";

main.childNodes[n].style.display="block";

}

/script

div id="header"

ul id="menu"

li onMouseOver="secBoard(0)" class="sec2"主题一/li

li onMouseOver="secBoard(1)" class="sec1"主题二/li

li onMouseOver="secBoard(2)" class="sec1"主题三/li

li onMouseOver="secBoard(3)" class="sec1"主题四/li

/ul

!--内容显示区域--

ul id="main"

li class="block"第一个内容/li

li class="unblock"第二个内容/li

li class="unblock"第三个内容/li

li class="unblock"第四个内容/li

/ul

!--内容显示区域--

/div

/body

/html

如何用css制作圆角WordPress tab导航栏

圆角导航栏标签

这里我们需要用到四张图片，其中各有两张用于当前导航栏状态和激活之后的导航栏状态样式。我将其命名为navleft,navright和

avleft_active,navright_active.其中navright和navright_active应该足够长，以适应那些长的分类目

录或者是分

类页面。

点击查看演示页面：navtabs.html

圆角导航栏涉及到的HTML和CSS

因为这是一个主导航，在大部分的wordpress主题中，都会将这个导航栏放到header.php中。默认WordPress模板标签wp_list_categories在输出时会输出一系列的li标签。现在，为了实现圆角导航栏，我们所要做的就是遵循WordPress规矩，将以下代码加入到header.php中，例如：

PHP

ul id="navtabs"

?php wp_list_categories('title_li='); ?

/ul

注意，这里的ul也带有id（navtabs）,添加这个id，将更容易通过css来自定义。

css代码如下：

#navtabs {

list-style: none;

padding: 0;

height: 30px;

font-size: 11px;

font-weight: bold;

text-transform: uppercase;

border-bottom: 4px solid #0288D8;

}

#navtabs li {

float: left;

background: #CCE7F7 url(images/navleft.png) no-repeat

left top;

padding: 8px 0 8px 14px;

margin-right: 1px;

}

#navtabs li a {

background: #CCE7F7 url(images/navright.png) no-

repeat top right;

padding: 8px 14px 8px 0;

}

#navtabs li.current-cat {

background: #0288D8 url(images/navleft_active.png)

no-repeat left top;

}

#navtabs li.current-cat a {

background: #0288D8 url(images/navright_active.png)

no-repeat right top;

color: #FFFFFF;

}

js+css的tab选项卡 /*可给300分*/

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

TITLE New Document /TITLE

META NAME="Generator" CONTENT="EditPlus"

META NAME="js轮换选项卡样式" CONTENT=""

META NAME="js轮换选项卡样式" CONTENT=""

META NAME="js轮换选项卡样式" CONTENT=""

META http-equiv="Content-Type" content="text/html; charset=utf-8" /

/HEAD

BODY

style

#fodsx {}

#fodsx td.sx0{background:url() right no-repeat;}

#fodsx td.sx1{background:url() right no-repeat;}

#fodsx td.sx2{background:url() right no-repeat;}

#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}

#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}

#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}

#fodsx ul,li{list-style-type:none;margin:0;padding:0;}

.dis{display:block}

.undis{display:none;}

.style1 {color: #444}

/style

table width="455" border="0" align="center" cellpadding="0" cellspacing="0" background="" id="fodsx" style="background-position:leftstyle

#fodsx {}

#fodsx td.sx0{background:url() right no-repeat;}

#fodsx td.sx1{background:url() right no-repeat;}

#fodsx td.sx2{background:url() right no-repeat;}

#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}

#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}

#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}

#fodsx ul,li{list-style-type:none;margin:0;padding:0;}

.dis{disop; background-repeat:no-repeat;margin-bottom:4px;"

tr

td height="22" valign="bottom" class="sx0" id="Fod_listx"p

script language="JavaScript"

!---

today=new Date();

function initArray(){

this.length=initArray.arguments.length

for(var i=0;ithis.length;i++)

this[i+1]=initArray.arguments[i] }

var d=new initArray(" 星期日"," 星期一"," 星期二"," 星期三"," 星期四"," 星期五"," 星期六"); document.write(today.getYear(),"年","",today.getMonth()+1,"月",today.getDate(),"日",d[today.getDay()+1]); //--

/script

/p

div class="sx" onmouseover="fodx(this)"美 体/div

div class="x" onmouseover="fodx(this)"情 感/div

div class="x" onmouseover="fodx(this)"美 发/div/td

/tr

tr

td height="89" align="center" valign="top" background=""ul class="dis"

litable width="400" border="0" cellspacing="0" cellpadding="0"

tr

td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td

/tr

tr

td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"

tr align="left"

td height="44" class="peach1nl font14px" span class="style1"“金猪”年马上就要过去了，那些猪年生子的女星怎么样了？快来评出你心中最闪亮的明星妈妈！/span

a href="" target="_blank" class="peach1nl font14px"[详细]/a/td

/tr

/table

/td

/tr

/table

/li

/ul

ul class="undis"

li table width="400" border="0" cellspacing="0" cellpadding="0"

tr

td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td

/tr

tr

td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"

tr align="left"

td height="44" class="peach1nl font14px" span class="style1"在一次激情过后，刚拿出了一部相机，对着没有来得及穿上衣服的我就拍，我极力的反抗，可是来不及了……/span

a href="" target="_blank" class="peach1nl font14px"[详细]/a/td

/tr

/table

/td

/tr

/table

/li

/ul

ul class="undis"

litable width="400" border="0" cellspacing="0" cellpadding="0"

tr

td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td

/tr

tr

td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"

tr align="left"

td height="44" class="peach1nl font14px" span class="style1"看看我们的盘点性感熟女萧蔷最美+最丑发型，萧美人犯过的错，大家可要小心别重蹈覆辙……/span

a href="" target="_blank" class="peach1nl font14px"[详细]/a

/td

/tr

/table

/td

/tr

/table/li

/ul/td

/tr

tr

td height="4" background=""/td

/tr

/table

script language="javascript"

function fodx(obj)

{

//var p = document.getElementById("Fod_list").getElementsByTagName("div");

var pxN = document.getElementById("Fod_listx");

var px = obj.parentNode.parentNode.parentNode.parentNode.parentNode;

var px1 = obj.parentNode.getElementsByTagName("div");

var tx = px.getElementsByTagName("tr")[1].getElementsByTagName("ul");

var n = px1.length;

for(i=0;in;i++)

{

if(px1[i] == obj)

{

pxN.className = "sx" + i;

px1[i].className = "sx";

tx[i].className = "dis";

}

else

{

px1[i].className = "x";

tx[i].className = "undis";

}

}

}

/script

/BODY

/HTML

新建个HTML，复制进去看看效果

任何页面都可以重用

怎么用？打开Dreamweaver，新建一个HTML页面，然后切换到代码，把这些完全复制覆盖掉原来的，然后F12键预览。

中间的style到/style都是css样式，可以自行修改

下面整个Table里的就是主要tab选项卡代码

下面分析一下你给的那个tab选项卡怎么重用：

function tabit(btn){

var idname = new String(btn.id);

var s = idname.indexOf("_");

var e = idname.lastIndexOf("_")+1;

var tabName = idname.substr(0, s);

var id = parseInt(idname.substr(e, 1));

var tabNumber = btn.parentNode.childNodes.length;

for(i=0;itabNumber;i++){

//document.getElementById(tabName+"_div_"+i).style.display = "none";

document.getElementById(tabName+"_btn_"+i).className = "";

};

//document.getElementById(tabName+"_div_"+id).style.display = "block";

btn.className = "curr";

};

function etabit(btn){

var idname = new String(btn.id);

var s = idname.indexOf("_");

var e = idname.lastIndexOf("_")+1;

var tabName = idname.substr(0, s);

var id = parseInt(idname.substr(e, 1));

var tabNumber = btn.parentNode.childNodes.length;

for(i=0;itabNumber;i++){

document.getElementById(tabName+"_div_"+i).style.display = "none";

document.getElementById(tabName+"_btn_"+i).className = "";

};

document.getElementById(tabName+"_div_"+id).style.display = "block";

btn.className = "curr";

};

这是主要JS代码

复制到你要重用的页面，不需要任何改动

重要的是这个TABLE，在不同页面改变的时候是要有“规则”的。

每个 tab选项卡上

比如：li id="tab1_btn_1" onmouseover="etabit(this)"google/li

都要加上onmouseover="etabit(this)"来触发JS

对应的tab选项卡的内容上

比如：div id="tab1_div_1" style="display:none;" 22222 /div

都要与以上的那个li的id值对应

如：

id="tab1_btn_1" (li中)

id="tab1_div_1" (div中)

id中的数字要对应，0、1、2、3、4等（是指最后的那个_1，前面的tab1忽略）

英文不需要改动

这样就说明这个tab选项卡标题是对应这个tab选项卡的内容的。

有几个选项卡就加几对li（tab卡标题）和div(tab卡内容)

百度空间css中tab1与tab2是什么关系？

#tabline ——菜单下方的横线，即分隔符，用来与空间名称分开

#tab ——导航菜单栏主体—页面上方“主页博客|相册……”栏背景图片

#tab a.on,#tab a.on:link,#tab a.on:visited—— 选中状态，即“导航栏链接”，大小颜色＋背景

#tab span ——导航栏项与项之间的分割符“|”

#tab a:link ——TAB“博客|相册……”栏链接颜色，未被点击

#tab a:visited——“博客|相册……”已被访问过的链接

#tab2 ——(基本选项 | 模板设置 | 高级设置 | 访问统计) 这行的菜单主体属性

#tab2 span ——TAB选中状态

#tab2 a ——TAB未选中状态

#tab2 a:link #tab2 a:visited ——已被访问过的链接

css tab样式中背景图片对不齐

*{margin:0px auto;padding:0px}加进样式里面试试

background:url(../images/but2.png); background-position:top right;这种你可以这样写background:url(../images/but2.png) right no-repeat;更好如果要行居中的话直接在no-repeat后面加个0px 不用去指明父框坐标原点