网页设计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相关的知识