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 閱讀(751) 評論(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
          謝謝。  回復  更多評論
            


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 固原市| 晋中市| 天台县| 抚州市| 德令哈市| 朝阳市| 方正县| 岳西县| 石阡县| 崇州市| 永顺县| 根河市| 玛沁县| 鄱阳县| 卓资县| 渭南市| 许昌县| 临夏县| 龙井市| 巴马| 肇东市| 安化县| 德令哈市| 渝中区| 甘泉县| 沧州市| 砀山县| 咸丰县| 台北县| 印江| 临城县| 体育| 财经| 陕西省| 车致| 墨竹工卡县| 临城县| 理塘县| 南丰县| 宜兰县| 衡阳市|