Ένας πολύ απλός τρόπος για να περιστρέψετε τα στοιχεία μιας σελίδας ιστότοπου - απλώς εφαρμόστε μερικά στυλ CSS. Η εξοικείωση με αυτό το μάθημα θα σας επιτρέψει να τοποθετήσετε έναν ξεδιπλωμένο ανεμιστήρα καρτών, διάσπαρτα πεσμένα φύλλα ή κομψές φωτογραφίες σε ένα άλμπουμ στη σελίδα. Το μάθημα περιέχει ένα παράδειγμα υλοποίησης ενός άλμπουμ φωτογραφιών και λαμβάνει υπόψη τη λύση για όλα τα σύγχρονα προγράμματα περιήγησης.
Είναι απαραίτητο
Τέσσερις φωτογραφίες πλάτους έως 450 εικονοστοιχείων
Οδηγίες
Βήμα 1
Αυτό το παράδειγμα θα επικεντρωθεί στη δημιουργία μιας κομψής σελίδας άλμπουμ με περιστρεφόμενες φωτογραφίες.
Προετοίμασα εκ των προτέρων εικόνες (πλάτος 400 εικονοστοιχεία) με διευθύνσεις:
Στο μέλλον, θα εκχωρήσουμε αναγνωριστικά σε εικόνες σύμφωνα με το όνομά τους.
Βήμα 2
Αρχικά, θα προετοιμάσουμε ένα μπλοκ για το άλμπουμ φωτογραφιών μας χρησιμοποιώντας την ετικέτα div και θα προσθέσουμε επίσης φωτογραφίες σε αυτό χρησιμοποιώντας την ετικέτα img (κάθε εικόνα πρέπει να περικλείεται στη δική της ετικέτα div), όπως αυτή:
Λάβετε υπόψη ότι έχουμε εκχωρήσει ένα αναγνωριστικό στο μπλοκ -. Με το αναγνωριστικό, μπορούμε να αναφερθούμε στο μπλοκ χρησιμοποιώντας css.
Βήμα 3
Στη συνέχεια, πρέπει να ορίσετε τα στυλ css στο μπλοκ. Λίστα στυλ: "position: relatif;" - θα ορίσει την προέλευση από την επάνω αριστερή γωνία του μπλοκ μας. "margin: 50px auto;" - θα ρυθμίσει την εσοχή του μπλοκ μας "50px" πάνω και κάτω από το υπόλοιπο περιεχόμενο της σελίδας, καθώς και να ρυθμίσει την αυτόματη εσοχή προς τα δεξιά και τα αριστερά, ευθυγραμμίζοντας έτσι το μπλοκ μας στο κέντρο. "πλάτος: 900 εικονοστοιχεία, ύψος: 650 εικονοστοιχεία;" - θα ρυθμίσει το πλάτος στα 900 εικονοστοιχεία και το ύψος στα 650 εικονοστοιχεία, αντίστοιχα.
Η καθορισμένη λίστα στυλ πρέπει να τοποθετηθεί με αυτόν τον τρόπο:
# φωτογραφία_σελίδα {
θέση: σχετική
περιθώριο: 0 αυτόματη;
πλάτος: 900px;
ύψος: 650 εικονοστοιχεία;
text-align: center;
}
Σημειώστε τη χρήση του "#photo_page" - έτσι αναφερόμαστε στο αναγνωριστικό αποκλεισμού.
Βήμα 4
Τώρα θα εκχωρήσουμε γενικά στυλ για κάθε εικόνα μέσα στο μπλοκ φωτογραφιών_ σελίδων. Αυτές είναι στρογγυλεμένες γωνίες, γκρι περίγραμμα, λευκό φόντο, επένδυση και σκιά.
Αυτό θα δημιουργήσει ένα φωτογραφικό εφέ:
#photo_page img {
ακτίνα περιγράμματος: 7 εικονοστοιχεία;
περίγραμμα: 1px συμπαγές γκρι.
φόντο: #ffffff;
επένδυση: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Σημειώστε τη χρήση του "#photo_page img" - αυτό θα αναφέρεται σε όλες τις εικόνες μέσα στο μπλοκ photo_page
Βήμα 5
Είναι επίσης σημαντικό να προσθέσετε ένα σύντομο στυλ όπως αυτό:
#photo_page div {
float: αριστερά;
}
Συρρικνώνει όλα τα μπλοκ μέσα στο μπλοκ photo_page προς τα αριστερά.
Βήμα 6
Το ενδιάμεσο στάδιο του μαθήματος έχει πλέον ολοκληρωθεί. Εάν η εργασία σας είναι παρόμοια με την εικόνα στο στιγμιότυπο οθόνης, τότε δεν έχετε κάνει λάθος και μπορείτε να προχωρήσετε στο επόμενο βήμα.
Βήμα 7
Τώρα γυρίζουμε για να περιστρέψουμε τις δημοσιευμένες φωτογραφίες. Για αυτό χρειαζόμαστε το στυλ μετασχηματισμού. Προς το παρόν, στην καθαρή του μορφή, δεν χρησιμοποιείται, αλλά μόνο με πρόθεμα για κάθε πρόγραμμα περιήγησης στην αρχή, όπως αυτό:
-webkit-transform: περιστροφή (τιμή);
-moz-transform: περιστροφή (τιμή);
-o-transform: περιστροφή (τιμή);
Αυτό είναι το στυλ περιστροφής για προγράμματα περιήγησης: Google Chrome, Mazilla, Opera (αντίστοιχα). Αντί για τη λέξη "τιμή", θα εισάγουμε έναν αριθμό με deg στο τέλος, ως εξής:
90deg - περιστροφή 90 μοίρες δεξιόστροφα.
-5deg - περιστροφή -5 μοίρες αριστερόστροφα.
Και τα λοιπά.
Βήμα 8
Στυλ για φωτογραφία photo_1:
# φωτογραφία_1 {
-webkit-transform: περιστροφή (5deg);
-moz-transform: περιστροφή (5deg);
-o-transform: περιστροφή (5deg);
}
Η πρώτη εικόνα περιστρέφεται 5 μοίρες.
Βήμα 9
Στυλ για φωτογραφία photo_2:
# φωτογραφία_2 {
-webkit-transform: περιστροφή (-3deg);
-moz-transform: περιστροφή (-3deg);
-o-transform: περιστροφή (-3deg);
}
Η δεύτερη εικόνα περιστρέφεται -3 μοίρες.
Βήμα 10
Στυλ για φωτογραφία photo_3:
# φωτογραφία_3 {
-webkit-transform: περιστροφή (-2deg);
-moz-transform: περιστροφή (-2deg);
-o-transform: περιστροφή (-2deg);
}
Η τρίτη εικόνα περιστρέφεται -2 μοίρες.
Βήμα 11
Στυλ για φωτογραφία photo_4:
# φωτογραφία_4 {
-webkit-transform: περιστροφή (8deg).
-moz-transform: περιστροφή (8deg);
-o-transform: περιστροφή (8deg);
}
Η τέταρτη εικόνα περιστρέφεται 8 μοίρες.
Βήμα 12
Ας δούμε πώς μπορείτε να διορθώσετε τη θέση των εικόνων. Για παράδειγμα, θέλετε να αντισταθμίσετε την πρώτη εικόνα 20 εικονοστοιχεία από πάνω και 10 εικονοστοιχεία από τα αριστερά. Σε αυτήν την περίπτωση, πρέπει να χρησιμοποιήσετε το στυλ περιθωρίου. Εδώ είναι ο σωστός τρόπος να το χρησιμοποιήσετε για την περίπτωσή μας:
# φωτογραφία_1 {
περιθώριο: 20px -10px -20px 10px;
-webkit-transform: περιστροφή (5deg);
-moz-transform: περιστροφή (5deg);
-o-transform: περιστροφή (5deg);
}
Λάβετε υπόψη ότι η πρώτη τιμή του στυλ είναι το ανώτερο περιθώριο. το δεύτερο είναι η εσοχή προς τα δεξιά. το τρίτο είναι μια εσοχή από το κάτω μέρος. τέταρτη - αριστερή εσοχή.
Σημαντικό: στην περίπτωσή μας, το κάτω περιθώριο ισούται με την αρνητική τιμή του άνω περιθωρίου. Εάν βλέπετε κενό διάστημα κάτω από την εικόνα στη σελίδα σας, προσπαθήστε να χαράξετε το κάτω μέρος της εικόνας ακόμα πιο αρνητικά.
Βήμα 13
Η εργασία έχει ολοκληρωθεί, παρέχω ένα στιγμιότυπο οθόνης (λαμβάνοντας υπόψη την αλλαγή στην εσοχή της πρώτης εικόνας που περιγράφεται στο Βήμα 12).
Προσθέστε στυλ εσοχής σε εικόνες που δεν είναι κατάλληλες για εσάς.
