Question

我正在为一位朋友在网站上工作。我是CSS的新手。当我在浏览器中打开代码时，网页不像屏幕那么宽。我希望它适合屏幕而不是那么小。我目前使用免费的Coffee Cup HTML编辑器，它只是一个具有预览功能的基本编辑器。我一直在研究像W3Schools，HTML Dog这样的网站。谁能提出一些好的资源？

   <!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" xml:lang="en" lang="en">

    <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>ABA Coach</title>


     <style type="text/css" media="screen">




     body       { margin: 0; padding: 0; }
      body    { color: #333; font: 14px Helvetica, Arial, sans-serif; line-height: 18px; }
      h2    { color: #333; }
      a    { color: #337810; }
      p    { margin: 0 0 18px; }
      #container  { width: 760px; margin: 0 auto;}
      #wrapper  { float: left; width: 100%; }



      /* Header */
      #header   { background-color: lightsteelblue; background-image: url('head.jpg'); border-style:ridge; border-bottom: 5px solid ; }
      /*
      #header h1   { color: black; margin: 0 0 3px; padding: 30px 18px 0; }
      #header p  { color: black; font-size: 11px; font-weight: bold; padding: 0 18px; }*/


      /* Content Style */
      #navigation  { border-bottom: 1px solid #ccc; }
      #navigation ul { padding: 0 18px 9px; }
      #extra   { border-bottom: 1px solid #ccc; }
      #extra small { font-size: 11px; line-height: 18px; }
      #content  { }
      #content p, #extra p { padding-right: 18px; }

      /* Content Positioning & Size */
      #navigation  { float: left; margin-left: -742px; width: 175px; }
      #content  { margin: 0 215px 36px 215px; }
      #extra   { float: left; margin-left: -200px; width: 175px; }  

      /* Footer */
      #footer   { background: grey; border-bottom: 2px solid #999; clear: left; width: 100%; }
      #footer a  { color: #eee; }
      #footer p  { color: #ccc; margin: 0; padding: 0 18px 10px; }
      #footer ul  { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
      #footer li  { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }


    .center {
    text-align: center; }


    </style>


        </head>
        <body>

      <div id="container">

        <div id="header"> 

        <div class="center">
        <p><a href="index.html"><img  src="images/head.jpg"  alt="logo" width="100%" height="10%"/></a></p> 



      </div>

      <div id="wrapper">
       <div id="content">

        <h2>All About ABA Coach</h2>

        <p>ABA Coach is a company dedicated to working with individuals and families to provide training and behavior coaching. We have over twenty years of experience working of all levels of abilities. Our experience ranges from (ECI), public and private schools including college level work, independent corporations, and churches.</p>
        <p>ABA Coach  provides expert level functional behavior assessments, behavior intervention plans, IEP development and ARD process intervention, classroom consultations, and behavior intervention plans.</p>
        <p>ABA Coach administers presentations,consultations, hands on workshops, training for teachers, paraprofessionals, other professionals such as therapists, and siblings and family members.</p>
       </div>
      </div>
      <div id="navigation">
       <h2>Links</h2>
       <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="client.html">Client Log-in</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="forms.html">Online Forms</a></li>
        <li><a href="references.html">References</a></li>
        <li><a href="contact.html">Contact ABA Coach</a></li>
       </ul>
        <img src="images/beach.jpg" width="130" height="105" alt="" title="" border="0" align="" />   

      </div>

      <div id="extra">
       <h2>What We Can Accomplish</h2>

       <p>We can provide concrete data of the results of our work.</p>


       <p><small>Reports and data included:</small></p>

       <p><small><li>Detailed data and charts of specific goals and changes.</li></small></p>
       <p><small><li>Video evidence of changes.</li></small></p>
       <p><small><li> specific goals.</li></small></p>

      </div>
      <div id="footer">
       <ul>
        <li><a href="index.html">Home Page</a></li>
        <li><a href="client.html">Client Log-in</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="forms.html">Online Forms</a></li>
        <li><a href="references.html">References</a></li>
        <li><a href="contact.html">Contact ABA Coach</a></li>
       </ul>
       <p> Copyright 2011 :  : 




      </div>
     </div>
     <p><a href="#top">Back to Top</a></p>  
    </body>
    </html>

Answer 1

您对此行的期望是什么：

#container  { width: 760px; margin: 0 auto;}

要做什么？

Answer 2

width: 100%之类的语句会将该元素扩展到父元素的整个宽度。我想，使用body标签执行此操作会扩展主体以适应整个屏幕。

CSS网站帮助请

2 个答案: