Γεια σε όλους! Σήμερα θα σας πω πώς να φτιάξετε μια οριζόντια γραμμή χρησιμοποιώντας html.

Στην πραγματικότητα, η ανάγκη δημιουργίας μιας οριζόντιας γραμμής προκύπτει αρκετά συχνά, για παράδειγμα, όταν χρειάζεται να διαχωρίσετε ένα μέρος του κειμένου από το άλλο.

οριζόντιες και κάθετες γραμμές με css

Μπορείτε να το κάνετε αυτό με το css. Για να γίνει αυτό, περικλείω το απαραίτητο τμήμα κειμένου σε ένα μπλοκ χρησιμοποιώντας την ετικέτα div και, στη συνέχεια, στο αρχείο style.css ή απευθείας στον κώδικα html, ορίζουμε ιδιότητες για αυτό το μπλοκ για το επάνω ή το κάτω περίγραμμα χρησιμοποιώντας το περίγραμμα-top και σύνορα-κάτω. Εδώ είναι ένα παράδειγμα:

Σε αυτήν την περίπτωση, το διαμόρφωσα με css απευθείας από τον κώδικα html και έκανα το πάνω περίγραμμα μια συμπαγή γραμμή και το κάτω περίγραμμα μια διακεκομμένη γραμμή.

Δείτε πώς θα φαίνεται στη σελίδα:

Οριζόντια γραμμή με css.

Αυτή η μέθοδος έχει τα πλεονεκτήματά της:

• Ένα ευρύ φάσμα ρυθμίσεων που σας επιτρέπουν να ορίσετε σχεδόν κάθε τύπο γραμμής.
• Μπορείτε να δημιουργήσετε τόσο οριζόντιες όσο και κάθετες γραμμές. Για να δημιουργήσετε κάθετες γραμμές, πρέπει να αλλάξετε το περίγραμμα-top σε περίγραμμα-αριστερά και περίγραμμα-κάτω σε περίγραμμα-δεξιά.

Τα μειονεκτήματα περιλαμβάνουν τον σχετικό όγκο του κώδικα.

Ωστόσο, όπως αποδείχθηκε, μπορείτε να εισαγάγετε μια οριζόντια γραμμή στο κείμενο χρησιμοποιώντας html. Ταυτόχρονα, δεν είναι καν απαραίτητο να σκαρφαλώσετε στο css. Η ετικέτα χρησιμοποιείται για αυτό.

---

.

οριζόντια γραμμή με ετικέτα html

---

Το πρώτο χαρακτηριστικό αυτής της ετικέτας είναι ότι δεν έχει ζευγοποιημένη τελική ετικέτα. Μπορεί να χρησιμοποιηθεί οπουδήποτε στον κώδικα html μεταξύ ετικετών και.

Αυτή η ετικέτα έχει τα ακόλουθα χαρακτηριστικά:

• Πλάτος- ορίζει το μήκος της οριζόντιας γραμμής μας σε pixel ή ποσοστά.
• χρώμα– καθορίζει το χρώμα της γραμμής.
• Ευθυγραμμίζω– ορίζει την ευθυγράμμιση της γραμμής στη δεξιά άκρη - δεξιά, στην αριστερή άκρη - αριστερά, στο κέντρο - κέντρο.
• Μέγεθος– πάχος γραμμής σε pixel.

Εδώ παράδειγμα html- κωδικός:

---

Και κάπως έτσι θα μοιάζει:

Όπως μπορείτε να δείτε, στο αυτή τη μέθοδοέχει τα μειονεκτήματά του:

• Λιγότερες ρυθμίσεις για τη γραμμή.
• Δεν μπορείς να κάνεις κάθετη γραμμή.

Αλλά αυτός ο τρόπος είναι πολύ πιο εύκολος.

Τώρα ξέρετε ακριβώς πώς να κάνετε κάθετες και οριζόντιες γραμμές στον ιστότοπό σας. Μπορείτε να κάνετε τις ερωτήσεις σας στα σχόλια. Και μην ξεχάσετε να εγγραφείτε

Στο άρθρο, θα μάθετε για τη δημιουργία μιας κάθετης γραμμής, η οποία μπορεί να γίνει χρησιμοποιώντας HTML και CSS, όπου θα προσθέσουμε μια επιλογή κειμένου σε αυτήν. Για να δημιουργήσετε μια γραμμή, υπάρχουν πολλές μέθοδοι με τις οποίες μπορείτε να την εμφανίσετε. Αλλά εδώ πρέπει να γνωρίζετε ότι δεν μπορούν όλα τα προγράμματα περιήγησης να το εμφανίσουν σωστά, επομένως θα επιλέξουμε τον απλούστερο και πιο κατανοητό τρόπο, όπου θα προβάλλεται οπτικά η κάθετη γραμμή.

