亚洲熟女一区二区三区,国产成人一区二区在线不卡,国产∨亚洲v天堂无码久久久

下面是CSS最常用和實用的技巧。?

1.重置瀏覽器的字體大小 ?
重置瀏覽器的默認值，然后重設瀏覽器的字體大小你可以使用雅虎的用戶界面重置的CSS方案，如果你不想下載9MB的文件，代碼如下：?

          
     Java代碼? 
   
            body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,??
          
            blockquote,th,td?{margin:
            
              0
            
            ;?padding:
            
              0
            
            ;?}??
          
            table?{?border-collapse:collapse;?border-spacing:
            
              0
            
            ;?}??
          
            fieldset,img?{?border:
            
              0
            
            ;?}??
          
            address,caption,cite,code,dfn,em,strong,th,var?{?font-style:normal;?font-weight:normal;?}??
          
            ol,ul?{?list-style:none;?}??
          
            caption,th?{?text-align:left;?}??
          
            h1,h2,h3,h4,h5,h6?{?font-size:
            
              100
            
            %;?font-weight:normal;?}??
          
            q:before,q:after?{?content:”;?}??
          
            abbr,acronym?{?border:
            
              0
            
            ;?}??

其次，我們重設瀏覽器字體的大小為10像素，使用如下：?

          
     Java代碼? 
   
            html?{font-size:?
            
              62.5
            
            %;}??

這個大小基本合適，然后您可以根據自己的需要調整大小，如標題1為120像素:?

          
     Java代碼? 
   
            h1?{font-size:?2em;}??

2.設置水平居中 ?
大多數的網站目前都是固定寬度的。CSS代碼如下：?

          
     Java代碼? 
   
            div#container?{margin:?
            
              0
            
            ?auto;}??

3.控制位置：絕對位置，相對位置 ?
假如有兩個div?

          
     Java代碼? 
   
            <div?id=
            
              'parent'
            
            >??
          
            <div?id=
            
              'son'
            
            ></div>??
          
            </div>??

div有left和top屬性,是用來定位的.?
如果內層的div的position屬性是absolute.那他就是相對于文檔的左上角的位置..?
如果內層的div(id為son的那個)position屬性為relative,那它的left和top值就是相對于外層的div的左上角的距離.?

4.將重要元素放置在屏幕中央 ?
如果你希望將您想要的東西放在最中央，可以使用以下CSS：?

          
     Java代碼? 
   
            div.popup?{?height:400px;?width:500px;?position:?absolute;?top:?
            
              50
            
            %;?left:?
            
              50
            
            %;}??
          
            div.popup?{?margin-top:?-200px;?margin-left:?-250px;}??

您必須明確的指定寬度和高度，再把top和left屬性設為他們的一半，這樣就可以是這個部分回到屏幕的中心。?

5.可以重復利用的規則 ?

          
     Java代碼? 
   
            .left?{
            
              float
            
            :?left;}??
          
            .right?{
            
              float
            
            :?right;}??
          
            img?.left?{?border:2px?solid?#aaaaaa;?margin:?
            
              0
            
            ?10px?
            
              0
            
            ?
            
              0
            
            ;}??
          
            img?.right?{?border:2px?solid?#aaaaaa;?margin:?
            
              0
            
            ?
            
              0
            
            ?
            
              0
            
            ?10px;?padding:?1px;}??

設置自己的CSS樣式表，就可以在您需要的時候直接的添加標記即可。?
?

6. 解決IE6 的浮動元素的雙倍邊距問題 ?
對一個div設置了float:left 和 margin-left:100px 那么在IE6中，這個bug就會出現。您只需要多設置一個display即可，代碼如下：?

          
     Java代碼? 
   
            div?{
            
              float
            
            :left;margin:40px;display:inline;}??

