网站制作常用代码
（一）页面结构
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">密  码:
        <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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。