網頁設計tab為body分配各自的id_網頁設計中選項卡設計

1、網頁設計之HTML中Id和Name的區別

html中：name指的是用戶名稱,ID指的是用戶注冊是系統自動分配給用戶的一個序列號。 name是用來提交數據的，提供給表單用，可以重復；id則針對文檔操作時候用，不能重復。如：document.getElementById()；
一、ID是在客戶端腳本里用!NAME是用於獲取提交表單的某表單域信息，在form裡面,如果不指定Name的話,就不會發送到伺服器端。
二、以下元素input、select、form、frame、iframe用name，而以下元素table、tr、 td、div、p、span、h1、li用id，表單元素(form input textarea select)與框架元素(iframe frame)用 name，這些元素都與表單(框架元素作用於form的target)提交有關, 在表單的接收頁面只接收有name的元素, 賦ID的元素通過表單是接收不到值的.
當然上述元素也可以賦ID值, 賦ID值的時候引用這些元素的方法就要變一下了.
賦 name: document.formName.inputName document.frames("frameName")
賦 ID : document.all.inputID document.all.frameID
只能賦ID不能賦name的元素:(除去與表單相關的元素都只能賦ID)
body li a table tr td th p div span pre dl dt dd font b 等等

2、網頁中的Tab選項卡代碼程序

3、請問有沒有關於網頁製作中好的命名規則？還有如何合理的分配每個分頁的CSS文件？

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
注冊：regsiter
狀態態：status
投票：vote
合作夥伴：partner

注釋的寫法

/* Footer */
內容區
/* End Footer */

id的命名
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

id的命名

頁面結構

容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

導航

導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary

功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：copyright

class的命名

(1)顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; }
.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproct { }

注意事項

1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線;
4.盡量不縮寫，除非一看就明白的單詞.
主要的 master.css
模塊 mole.css
基本共用 base.css
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css

4、網頁設計中標簽選擇器，類選擇器，ID選擇器，組合選擇器區別在哪裡？

class 是類選擇器
id 是id選擇器
都是在css定義類名的時候用到，原則上都可以用，但是一般用類選擇器，用id可能與後台程序id類重名

