div+css做的工字型局部改进版

来源：互联网发布：七政四余安卓版软件编辑：程序博客网时间：2024/05/01 14:51

这段通过对div和css的学习，初见成效，解决了

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

在ff下浮动格式的问题。

    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }

改成

    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }

去掉了float:right;中间内容区分为左右两部分，左部分设置了float:left;这时下面的右边部分就会浮动到上面且紧靠左部。以前自己搞错了，以为设置了float:right;才会浮动到右边，其实不是这样的，这一切都是自动的。设置了float:right;反而使右部向右浮动，导致中间出现空档，使footer部分浮动上来。当然也可以对footer部分禁止浮动 clear:both;

好了，下面就是修修补补的小问题了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }
    
     body {
     text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;
   
    }
    .header {
    margin:auto;
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;
     
    }
    .logo{
      float:left;
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;
      
    }
    .content {
    margin:auto;
    width: 760px;
    line-height: 1.5em;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .contentleft {
    height: 250px;
    width: 100px;
    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;
    }
    .contentright{
        height: 250px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }
    .footer {
    margin:auto;
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    border:1px #66CCFF solid;
    }
  </style>
   <! @author 孙程亮 E-mail:sclsch@188.com -->
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <title>http://blog.csdn.net/suncheng_hong</title>
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <ul 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>
    </ul>
    <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>

好了，希望对初学都有帮助，一起进步。