奇米在线,久草最新在线,成人免费观看视频高清视频

下面是CSS最常用和實(shí)用的技巧。?

1.重置瀏覽器的字體大小 ?
重置瀏覽器的默認(rèn)值，然后重設(shè)瀏覽器的字體大小你可以使用雅虎的用戶界面重置的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
            
            ;?}??

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

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

這個大小基本合適，然后您可以根據(jù)自己的需要調(diào)整大小，如標(biāo)題1為120像素:?

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

2.設(shè)置水平居中 ?
大多數(shù)的網(wǎng)站目前都是固定寬度的。CSS代碼如下：?

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

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

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

div有l(wèi)eft和top屬性,是用來定位的.?
如果內(nèi)層的div的position屬性是absolute.那他就是相對于文檔的左上角的位置..?
如果內(nèi)層的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屬性設(shè)為他們的一半，這樣就可以是這個部分回到屏幕的中心。?

5.可以重復(fù)利用的規(guī)則 ?

          
     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;}??

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

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

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

7.簡單的導(dǎo)航菜單 ?
在您的設(shè)計(jì)中預(yù)設(shè)一個導(dǎo)航欄是非常有益的。可以讓別人對你網(wǎng)頁的主要內(nèi)容有一個大致的了解。第一次來的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表單 ?
正如我們現(xiàn)在進(jìn)行網(wǎng)站設(shè)計(jì)的table-free，把重點(diǎn)是放在使用DIVs上。不再對表的列和域進(jìn)行約束，所以我們需要一些好用的CSS，在 JeddHowden.com? 發(fā)現(xiàn)?

          
     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總是停留在頁面的底部 ?
在網(wǎng)頁的底部總是保留著公司的版本信息，如何是這部分信息來實(shí)現(xiàn)呢？這是一個很古老的技術(shù)，這都要?dú)w功于 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.在同一元素上使用多種類 ?
隨著有用的功能越來越多的，大多數(shù)的人都忽略了內(nèi)部CSS的選擇。一個元素可以套用很多的類，例如：?

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

我們可以運(yùn)用它：?

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

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

最常用和實(shí)用的CSS技巧

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

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

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

2元

5元

10元

20元

自定義