5、網頁設計的一個問題```

你看下是不是我傳上來的圖片的這種樣式？業內喜歡稱呼為「滑動門」。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>我的滑動門</title>

body{

color: #000;

font-family: "宋體", arial;

font-size: 12px;

background: #fff;

text-align: center;

margin: 0;

}

.nTab{

float: left;

width: 960px;

margin: 0 auto;

border-bottom:1px #AACCEE solid;

background:#d5d5d5;

background-position:left;

background-repeat:repeat-y;

margin-bottom:2px;

}

.nTab .TabTitle{

clear: both;

height: 22px;

overflow: hidden;

}

.nTab .TabTitle ul{

border:0;

margin:0;

padding:0;

}

.nTab .TabTitle li{

float: left;

width: 70px;

cursor: pointer;

padding-top: 4px;

padding-right: 0px;

padding-left: 0px;

padding-bottom: 2px;

list-style-type: none;

}

.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}

.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}

.nTab .TabContent{

width:auto;background:#fff;

margin: 0px auto;

padding:10px 0 0 0;

border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;

}

.none {display:none;}

</style>

function nTabs(thisObj,Num){

if(thisObj.className == "active")return;

var tabObj = thisObj.parentNode.id;

var tabList = document.getElementById(tabObj).getElementsByTagName("li");

for(i=0; i <tabList.length; i++)

{

if (i == Num)

{

thisObj.className = "active";

document.getElementById(tabObj+"_Content"+i).style.display = "block";

}else{

tabList[i].className = "normal";

document.getElementById(tabObj+"_Content"+i).style.display = "none";

}

</script>

</head>

<body>

<br />

</ul>

</div>

</div>

</ul>

</div>

</div>

</div>

</body>

</html>

如果是感應觸發.就選onmouseover

如果是點擊觸發.就選onclick [把它們兩互相替換,就可隨時變為感應或點擊了]

而如果想在一個頁面上有N個滑動門

就復制一套...將myTab0改成myTab1 myTab2 myTab3 等等等..都可以..或者換成你自己喜歡的名字...當然myTab0_Content0這個亦是要隨著變動!

6、網頁設計中選項卡設計,每個選項卡下邊的內容能加表格嗎？

可以的，加表格和div都可以的以下是我用php+jstable選項卡寫的代碼：

<ul>

<li id="tab_2" onclick="setTab(2,3)">學生夏令營</li>

<li id="tab_3" onclick="setTab(3,3)">越野探險旅遊</li>

</ul>

</div>

<div class="tjys"><img alt="<?php echo $row_tztj['title']; ?>" class="tjys_images" src="admin/kjj/<?php echo $row_tztj['images']; ?>" width="233" height="200" />

<h5><a href="tbzl_detail.php?id=<?php echo $row_tztj['id'];?>" class="A2" onFocus="blur()"><?php echo $row_tztj['title']; ?></a></h5></div> <?php } while ($row_tztj = mysql_fetch_array($result,MYSQL_BOTH)); ?>

</div>

<?php do { ?>

<div class="tjys"><img alt="<?php echo $row_xly['title']; ?>" class="tjys_images" src="admin/kjj/<?php echo $row_xly['images']; ?>" width="233" height="200" />

<h5><a href="tbzl_detail.php?id=<?php echo $row_xly['id'];?>" class="A2" onFocus="blur()"><?php echo $row_xly['title']; ?></a></h5></div> <?php } while ($row_xly = mysql_fetch_array($Rexly,MYSQL_BOTH)); ?>

</div>

<?php do { ?>

<div class="tjys"><img alt="<?php echo $row_txyy['title']; ?>" class="tjys_images" src="admin/kjj/<?php echo $row_txyy['images']; ?>" width="233" height="200" />

<h5><a href="tbzl_detail.php?id=<?php echo $row_txyy['id'];?>" class="A2" onFocus="blur()"><?php echo $row_txyy['title']; ?></a></h5></div> <?php } while ($row_txyy = mysql_fetch_array($Retxyy,MYSQL_BOTH)); ?>

</div>

效果如下

7、網頁設計中，有一個詞tab 與tab標簽到底指的是什麼？有什麼區別？求截圖！~~多謝！

這個就是tab標簽

都是用腳本實現的

8、html中文檔對象的<body>中各個對象的name和id屬性各自起什麼作用?

ihsh z igzkh

9、關於網頁設計的問題

<!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/html; charset=utf-8" />
<title>圖片無間隙滾動</title>
</head>
<body>
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<table>
<tr>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100" /></a><p style=" text-align:center;">測試1</p></td>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100"/></a><p style=" text-align:center;">測試2</p></td>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100"/></a><p style=" text-align:center;">測試3</p></td>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100"/></a><p style=" text-align:center;">測試4</p></td>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100"/></a><p style=" text-align:center;">測試5</p></td>
<td><a href="#"><img src="images/10.jpg" border="0" width="150" height="100"/></a><p style=" text-align:center;">測試6</p></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
</div>

<script>

</script>
</body>
</html>

10、設置網站兩欄布局頂部模塊id為header 主模塊id為pagebody 寫出html和css

首先要確定是用什麼標簽布局。
如果是div標簽就是：
<style>
#header{width:100%;/*寬度*/height:200px;/*高度*/;margin:auto}
#pagebody{width:100%;/*寬度*/height:800px;/*高度*/;margin:auto}
</style>
<body>
<div id="header"></div>
<div id="pagebody"></div>
</body>

導航:首頁 > 萬維百科 > 網頁設計tab為body分配各自的id

網頁設計tab為body分配各自的id

與網頁設計tab為body分配各自的id相關的知識