sclsch

java备忘

BlogJava 首页 新随笔 联系 聚合 管理
  10 Posts :: 0 Stories :: 6 Comments :: 0 Trackbacks
我是css初学者,自己做了一个工字型的布局,但整个页面不居中。请指点,代码如下:
<!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>
   
  
<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><href="#">首 页</a></li>
    
<li><href="#">文 章</a></li>
    
<li><href="#">相册</a></li>
    
<li><href="#">Blog</a></li>
    
<li><href="#">论 坛</a></li>
    
<li><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 &copy;2006 - 2008 Tang
Guohui. All Rights Reserved
</p>
</div>
 
</BODY>
</HTML>
另外,还有很多不完美的地方,请指点一下!

posted on 2008-10-05 21:00 sclsch 阅读(743) 评论(3)  编辑  收藏

Feedback

# re: 如何控制css居中? 2008-10-06 13:22 杨爱友
在样式表body里加上个text-align:center;就剧中啦。你的样式表代码都没有缩进,看起来很别扭。  回复  更多评论
  

# re: 如何控制css居中? 2008-10-07 16:06 nicg
text-align:center;这个就是区域范围内的剧中操作,如果你想让什么剧中,就在它的容器中加入如下属性即可  回复  更多评论
  

# re: 如何控制css居中? 2008-10-27 19:42 sclsch
谢谢。  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问