*{margin:0px auto;padding:0px}加進(jìn)樣式里面試試
創(chuàng)新互聯(lián)主營江達(dá)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),江達(dá)h5小程序開發(fā)搭建,江達(dá)網(wǎng)站營銷推廣歡迎江達(dá)等地區(qū)企業(yè)咨詢
background:url(../images/but2.png); background-position:top right;這種你可以這樣寫background:url(../images/but2.png) right no-repeat;更好如果要行居中的話直接在no-repeat后面加個(gè)0px 不用去指明父框坐標(biāo)原點(diǎn)
控制table的樣式可以這么寫：
.td{border:solid?#add9c0;?border-width:0px?1px?1px?0px;}
.table{border:solid?#add9c0;?border-width:1px?0px?0px?1px;}
這樣都分別引入到table?和?td標(biāo)簽控制樣式了。
效果如下：
span id="ContentArea"html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title網(wǎng)頁特效/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='#'當(dāng)前位置：首頁"
links[1]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a | a href='#'項(xiàng)目四/a"
links[2]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a"
links[3]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a | a href='#'項(xiàng)目四/a | a href='#'項(xiàng)目五/a"
links[4]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[5]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a"
links[6]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[7]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[8]="a href=''項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[9]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[10]="a href='#'項(xiàng)目一/a| a href='#'項(xiàng)目二/a"
links[11]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"
links[12]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/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娛樂快報(bào)/lili音樂天地/lili極品FLASH/li
/div
div id="subMenu"站務(wù)公告/div
/body
/html
/span
圓角導(dǎo)航欄標(biāo)簽
這里我們需要用到四張圖片，其中各有兩張用于當(dāng)前導(dǎo)航欄狀態(tài)和激活之后的導(dǎo)航欄狀態(tài)樣式。我將其命名為navleft,navright和
avleft_active,navright_active.其中navright和navright_active應(yīng)該足夠長，以適應(yīng)那些長的分類目
錄或者是分
類頁面。
點(diǎn)擊查看演示頁面：navtabs.html
圓角導(dǎo)航欄涉及到的HTML和CSS
因?yàn)檫@是一個(gè)主導(dǎo)航，在大部分的wordpress主題中，都會(huì)將這個(gè)導(dǎo)航欄放到header.php中。默認(rèn)WordPress模板標(biāo)簽wp_list_categories在輸出時(shí)會(huì)輸出一系列的li標(biāo)簽?，F(xiàn)在，為了實(shí)現(xiàn)圓角導(dǎo)航欄，我們所要做的就是遵循WordPress規(guī)矩，將以下代碼加入到header.php中，例如：
PHP
ul id="navtabs"
?php wp_list_categories('title_li='); ?
/ul
注意，這里的ul也帶有id（navtabs）,添加這個(gè)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放在head，或者在body,還是外鏈接效果都是一樣的，沒有任何區(qū)別，對與菜單在網(wǎng)頁中的位置其實(shí)很簡單，如果你CSS的盒子模式嵌套得好的話，你只要用到position:relative來進(jìn)行微調(diào)
否則的話 可以用position:absolute進(jìn)行絕對調(diào)整
我把幾個(gè)調(diào)整位置的代碼發(fā)給你，希望對你有幫助
CSS 定位和浮動(dòng)
CSS 為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個(gè)表格才能完成的任務(wù)。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。顯然，這個(gè)功能非常強(qiáng)大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠(yuǎn)勝于對其它方面的支持，對此不應(yīng)感到奇怪。
另一方面，CSS1 中首次提出了浮動(dòng)，它以 Netscape 在 Web 發(fā)展初期增加的一個(gè)功能為基礎(chǔ)。浮動(dòng)不完全是定位，不過，它當(dāng)然也不是正常流布局。我們會(huì)在后面的章節(jié)中明確浮動(dòng)的含義。
CSS position 屬性
通過使用 position 屬性，我們可以選擇 4 中不同類型的定位，這會(huì)影響元素框生成的方式。
position 屬性值的含義：
static
元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative
元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。
提示：相對定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢谩?/p>
標(biāo)題名稱：css3tab樣式的簡單介紹
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/dsejdep.html
重慶分公司
重慶分公司
