Πριν από λίγες ημέρες είχα την εφαρμογή εικόνας λειτουργία μετακίνησης σε ένα δικτυακό τόπο δουλεύω. Οι περισσότερες από τις ιστοσελίδες χαρτοφυλακίου χρησιμοποιούν εικόνας λειτουργία μετακίνησης. Σε αυτό το σεμινάριο θα σας μάθουν πώς να δημιουργήσετε μια απλή εικόνα Css λειτουργία μετακίνησης. Είμαι χρησιμοποιώντας μόνο μια απλή γραφική. Τα υπόλοιπα είναι βασικό στυλ CSS, με απλό κώδικα HTML.

Αυτό Στρογγυλοποιημένα ιδιοκτησία των συνόρων δεν υποστηρίζεται από το IE. Προβολή Demo

ενημερώστε μας τις σκέψεις σας; Εάν βρήκατε οποιαδήποτε άλλη σεμινάρια που θέλετε να μοιραστείτε μαζί μας, μπορείτε να μας ενημερώσετε με τη ρίψη σε ένα σχόλιο.

Παράδειγμα:

Βήμα # 1 Css Δομή

πρώτα έχουμε δημιουργήσει μια απλή Css κωδικός

  ; margin : 0 ; } * (Padding: 0? Περιθώριο: 0?)
 % normal Arial, Helvetica, sans-serif ; } σώματος (font: 100% κανονικό Arial, Helvetica, sans-serif?) 


 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (πλάτος: 280px? ύψος: 150px? background-image: url (γη. jpg)? υπόβαθρο-θέση: πάνω?-moz-border-radius: 10px?-webkit-border-radius: 10px? border: 10px solid # CCC? γραμματοσειρά: 13px κανονικό Arial, Helvetica, sans-serif? line-height: 18px? float: αριστερά? margin: 0 10px 10px 0?) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img a (color: # fff? πλάτος: 280px? ύψος: 150px? απεικόνιση: block? text-decoration: Δεν υπάρχει?) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: hover (background: # 000? αδιαφάνεια:. 60? φίλτρο: alpha (opacity = 60)?) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img ένα χρονικό (απεικόνιση: Δεν υφίσταται? πλάτος: 280px? padding: 5px?) 
  span { display : block ; } . rollover_img a: hover span (display: block?) 

Βήμα # 2 Html Δομή

Τώρα έχουμε δημιουργήσει μια απλή HTML κώδικα

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class = "rollover_img"> τίτλος <a = "Ace India" Infoway href = "http://blog.aceinfowayindia.com"> <span> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Sed condimentum.  Σε volutpat.  Vestibulum elit.  Aenean eget vitae enim tellus bibendum pellentesque.  Sed στις εκτιμήσεις Παράδειγμα Κείμενο, Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit. </ Font> </ a> </ p> 

Προβολή Demo

Ακολουθήστε μας σε έξαψη, ή εγγραφείτε στο Developers Παράδεισος + RSS Feed για την καλύτερη tutorials ανάπτυξης ιστοσελίδων στο διαδίκτυο.

Filed under: Css, Tutorials από admin