Επίσης εδώ θα προσθέσουμε αμέσως κείμενο σε αυτό για να μπορεί να επιλεγεί λέξεις-κλειδιάή κατηγορίες που υπάρχουν στον ιστότοπο και σίγουρα θα πρέπει να ξεχωρίζουν από την κύρια περιγραφή στο σχεδιασμό τους. Έτσι, για αυτό, μόνο η γραμμή είναι τέλεια, η οποία μπορεί να ρυθμιστεί κάτω από οποιαδήποτε γκάμα χρωμάτων, πράγμα που σημαίνει ότι μπορεί να προσαρμοστεί ώστε να ταιριάζει στο στυλ σχεδίασής σας.

Αν το εξετάσουμε πλήρως, τότε υπάρχουν διάφοροι τρόποι δημιουργίας τέτοιων γραμμών για να βάλουμε κάθετες γραμμές στη σελίδα. Εδώ θα εξετάσουμε 2 κύριες μεθόδους, αυτή είναι σε HTML και CSS, αλλά ποια σας ταιριάζει καλύτερα, εξαρτάται από τις απαιτήσεις σας. Εάν κάνετε εγκατάσταση σε αρχική σελίδα, τότε είναι καλύτερα να τα κάνεις όλα μέσα από στυλ. Χρησιμοποιείται όμως και σε διάφορα άρθρα, ως σχέδιο, τότε σίγουρα θα είναι πολύ πιο λογικό να το βάλουμε σε HTML.

Για να δημιουργήσετε μια γραμμή, υπάρχουν διάφορες μέθοδοι που μπορείτε να χρησιμοποιήσετε:

1 . Κάντε την ιδιότητα περίγραμμα-δεξιά ή περίγραμμα-αριστερά του πίνακα στο επιθυμητό πλάτος, ώστε να μπορεί να λειτουργεί ως κάθετη γραμμή.
2 . Ορίστε την ιδιότητα περίγραμμα-δεξιά ή περίγραμμα-αριστερά του DIV τον επιθυμητό τύπο πλάτους.
3 . Ομοίως, μπορείτε να χρησιμοποιήσετε τα πάντα με τη βοήθεια του στυλ, όπου στο CSS, ορίζουμε όλες τις παραμέτρους.

Πρώτη μέθοδος:

Σε αυτήν τη μέθοδο, όλα είναι απλά, εδώ το τυλίγουμε αρχικά στη σελίδα σε μια ετικέτα div, όλα αυτά για να τονίσουμε το στοιχείο. Όπου μπορείτε επίσης να χρησιμοποιήσετε ένα υπάρχον πλαίσιο μπλοκ, όπου ορίζετε το περίγραμμα από μια δεδομένη πλευρά. Όπου είναι δυνατή η εισαγωγή του στυλ στην ετικέτα που καθορίζετε.

Αυτή θα είναι η έξοδος:

Όλα αυτά έγιναν χρησιμοποιώντας την ιδιότητα border-left, όπου αρχικά ορίσαμε το περίγραμμα μπλοκ στα αριστερά και μετά από αυτό μπορείτε ήδη να ορίσετε παραμέτρους τόσο κάτω από τη γραμμή όσο και κάτω από τη φράση κλειδί που θα επισυναφθεί.

Σημειώστε εδώ, καθώς οι ιδιότητες περιγράμματος-top και περιγράμματος-κάτω μπορούν παρομοίως να χρησιμοποιηθούν για να ορίσετε μια οριζόντια γραμμή.

Δεύτερη μέθοδος:

Πρέπει να τοποθετήσετε ένα div γύρω από τη δεδομένη σήμανση, αυτό γίνεται όταν αποφασίσετε ότι η γραμμή εμφανίζεται ως εξής όταν Χρήση CSS.

Οι εικόνες έχουν πολλές ενδιαφέρουσες ιδιότητες που μπορούν να εξαχθούν με την εφαρμογή άμεσου μετασχηματισμού (18) σε απλές φυσικές καταστάσεις. Για τον παρόντα σκοπό μας, δεν χρειαζόμαστε την πλήρη γενικότητα του τύπου (18). το εφέ που θέλουμε να δείξουμε μπορεί να αποδειχθεί ακόμη και όταν όλες οι παράμετροι που χαρακτηρίζουν τη θέση της κάμερας είναι ίσες με μηδέν, εκτός από μία γωνία κλίσης . Σύμφωνα με αυτό, θα πάρουμε και θα μετατρέψουμε την έκφραση (18) σε μια απλούστερη μορφή:

