网站项目参考代码

网站制作常用代码（一）页面结构
1、两列结构
（1）div结构
<div id=”mid”>
<div id=”left”></div>
<div id=”right”></div>
<div id=”c”></div>
</div>
（2）css代码
#mid{
width:600px;
margin:0 auto;
}
#mid #left{
width:200px;
height:500px;
background-color:#CCCC33;
float:left;
}
#mid #right
{
width:400px; height:500px; background-color:#33CCFF; float:left;
}
#mid #c{ clear:left;}
2、三列结构
1、两列结构
（1）div结构
<div id=”bottom”>
<div id=”left”></div>
<div id=”middle”></div>
<div id=”right”></div>
<div id=”c”></div>
</div>
（2）css代码
#bottom{
width:600px;
margin:0 auto;
}
# bottom #left{
width:200px;
height:100px;
background-color:#CCCC33; float:left;
}
# bottom #mid{
width:200px; height:100px;
background-color:#CCCC33; float:left;
}
# bottom #right{
width:200px;
height:100px;
background-color:#CCCC33; float:left;
}
#mid #c{ clear:left;}
（二）导航条
1、制作垂直导航条1
（1）效果图如右图所示：
（2）打开vertical1.html网页，添加nav结构如下。

<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">翻译服务</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">服务流程</a></li>
<li><a href="#">付费</a></li>
</ul>
（3）CSS代码参考如下：
新建外部样式表vertical1.css，内容如下。

* {
margin: 0px;
padding: 0px;
}
body {
font: 0.75em "宋体";
margin: 20px 0 0 20px;
}
#nav {
list-style: none;
width: 120px;
}
#nav a {
color: #000;
background: #9C0;
text-decoration: none;
border-left: 4px solid #F90;
display: block;
padding: 8px 0 8px 20px;
margin-bottom: 1px;
_height: 1px; /*消除IE6在列表项上下添加的额外空间；同时使IE6的超链接响应区域扩大为块*/
}
#nav a:hover {
color: #F90;
}
2、制作水平导航条1
（1）效果图如右图所示：
（2）打开horizontal1.html网页，添加nav结构如下：
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">翻译服务</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">服务流程</a></li>
<li><a href="#">付费</a></li>
</ul>
（3）CSS代码参考如下：
新建外部样式表horizontal1.css，内容如下。

* {
margin: 0px;
padding: 0px;
}
body {
font: 0.75em "宋体";
margin: 20px 0 0 20px;
}
#nav {
list-style: none;
width: 702px;
background: url(images/nav-bg.gif);
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
}
#nav li{
float: left;
}
#nav a {
color: #FFF;
text-decoration: none;
display: block;
line-height: 37px;
padding: 0px 10px;
_width: 1px;/*使IE6的超链接响应区域扩大为块*/
white-space: nowrap;/*禁止文字换行*/
}
#nav a:hover, #nav a.current {
background: url(images/nav-hover-bg.gif) no-repeat center top;
}
（三）表单
<form name="form1">
<ul id="per">
<li id="per1">用户名:
<input type="text" class="textinput1" onMouseOver="this.focus()" onFocus="this.select()" name="id" maxlength="12" tabindex="1">
<input type="submit" value="登录" tabindex="3"></li>
<li id="per2">密&nbsp;&nbsp;码:
<input type="password" class="textinput2" name="passwd" maxlength="39" tabindex="2">
<input type="button" value="注册"
onClick="window.location='/bbsreg0.html';return false;" tabindex="4"></li> </ul> </form>。