css3tab样式的简单介绍

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 不用去指明父框坐标原点

如何使用CSS样式表统一定义table和td标记样式？能举个实例吗？

控制table的样式可以这么写：

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}

.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

这样都分别引入到table 和 td标签控制样式了。

效果如下：

div css的tab选项卡效果

span id="ContentArea"html

head

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

title网页特效/title

/head

style type="text/css"

#dNavBar{

background-color:#ffffff;

}

#dNavBar li{

list-style-type:none;

float:left;

width:84px;

height:28px;

line-height:28px;

font-size:12px;

color:#FFFFFF;

border:3px solid #ffffff;

background-color:#86C2FF;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background-color:#0000FF;

width:500px;

border-left:3px solid #ffffff;

border-right:3px solid #ffffff;

height:29px;

line-height:29px;

color:#FFFFFF;

font-size:12px;

padding-left:10px;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: none;

}

a:visited{

color: #FFFFFF;

text-decoration: none;

}

/style

script language="javascript"

function ShowMenu()

{

var barCTT=document.getElementById("dNavBar")

var liArr=barCTT.getElementsByTagName("li")

var links=new Array()

links[0]="a href='#'当前位置：首页"

links[1]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a"

links[2]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"

links[3]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a | a href='#'项目五/a"

links[4]="a href='#'项目一/a | a href='#'项目二/a"

links[5]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"

links[6]="a href='#'项目一/a | a href='#'项目二/a"

links[7]="a href='#'项目一/a | a href='#'项目二/a"

links[8]="a href=''项目一/a | a href='#'项目二/a"

links[9]="a href='#'项目一/a | a href='#'项目二/a"

links[10]="a href='#'项目一/a| a href='#'项目二/a"

links[11]="a href='#'项目一/a | a href='#'项目二/a"

links[12]="a href='#'项目一/a | a href='#'项目二/a"

for (i=0;iliArr.length;i++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;iallLi.length;i++)

{

allLi[i].style.border="3px solid #ffffff";

allLi[i].style.backgroundColor="#86C2FF";

allLi[i].style.height="28px";

if (indexObj==allLi[i])

{

index=i;

}

}

indexObj.style.borderBottom="0px solid #666688";

indexObj.style.backgroundColor="#0000FF";

indexObj.style.height="31px";

document.getElementById("subMenu").innerHTML=infoArr[index];

}

/script

body onLoad="ShowMenu()"

div id="dNavBar" style="float:none; width:560px;"li首页/lili娱乐快报/lili音乐天地/lili极品FLASH/li

/div

div id="subMenu"站务公告/div

/body

/html

/span

如何用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;

}

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

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

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

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

CSS 定位和浮动

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

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

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

CSS position 属性

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

position 属性值的含义：

static

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

relative

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

absolute

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

fixed

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

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