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
          謝謝。  回復  更多評論
            


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


          網站導航:
           
          主站蜘蛛池模板: 襄樊市| 晋城| 县级市| 淮阳县| 盘锦市| 鹤岗市| 临夏县| 屏边| 铁力市| 富裕县| 太谷县| 大城县| 新源县| 大方县| 吉安县| 民县| 历史| 临桂县| 临安市| 筠连县| 友谊县| 安陆市| 迁安市| 青田县| 康定县| 安新县| 阳信县| 合川市| 香港| 长顺县| 清徐县| 南靖县| 平舆县| 镇巴县| 阿合奇县| 色达县| 扶绥县| 招远市| 定襄县| 万荣县| 会东县|