成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

RichardXG / 3388人閱讀

摘要：本文章專門學(xué)習(xí)先上總結(jié)偽元素可以隨便用，因?yàn)樗桓蓴_正常的頁面元素。之前一直傻傻分不清什么是偽元素，什么是偽類。偽元素也有樣式很搞笑的是，偽元素雖然很偽，但是卻可以正常的設(shè)置樣式背景文本大小，丫的頁面上卻什么都看不出。

本文章專門學(xué)習(xí)：after before

先上總結(jié)：

偽元素可以隨便用，因?yàn)樗桓蓴_正常的頁面元素。

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

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

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

偽元素 :after,:before

偽類 :hover :active

參考資料

到底什么是偽元素

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

簡單用法


:before
 This the main content.
:after

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

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

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

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;
}
問題是：它能干嘛？ 關(guān)聯(lián)背景圖片 

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;
}
結(jié)合偽類

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

當(dāng)然這里面需要一個重要的CSS3屬性：box-shadow


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

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78589.html

               

                      
               
              

              

                
相關(guān)文章

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

作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。
? ?????偽類和...
    
                                                   
                          
    
                                
    
                                    entner
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    談?wù)刢ss偽類與偽元素
    
                                                     
    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類，雙冒號用于偽元素?？梢酝ㄟ^對父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€子元素。

css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
    
                                                   
                          
    
                                
    
                                    Berwin
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    談?wù)刢ss偽類與偽元素
    
                                                     
    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€子元素。

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

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<