div+css做的工字型局部初版

来源：互联网发布：办公室恋情知乎编辑：程序博客网时间：2024/05/01 14:48
作为一个程序员，深受不会美工之苦，于是发奋图强，学习美工，下面是我小作，还不完美，做一记录，再图更新。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }
     body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;
   
    }
    .header {
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;
     
    }
    .contentleft {
    height: 250px;
    width: 150px;
    font-size: 14px;
    list-style-type: none;
    float:left;
    border:1px #66CCFF solid;
    }
    .contentleft li {
    float:left;
    }
    .contentleft li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    .contentleft li a:hover{
    border:1px #66CCFF solid;
    color:#FFFFFF;
    }
    .content {
    height:auto;
    width: 760px;
    line-height: 1.5em;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .footer {
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }
    .logo{
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;
    }
  </style>
      <! @author 孙程亮 E-mail:sclsch@188.com -->
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <div class="contentleft">
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </div>
    <div class="contentright">
    <h3>前言</h3>
    <p>第一段内容</p>
    <h3>理解CSS盒子模式</h3>
    <p>第二段内容</p>
    </div>
</div>
<div class="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
 </BODY>
</HTML>
请教如何使页面居中。