网站项目参考代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网站制作常用代码（一）页面结构
1、两列结构
（1）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结构
（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结构如下。
（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结构如下：
（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;
}