Διερευνούμε τις ιδιότητες της εικόνας μιας κάθετης γραμμής. Η κάθετη γραμμή ενός αντικειμένου σχεδιάζεται από το σημείο του αντικειμένου

όπου οι συντεταγμένες του σημείου στο οποίο η ευθεία τέμνει το επίπεδο του δαπέδου και z είναι μια ελεύθερη παράμετρος, η τιμή της οποίας λαμβάνεται μεταξύ όλων πραγματικούς αριθμούς. Αν αντικαταστήσουμε το v στον τύπο (27) και εξαιρέσουμε την ελεύθερη παράμετρο z από τις δύο εξισώσεις, λαμβάνουμε την εξίσωση μιας ευθείας γραμμής στο επίπεδο της εικόνας

Η ανάλυση αυτής της απλής εξίσωσης δίνει ολόκληρη γραμμήενδιαφέρουσες παρατηρήσεις. Το πιο σημαντικό, το σημείο τομής με τον άξονα Ζ είναι ανεξάρτητο από τη θέση της ίδιας της κάθετης γραμμής. εξαρτάται μόνο από το αν η γραμμή είναι πραγματικά κάθετη. Έτσι, για μια δεδομένη γεωμετρία της κάμερας, οι εικόνες όλων των κάθετων γραμμών διέρχονται από ένα σημείο της κατακόρυφης θέσης, του οποίου οι συντεταγμένες στην εικόνα είναι ίσες με .

Ρύζι. 10.4. Σημεία εξαφάνισης.

Ρύζι. Το 10.4 απεικονίζει αυτό το εφέ στην εικόνα ενός μόνο ορθογώνιου κουτιού, κατέγραψε η κάμερα, με έντονη κλίση προς τα κάτω Ο αναγνώστης μπορεί να ελέγξει άλλες ιδιότητες της εξίσωσης (28), οι οποίες συνάδουν με τη διαίσθηση. Για παράδειγμα, εάν αυξηθεί από το μηδέν σε 90°, το κατακόρυφο σημείο εξαφάνισης μετακινείται στο κέντρο του επιπέδου εικόνας και η κλίση της γραμμής γίνεται πιο επίπεδη. Ομοίως, για κάθε δεδομένη γωνία κάμερας, αυτό το εφέ γίνεται πιο έντονο καθώς οι κάθετες γραμμές του θέματος κινούνται προς την περιφέρεια του οπτικού πεδίου (δηλ.

Γίνεται μεγάλο σε σύγκριση με ). Έτσι, το κατακόρυφο σημείο εξαφάνισης μπορεί να προσδιοριστεί μόνο από τις παραμέτρους της κάμερας και επιβάλλει μια απλή απαραίτητη προϋπόθεση στις εικόνες κάθετων γραμμών.

10.5.4. ΟΡΙΖΟΝΤΙΕΣ ΓΡΑΜΜΕΣ ΚΑΙ ΣΗΜΕΙΑ ΕΞΑΦΑΝΙΣΗΣ

Ως τελευταίο παράδειγμα χρήσης προοπτικών μετασχηματισμών, ας εξετάσουμε ορισμένες ιδιότητες της εικόνας μιας οριζόντιας γραμμής. Για απλότητα, θα εξετάσουμε την εικόνα μιας γραμμής αντικειμένου που βρίσκεται στο επίπεδο του δαπέδου του παγκόσμιου συστήματος συντεταγμένων. Οποιοδήποτε σημείο του αντικειμένου που βρίσκεται σε μια τέτοια γραμμή έχει όπου και b - αντίστοιχα, η κλίση της γραμμής και το μήκος του τμήματος που αποκόπτονται από αυτή τη γραμμή στον άξονα συντεταγμένων Y. Εφόσον θέλουμε να τραβήξουμε μια εικόνα ενός αντικειμένου που βρίσκεται στο πάτωμα, είναι καλύτερα η κάμερα να είναι υψωμένη πάνω από το πάτωμα και να δείχνει προς τα κάτω. Σύμφωνα με αυτό, θα πάρουμε τις γεωμετρικές παραμέτρους της κάμερας στη μορφή και αφήστε την τιμή να είναι θετική και - αρνητική. Για αυτές τις παραμέτρους, ο άμεσος μετασχηματισμός (18) απλοποιείται ως εξής:

