国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

偽元素(before after)的正確理解方式

RichardXG / 3349人閱讀

摘要：本文章專門學習先上總結偽元素可以隨便用，因為它不干擾正常的頁面元素。之前一直傻傻分不清什么是偽元素，什么是偽類。偽元素也有樣式很搞笑的是，偽元素雖然很偽，但是卻可以正常的設置樣式背景文本大小，丫的頁面上卻什么都看不出。

本文章專門學習：after before

先上總結：

偽元素可以隨便用，因為它不干擾正常的頁面元素。

偽元素主要是用來實現一些華麗叼炸天的顯示效果，而不是頁面布局，當然 after+content 可以清除頁面浮動.

感覺偽元素的用途其實比較的成熟或者固定，創新的用法通常正常人很難想出來，個人覺得只需要熟悉那些情景可以用，怎么用就可以。

之前一直傻傻分不清什么是偽元素，什么是偽類。

偽元素 :after,:before

偽類 :hover :active

參考資料

到底什么是偽元素

1.他們是假的元素，不存在的元素，更不是隱藏的元素
2.偽元素將會在內容元素的前后插入額外的元素，因此當我們添加它們時，使用以下的標記方式，他們在技術上是平等的。

簡單用法


:before
 This the main content.
:after

在引用的之前和之后分別添加添加一個引號。

blockquote:before {
 content: open-quote;
}
blockquote:after {
 content: close-quote;
}
偽元素也有樣式

很搞笑的是，偽元素雖然很偽，但是卻可以正常的設置樣式（背景、文本大小），丫的頁面上卻什么都看不出。

blockquote:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: left;
 position: relative;
 top: 30px;
 
}
blockquote:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: right;
 position: relative;
 bottom: 40px;
}
問題是：它能干嘛？ 關聯背景圖片 

blockquote:before {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -3px -3px #ffffd;
 
 display: block;
 height: 25px;
 width: 25px;
}
blockquote:after {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -1px -32px #ffffd;
 
 display: block;
 height: 25px;
 width: 25px;
}
結合偽類

blockquote:hover:after, blockquote:hover:before {
 background-color: #555;
}

添加過渡效果

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

三個酷到爆炸的DEMO

當然這里面需要一個重要的CSS3屬性：box-shadow


CSS Box Shadow Effects - Demo
Image Stack Illusion
3D button
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78589.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    CSS（一）偽元素的巧用
    
                                                     
    摘要：并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。

作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。
? ?????偽類和...
    
                                                   
                          
    
                                
    
                                    entner
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    談談css偽類與偽元素
    
                                                     
    摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。

css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
    
                                                   
                          
    
                                
    
                                    Berwin
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    談談css偽類與偽元素
    
                                                     
    摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。

css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
    
                                                   
                          
    
                                
    
                                    hedzr
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<