<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<style>
<!--
.username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01 1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px }
-->
</style>
</head>
<body>
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">
<tr>
<form name="myform" method="post" action="">
<td class="login_td">用户名：<input class="username" onmouseover="this.style.borderColor='#99E300'" onmouseout="this.style.borderColor='#A1BCA3'" maxLength="12" name="UserName"></td>
</form>
</tr>
</table>
</body>
</html>
1.CSS ID 的命名
外 套： wrap
主导航： mainnav
子导航： subnav
页 脚： footet
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
主导航： mainbav（globalnav）
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
旗 志： logo
标 语： banner
菜单内容1： menu1 content
菜单容量： menu container
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： Login
功能区： shop(如
购物车，收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->
3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
<!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=gb2312" />
<title>纵向导航菜单</title>
<style>
#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}
</style>
</head>
<body>
<div id="nav">
<h1>CSS</h1>
<h2><a href="#">css入门</a></h2>
<h2><a href="#">css进阶</a></h2>
<h2><a href="#">css高级</a></h2>
<h1>webUI</h1>
<h2><a href="#">理论知识</a></h2>
<h2><a href="#">实战应用</a></h2>
<h2><a href="#">高级技巧</a></h2>
<h1>DOM</h1>
<h2><a href="#">DOM入门</a></h2>
<h2><a href="#">DOM应用</a></h2>
<h2><a href="#">DOM与浏览器</a></h2>
<h1>XHTML</h1>
<h2><a href="#">参考手册</a></h2>
<h2><a href="#">交流论坛</a></h2>
</div>
</body>
</html>
<!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=gb2312" />
<title>二列左列固定，右列宽度自适应——AA25.CN</title>
<style type="text/css">
<!--
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px;
}
-->
</style>
</head>
<body>
<div id="left">左列——固定(AA25.CN)</div>
<div id="right">右列——宽度自适应(AA25.CN)</div>
</body>
</html>
统来说，“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容，而CSS则是定义结构布局和修饰内容样式。
常用于布局的XHTML一般有：
DIV：主要用于页面内容逻辑上的分块，比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。此时即可使用DIV标签分割。
同时对各区块建议这样的命名：
头部：<div id="masthead"></div>
导航：<div id="globalnav"></div>
侧栏：<div id="navbar"></div>
内容：<div id="content"></div>
版权：<div id="copyright"></div>
注：id具有唯一性，即在同一页面中不得重复出现该ID两次以上。否则使用class。
ul：其原本是无序列表，在XHTML+CSS的应用中常用来表示非结构类的同等元素。需要和UL的子元素LI配合使用。
<div>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
span：如果拿这个元素和DIV进行比较，那么span是个袋子而div则是个箱子（语出小毅：XHTML代码的基本应用）。其实div是个块级元素，而span是个行内元素（参见有关内联（行内）元素、块级元素），通过span就可对一段或一行元素集中的某片断元素进行单独定义。
比如：
<ul>
<li><span>(2006-11-13)</span>XHML+CSS布局之XHTML应用小结</li>
</ul>
在css中定义span为左/右浮动，就能实现日期和标题的分两侧显示。这相对使用
<ul>
<li>2006-11-13</li>
<li>XHML+CSS布局小结</li>
</ul>
要简单得多。
=======================================
在说完了常见的用于布局的XHTML标签后，还有的XHTML标签则是用来显示网页内容的。比如：
<img src="" alt="" title="" />表示图像
<a href="" title=""></a>表示超级链接
<hn></hn>(n=1,2,...,6)表示页内容标题
其中建议h1-h6根据重要性依次递减，h1为最重要的标题（参见greengnn：div+css命名参考）
原本使用<b></b>和<i></i>表示粗体和斜体的标签，选择使用<strong></strong>和<em></em>代替。
下面是我做的一个示例（在IE6.0 / Opera9.00 / Mozilla Firfox 1.5 验证通过）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.left
{
float:left;
width:80px;
height:80px;
margin-left:0px;/*浮动左边*/
}
#left1
{
background-color:#333;
}
#left2
{
background-color:#666;
}
#left3
{
background-color:#999;
}
#left4
{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="left1" class="left">dd</div>
<div id="left2" class="left">2</div>
<div id="left3" class="left">3</div>
<div id="left4" class="left">5</div>
</body>
</html>