Αφού αντικαταστήσουμε τους τύπους (29) και εξαιρέσουμε την ελεύθερη παράμετρο x από τις δύο εξισώσεις, λαμβάνουμε την εξίσωση μιας ευθείας γραμμής στο επίπεδο της εικόνας

Δεν υπάρχουν ιδιαίτερα απλές ιδιότητες ούτε της κλίσης αυτής της γραφικής γραμμής ούτε των σημείων τομής της με τους άξονες συντεταγμένων. εξετάστε, ωστόσο, τη διασταύρωση αυτής της γραμμής εικόνας με τη γραμμή του ορίζοντα αυτής της εικόνας. Η γραμμή ορίζοντα οποιασδήποτε εικόνας ορίζεται ως η τομή του επιπέδου εικόνας με ένα επίπεδο που διασχίζει το κέντρο του φακού παράλληλο προς το δάπεδο. Όπως φαίνεται στην πλάγια όψη του Σχ. 10.5, η εξίσωση της γραμμής του ορίζοντα (σε συντεταγμένες εικόνας) έχει τη μορφή Προφανώς, η συντεταγμένη Χ του σημείου τομής της γραμμής εικόνας (30) με τη γραμμή ορίζοντα προσδιορίζεται εξισώνοντας την έκφραση (30) με την τιμή - . Επίλυση της εξίσωσης που προκύπτει

ως προς τη συντεταγμένη του σημείου τομής με τον ορίζοντα διαπιστώνουμε ότι

Αυτό το αποτέλεσμα θα μπορούσε επίσης να ληφθεί αντικαθιστώντας την έκφραση (29) στην πρώτη εξίσωση και περνώντας στο όριο καθώς το x τείνει στο άπειρο. Επομένως, το σημείο τομής με τον ορίζοντα ονομάζεται επάξια το οριζόντιο σημείο εξαφάνισης ή το σημείο φυγής με τον ορίζοντα της εικόνας μιας δεδομένης γραμμής. αυτό είναι το όριο στο οποίο τείνει το σημείο της εικόνας ενώ το σημείο του αντικειμένου απομακρύνεται στο άπειρο κατά μήκος μιας ευθείας γραμμής

Ρύζι. 10.5. Για τον υπολογισμό της γραμμής του ορίζοντα.

Μπορούμε να κάνουμε μια σειρά από ενδιαφέρουσες παρατηρήσεις σχετικά με την έκφραση (31). Πρώτα, σημειώστε ότι το σημείο φυγής δεν εξαρτάται από το ύψος της κάμερας πάνω από το επίπεδο που περιέχει τη γραμμή του αντικειμένου. Δεύτερον, το σημείο φυγής δεν εξαρτάται από την παράμετρο μεταφοράς b στην εξίσωση γραμμής αντικειμένου. Επομένως, μπορούμε να βγάλουμε το σημαντικό συμπέρασμα ότι οποιεσδήποτε δύο ευθείες παράλληλες στο επίπεδο του δαπέδου έχουν το ίδιο σημείο φυγής αν και μόνο αν είναι παράλληλες μεταξύ τους. Τέλος, ας υποθέσουμε ότι έχουμε δύο ορθογώνιες γραμμές αντικειμένων που βρίσκονται σε ένα επίπεδο παράλληλο με το πάτωμα. Αφήστε τις πλαγιές τους να είναι και τα σημεία φυγής τους με τον ορίζοντα να έχουν συντεταγμένες. και Δεδομένου ότι αυτές οι γραμμές είναι ορθογώνιες, . Επομένως, απευθείας από τον τύπο (31) λαμβάνουμε

Δύο σημεία εξαφάνισης ονομάζονται μερικές φορές συζευγμένα σημεία εξαφάνισης. Επειδή το γινόμενο τους είναι αρνητικό, βρίσκονται πάντα κατά μήκος διαφορετικές πλευρέςαπό την κεντρική γραμμή της εικόνας, όπως φαίνεται στο Σχ. 10.4. Τα συζευγμένα σημεία εξαφάνισης είναι ένα παράδειγμα του τρόπου με τον οποίο ένας δεδομένος περιορισμός αντικειμένου (δηλαδή η ορθογωνικότητα) μπορεί να μετατραπεί σε έναν απλό περιορισμό εικόνας.

Χαιρετισμούς σε όλους τους αναγνώστες. Από καιρό σε καιρό, οι πλοίαρχοι αντιμετωπίζουν το πρόβλημα του πώς να δημιουργήσουν μια οριζόντια ή κάθετη γραμμή χρησιμοποιώντας HTML ή με χρησιμοποιώντας CSS. Αυτό θα σας πω σήμερα.

