css的入门问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-1-1 布局固定宽度</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
background: #FFF;
font: 13px/1.5 Arial;
margin:0;
padding:0;
}.rounded {
  background: url(images/left-top.gif)   top left no-repeat;
  width:100%;
  }
.rounded h2 {
  background: 
url(images/right-top.gif) 
  top right no-repeat;
  padding:20px 20px 10px;
  margin:0;
  
  }
.rounded .main {
  background: 
url(images/right.gif) 
  top right repeat-y;
  padding:10px 20px;
    margin:-2em 0 0 0;
      }
.rounded .footer {
  background: 
url(images/left-bottom.gif) 
  bottom left no-repeat;
  }
.rounded .footer p {
  color:#888;
  text-align:right;
  background:url(images/right-bottom.gif) bottom right no-repeat;
  display:block;
  padding:10px 20px 20px;
  margin:-2em 0 0 0;
  font:0/0;
  }
  
 #header,#pagefooter,#content{
 margin:0 auto;
 width:760px;} </style>
</head>
<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。<br/>
这是一行文本，这里作为样例，显示在布局框中。 </p>
</div>
<div class="footer">
<p>
查看详细信息&gt;&gt;
</p> 
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。<br />
这是一行文本，这里作为样例，显示在布局框中。
</p>
<p>
这是一行文本，这里作为样例，显示在布局框中。<br />
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息&gt;&gt;
</p> 
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息&gt;&gt;
</p> 
</div>
</div>
</div></body>
</html>
这个是可以正常的代码

解决方案 »

  1.   

    body {
    background: #FFF;
    font: 13px/1.5 Arial;
    margin:0;
    padding:0;
    }.rounded {
      background: url(images/left-top.gif) top left no-repeat;
      width:100%;
      }
    .rounded h2 {
      background:  
    url(images/right-top.gif)  
      top right no-repeat;
      padding:20px 20px 10px;
      margin:0;
       
      }
    .rounded .main {
      background:  
    url(images/right.gif)  
      top right repeat-y;
      padding:10px 20px;
      margin:-2em 0 0 0;
      }
    .rounded .footer {
      background:  
    url(images/left-bottom.gif)  
      bottom left no-repeat;
      }
    .rounded .footer p {
      color:#888;
      text-align:right;
      background:url(images/right-bottom.gif) bottom right no-repeat;
      display:block;
      padding:10px 20px 20px;
      margin:-2em 0 0 0;
      font:0/0;
      }
       
     #header,#pagefooter,#content{
     margin:0 auto;
     width:760px;}  我把里面的 有关于css 弄出来 另写了个css文件  在<link rel="stylesheet" rev="stylesheet" href="css/css.css" type="text/css" media="all" /> 其他的代码什么都没动
      

  2.   

    style.css 代码
    body {
    background: #FFF;
    font: 13px/1.5 Arial;
    margin:0;
    padding:0;
    }.rounded {
      background: url(images/left-top.gif) top left no-repeat;
      width:100%;
      }
    .rounded h2 {
      background:  
    url(images/right-top.gif)  
      top right no-repeat;
      padding:20px 20px 10px;
      margin:0;
       
      }
    .rounded .main {
      background:  
    url(images/right.gif)  
      top right repeat-y;
      padding:10px 20px;
      margin:-2em 0 0 0;
      }
    .rounded .footer {
      background:  
    url(images/left-bottom.gif)  
      bottom left no-repeat;
      }
    .rounded .footer p {
      color:#888;
      text-align:right;
      background:url(images/right-bottom.gif) bottom right no-repeat;
      display:block;
      padding:10px 20px 20px;
      margin:-2em 0 0 0;
      font:0/0;
      }
       
     #header,#pagefooter,#content{
     margin:0 auto;
     width:760px;} html代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>1-1-1 布局固定宽度</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <LINK href="style.css" type=text/css rel=stylesheet>
    </head>
    <body>
    <div id="header">
    <div class="rounded">
    <h2>Page Header</h2>
    <div class="main">
    <p>
    这是一行文本，这里作为样例，显示在布局框中。<br/>
    这是一行文本，这里作为样例，显示在布局框中。 </p>
    </div>
    <div class="footer">
    <p>
    查看详细信息&gt;&gt;
    </p>  
    </div>
    </div>
    </div>
    <div id="content">
    <div class="rounded">
    <h2>Page Content</h2>
    <div class="main">
    <p>
    这是一行文本，这里作为样例，显示在布局框中。<br />
    这是一行文本，这里作为样例，显示在布局框中。
    </p>
    <p>
    这是一行文本，这里作为样例，显示在布局框中。<br />
    这是一行文本，这里作为样例，显示在布局框中。
    </p>
    </div>
    <div class="footer">
    <p>
    查看详细信息&gt;&gt;
    </p>  
    </div>
    </div>
    </div>
    <div id="pagefooter">
    <div class="rounded">
    <h2>Page Footer</h2>
    <div class="main">
    <p>
    这是一行文本，这里作为样例，显示在布局框中。
    </p>
    </div>
    <div class="footer">
    <p>
    查看详细信息&gt;&gt;
    </p>  
    </div>
    </div>
    </div></body>
    </html>
    这个是可以正常的代码
      

  3.   

    我好像是用的jsp的页面啊 
      

  4.   

    我靠 找到原因了  
     在html中用DW建立的html是这样的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    在ecplice建立的jsp是这样的
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 只要把html中的<!........>替换掉 jsp中的就可以了  纠结啊 
      

  5.   

    楼主你的jsp里是否有如下情况：
    1.标签未被关闭 如 <br> <hr>等
    2.属性值未加双引号 ""
    3.有些元素被不正确嵌套 形如 <a><b>naiyou</a></b>html里用的是 XHTML DTD，而你的jsp里用的是 HTML DTD...不知道和这个有没有关系