7.簡單的導航菜單 ?
在您的設計中預設一個導航欄是非常有益的。可以讓別人對你網頁的主要內容有一個大致的了解。第一次來的XHTML：?

          
     Java代碼? 
   
            <div?id=”navbar”>??
          
            <ul>??
          
            <li><a?href=”http:
            
              //www.peakflowdesign.com”>Peakflow?Design</a></li>
            
            ??
          
            <li><a?href=”http:
            
              //www.google.com”">Google</a></li>
            
            ??
          
            <li><a?href=”http:
            
              //zenhabits.net/”>Zen?Habits</a></li>
            
            ??
          
            </ul>??
          
            </div>??

CSS代碼：?

          
     Java代碼? 
   
            #navbar?ul?li?{display:inline;margin:
            
              0
            
            ?10px?
            
              0
            
            ?
            
              0
            
            ;}??
          
            #navbar?ul?li?a?{color:?#
            
              333
            
            ;display:block;
            
              float
            
            :left;padding:5px;}??
          
            #navbar?ul?li?a:hover?{background:#eee;color:black;}??

??
8.不使用table的form表單 ?
正如我們現在進行網站設計的table-free，把重點是放在使用DIVs上。不再對表的列和域進行約束，所以我們需要一些好用的CSS，在 JeddHowden.com? 發現?

          
     Java代碼? 
   
            XHTML:??
          
            <form?action=”form.php”?method=”post”>??
          
            <fieldset>??
          
            <legend>Personal?Information</legend>??
          
            <div>??
          
            <label?
            
              for
            
            =”first_name”>First?Name:</label>??
          
            <input?type=”text”?name=”first_name”?id=”first_name”?size=”
            
              10
            
            ″?value=”"?/>??
          
            </div>??
          
            <div>??
          
            <label?
            
              for
            
            =”last_name”>Last?Name:</label>??
          
            <input?type=”text”?name=”last_name”?id=”last_name”?size=”
            
              10
            
            ″?value=”"?/>??
          
            </div>??
          
            <div>??
          
            <label?
            
              for
            
            =”postal”>Zip/Postal?Code:</label>??
          
            <input?type=”text”?name=”postal”?id=”postal”?size=”
            
              10
            
            ″?value=”"?/>??
          
            </div>??
          
            </fieldset>??
          
            </form>??

          
     Java代碼? 
   
            CSS:??
          
            form?div?{clear:left;display:block;width:400px;zoom:
            
              1
            
            ;margin:5px?
            
              0
            
            ?
            
              0
            
            ?
            
              0
            
            ;padding:1px?3px;}??
          
            form?div?label?{display:block;
            
              float
            
            :left;width:130px;padding:3px?5px;margin:?
            
              0
            
            ?
            
              0
            
            ?5px?
            
              0
            
            ;text-align:right;}??

9.讓footer總是停留在頁面的底部 ?
在網頁的底部總是保留著公司的版本信息，如何是這部分信息來實現呢？這是一個很古老的技術，這都要歸功于 The Man in Blue ?。?

          
     Java代碼? 
   
            XHTML：??
          
            <body>??
          
            <div?id=”nonFooter”>??
          
            <div?id=”content”>?*Place?all?page?content?here*?</div>??
          
            </div>??
          
            <div?id=”footer”>?*Place?anything?you?want?in?your?footer?here*??
          
            </div>??
          
            </body>??

          
     Java代碼? 
   
            CSS:??
          
            html,?body?{?height:?
            
              100
            
            %;?}??
          
            #nonFooter?{?position:?relative;?min-height:?
            
              100
            
            %;?}??
          
            *?html?#nonFooter?{?height:?
            
              100
            
            %;?}??
          
            #content?{?padding-bottom:?9em;?}??
          
            #footer?{?position:?relative;?margin-top:?-
            
              7
            
            .5em;?}??

10.在同一元素上使用多種類 ?
隨著有用的功能越來越多的，大多數的人都忽略了內部CSS的選擇。一個元素可以套用很多的類，例如：?

          
     Java代碼? 
   
            .red?{color:?red;}??
          
            .bold?{font-weight:?strong;}??

我們可以運用它：?

          
     Java代碼? 
   
            <p?
            
              class
            
            =”red?bold”>This?text?will?be?red?yet?also?bold!</p>??

希望這些能對您有所幫助！?

最常用和實用的CSS技巧

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频