Γραμμές στο CSS

Υπάρχουν διάφοροι τρόποι για να κάνετε γραμμές. Ένας τέτοιος τρόπος είναι η χρήση CSS. Πιο συγκεκριμένα, με τη βοήθεια του Border. Ας δούμε ένα παράδειγμα.

Και ιδού το αποτέλεσμα.

Οριζόντια και κάθετη γραμμή με css.

Οι γραμμές στο CSS μπορούν να σχεδιαστούν χρησιμοποιώντας τον τελεστή Border. Εάν χρειάζεστε απλώς ένα ορθογώνιο με σταθερό πλάτος περιγράμματος, τότε μπορείτε απλά να χρησιμοποιήσετε αυτόν τον τελεστή και να του δώσετε μια τιμή. Για παράδειγμα περίγραμμα: 5px στερεό #000000; θα σημαίνει ότι τα περιγράμματα του πλαισίου έχουν πλάτος 5 pixel σε μαύρο.

Ωστόσο, εάν δεν χρειάζεται να ορίσετε όλα τα όρια, αλλά μόνο μερικά, τότε πρέπει να προσδιορίσετε ακριβώς ποια όρια χρειάζονται και τι αξία θα έχει το καθένα από αυτά. Αυτοί είναι οι χειριστές:

• border-top - ορίζει την τιμή του επάνω περιγράμματος
• border-bottom - ορίζει την τιμή του κάτω περιγράμματος
• border-left - ορίζει την τιμή του αριστερού περιγράμματος
• border-right - ορίζει την τιμή του δεξιού περιγράμματος.

Κάθετη και οριζόντια γραμμή σε HTML

Μπορείτε επίσης να δημιουργήσετε γραμμές στο ίδιο το HTML. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε την ετικέτα hr.

Σε αυτή την περίπτωση, θα κληρωθεί οριζόντια γραμμή, ένα pixel ύψος και πλήρες πλάτος.

Αλλά αυτή η ετικέτα, μπορείτε να ορίσετε κάποιες τιμές.

• Πλάτος– ορίζει την τιμή του πλάτους γραμμής.
• χρώμα- ορίζει το χρώμα της γραμμής.
• Ευθυγραμμίζω- ορίζει τη στοίχιση αριστερά, κέντρο, δεξιά
• Μέγεθος– ορίζει την τιμή του πάχους της γραμμής σε pixel.

Χρησιμοποιώντας την ετικέτα hr, μπορείτε επίσης να ορίσετε μια κάθετη γραμμή. Αλλά σε αυτή την περίπτωση, θα πρέπει να καταφύγετε ξανά σε στυλ.

Σε αυτήν την περίπτωση, θα σχεδιαστεί μια κάθετη γραμμή ύψους εκατό εικονοστοιχείων, πάχους ενός εικονοστοιχείου και πέντε εικονοστοιχείων με εσοχή.

Συμπέρασμα.

Λοιπόν, τώρα ξέρετε πώς μπορείτε να ορίσετε μια κάθετη και οριζόντια γραμμή. Οι γραμμές μπορούν να οριστούν όπως σε κανονικούς ιστότοπους, με χρησιμοποιώντας HTML, και ορίστε σε έναν ιστότοπο που χρησιμοποιεί ένα CMS, για παράδειγμα, WordPress, αλλά σε αυτήν την περίπτωση, θα χρειαστεί να μεταβείτε σε λειτουργία HTML.

Λοιπόν, αν έχετε περισσότερες ερωτήσεις, ρωτήστε τις στα σχόλια.

οριζόντιες γραμμέςσχηματίζονται από μια μη ζευγαρωμένη (δεν χρειάζεται η ετικέτα κλεισίματος).

---

και μπορεί να είναι αρκετά μοναδικά σχεδιαστικά στοιχεία. Η διακόσμηση του κειμένου με οριζόντιες γραμμές HTML θα δώσει στη σελίδα μια συγκεκριμένη λογική παρουσίασης κειμένου, καθώς και θα διευκολύνει τον αναγνώστη να επισημάνει τμήματα πληροφοριών που πρέπει να μελετηθούν διαδοχικά. Ετικέτα

---

μπορεί να σχηματίσει οριζόντιες γραμμές διαφορετικών χρωμάτων, πάχους και μηκών. Και για να γίνει αυτό είναι αρκετά απλό, όπως φαίνεται στα παρακάτω παραδείγματα.

Παρεμπιπτόντως, μπορείτε επίσης να χρησιμοποιήσετε ιδιότητες στυλ μπλοκ

και και