代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: cf阿拉维斯如何钻bug > 站長學院 > 建站教程 >

阿拉维斯西甲排名:CSS清除浮動的方法與CSS選擇器

來源:未知 發布時間:2019-03-30熱度: ℃我要評論
DIV+CSS是網站建設的主要設計形式,掌握并不難,達到同樣效果,代碼寫得越少越好,這完全是靠個人敲代碼敲出來經驗。重慶SEO前面寫過一篇骨灰級極簡主義代碼優化,簡單介紹了極簡代碼的基本設計要素。下面舉例最少的代碼實現清除浮動,最常用的是主導航。給出兩種清除...

cf阿拉维斯如何钻bug www.rxtxrm.com.cn 織夢模板免費下載,無需注冊無需充值

       DIV+CSS是網站建設的主要設計形式,掌握并不難,達到同樣效果,代碼寫得越少越好,這完全是靠個人敲代碼敲出來經驗。秀站網前面寫過一篇骨灰級極簡主義代碼優化,簡單介紹了極簡代碼的基本設計要素。下面舉例最少的代碼實現清除浮動,最常用的是主導航。給出兩種清除浮動形式如下:

<style>
 .clear{clear:both;display:block;width:0;height:0;margin:0;border:0}
 .clearfix:after{clear:both;display:block;content:"\20"}
.fl{float:left}
.fr{float:right}
nav ul li{float:left;}
nav ul li a{padding:0 10px;line-height:40px;font-size:14px;color:#555}
nav ul li a:hover{color:#c00}
</style>
<header class="clearfix" id="top"><!--清除浮動形式1-->
 <img src="images/logo.png" alt="網站logo" class="fl"/>
 <nav class="fr">
  <ul class="menu">
   <li><a href="#">欄目1</a></li>
   <li><a href="#">欄目2</a></li>
   <li><a href="#">欄目3</a></li>
   <p class="clear"></p><!--清除浮動形式2-->
  </ul>
 </nav>
</header>

       第一種用到的是偽類選擇器 :after,意思是:在被選元素的內容后面插入內容,一般格式:

.clearfix:after{clear:both;display:block;content:"內容;}

       另一種對應的是:before,意思是:在被選元素的內容前面插入內容。格式和 :after一樣,IE6、IE7不支持。

必須掌握的其他CSS選擇器

* :通用選擇器(IE6+,Firefox,Chrome,Safari,Opera)

       選擇的是全部元素,在做兼容性、字體時非常好用。

*{margin:0;padding:0;font-family:"Microsoft Yahei"}

       用于子選擇器,下面是id為main下的所有元素都添加了font-size:14px。

#main *{font-size:14px}

#id:id選擇器(IE6+,Firefox,Chrome,Safari,Opera)

#top{background:#eee}

.class:類選擇器(IE6+,Firefox,Chrome,Safari,Opera)

.clear{clear:both}

x y:默認標簽選擇器(IE6+,Firefox,Chrome,Safari,Opera)

ul li{float:left}
ul li a{color:#c00}

       如果是類選擇器結合默認標簽可以這樣寫

.menu a{display:block}

x:visited,x:link,x:hover:偽類選擇器(IE7+,Firefox,Chrome,Safari,Opera)

a:link{color:#c00;}
a:visited{color:#555}
a:hover{decoration:underline}/*在IE6下,只能用于a標簽*/

x + y :毗鄰元素選擇器(IE7+,Firefox,Chrome,Safari,Opera)

ul + p{color:#c00}

x > y:子元素選擇器(IE7+,Firefox,Chrome,Safari,Opera)

#top > ul li{border:1px solid #eee}

       用在欄目下的子欄目的例子,這選擇器影響到的是欄目1的<li>標簽,而影響不到該欄目下的子欄目的<li>標簽,如果樣式寫成

#top ul li{border:1px solid #eee}

       則影響到#top下的全部<li>標簽。

<header id="top">
 <ul>
  <li>
   <a href="#">欄目1</a>
   <ul>
    <li><a href="#">子欄目1</a></li>
    <li><a href="#">子欄目2</a></li>
   </ul>
  </li>
 </ul>
</header>

x:nth-child(n),x:nth-last-child(n):匹配元素中從頭數第幾個標簽,后面是倒序匹配(IE9+,Firefox 3.5,Chrome,Safari,Opera)

li:nth-child(3){color:#c00}/*匹配的是第三個li標簽*/
li:nth-last-child(3){color:#c00}/*匹配的是倒數第三個li標簽*/

       以上是最常用的選擇器,其他選擇器幾乎用不到,感興趣的可以網上自己搜一下。

本文地址://www.rxtxrm.com.cn/news/1381.html

    發表評論

    評論列表(條)