Bu, eğitimde i nasıl javascript'in Bu çok basit ve etkili bir teknik kullanmadan CSS Araç yaratacağınızı göstereceğim. Seni bu yazı zevk umuyoruz.

İşte bir ekran görüntüsü

Adım: 1 Temel Css Kod

  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } body (font: 100%, normal Arial, Helvetica, sans-serif;) 
  : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } P (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) 
   margin : 0 auto ; width : 550px ; } # sayfa (margin: 0 otomatik; width: 550px;) 

Burada sihirli kodu

  : #F00 ; font-size : 12px ; } a :hover { background : #fff ; /*background color for IE*/ text-decoration :none ; } a .tooltip span { display :none ;         padding : 5px 5px ;         margin-left : 3px ;         margin-top : 10px ;       width : 170px ;         font-size : 12px ;         line-height : 150 %; } a .tooltip :hover span { display :inline ;         position :absolute ; background : #F20F27 ;         border : 1px solid #C30018 ; color : #fff ; } a (color: # F00; font-size: 12px;) a: (background: # fff; / IE * / text-decoration için * arka plan rengi: none;) bir. Araç aralığı sallanmak (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) bir. Araç: duraksamak aralığı (display: inline; konum: mutlak; background: # F20F27; border: 1px solid # C30018; color: # fff;) 

Adım: 2 Temel Yapısı

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div = "page"> <p> Lorem ipsum dolor amet, consectetur adipiscing elit oturup kimliği.  Ut viverra DUI NEC Risus Otel.  Bir tortor lacinia rhoncus AB Neque olarak.  Interdum yılında Lorem ipsum dolor amet, consectetur adipiscing elit otur.  Ut viverra DUI NEC Risus Otel. </ SPAN> </ a> Lorem ipsum dolor amet, consectetur adipiscing elit otur.  Suspendisse potenti.Lorem ipsum keder, </ p> <p> Lorem ipsum dolor amet, consectetur adipiscing elit amet otur otur.  Ut viverra DUI NEC Risus Otel.  Bir tortor lacinia rhoncus AB Neque olarak.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum <a href = olarak "#" class = "tooltip"> placerat <span> Lorem ipsum dolor, consectetur adipiscing elit amet otur.  Ut viverra DUI NEC Risus Otel. </ SPAN> </ a> Lorem ipsum dolor amet, consectetur adipiscing elit otur.  Suspendisse potenti.Lorem ipsum keder, </ p> <p> Lorem ipsum dolor amet, consectetur adipiscing elit amet otur otur.  Ut viverra DUI NEC Risus Otel.  Bir tortor lacinia rhoncus AB Neque olarak.  Interdum yılında Lorem ipsum dolor amet, consectetur adipiscing elit otur.  Ut viverra DUI NEC Risus Otel. </ SPAN> </ a> Lorem ipsum dolor amet, consectetur adipiscing elit otur.  Suspendisse potenti.Lorem ipsum keder, </ p> </ div> amet oturmak 

Sonunda üç sütun CSS düzeni yarattık.
İndir | Görüntüle Demosu

Lütfen bizimle yorumlarınızı paylaşmak, sizi dinlemekten memnuniyet duyarız ...

Filed under: Css, admin Eğiticileri