Οριζόντια γραμμή σε ολόκληρη την οθόνη CSS. Πώς να κάνετε με τα μπλοκ CSS στη γραμμή; III γραμμή με το σχέδιο με σχέδιο

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

Γραμμές στο CSS.

Υπάρχουν διάφοροι τρόποι για να κάνετε γραμμές. Ένας από αυτούς τους τρόπους είναι Χρησιμοποιώντας το CSS.. Ή μάλλον με τα σύνορα. Ας εξετάσουμε ένα παράδειγμα.

Και αυτό συμβαίνει.

Οριζόντια και κάθετη γραμμή με χρησιμοποιώντας το CSS..

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

Ωστόσο, αν χρειαστεί να ζητήσετε όλα τα σύνορα, αλλά μόνο μερικοί, τότε πρέπει να καταχωρίσετε ποια όρια χρειάζονται και ποια τιμή θα είναι καθένα από αυτά. Αυτοί είναι χειριστές:

• Η συνοριακή κορυφή - ορίζει την αξία του άνω συνόρου
• border-bottom - Ορίζει την τιμή του κάτω περιθώρου
• Το όριο-αριστερό - ορίζει την αξία του αριστερού ορίου
• Στρίψτε δεξιά - ορίζει την αξία του δεξιού συνόρου.

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

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

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

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

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

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

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

Συμπέρασμα.

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

Λοιπόν, αν εξακολουθείτε να έχετε οποιεσδήποτε ερωτήσεις, ρωτήστε τους στα σχόλια.

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

Πριν κοιτάξουμε τις πιο κοινές τεχνικές, θα ήθελα να θυμηθώ μια μικρή θεωρία. Τα στοιχεία της ιστοσελίδας χωρίζονται σε μπλοκ και πεζά. Και η διαφορά μεταξύ τους είναι πολύ απλή - η γραμμή μπορεί να βρίσκεται σε μία γραμμή και μπλοκ - όχι. Φυσικά, δεν υπάρχουν διαφορές σχετικά με αυτό, αλλά είναι η κύρια διαφορά. Ήδη τα μπλοκ μπορεί να έχουν εσοχές από πάνω και κάτω (στη μικρή περίπτωση - όχι), καθώς και περισσότερες ιδιότητες μπορούν να εφαρμοστούν σε αυτούς.

Κύριοι τρόποι για να χτίσετε σε μπλοκ CSS στη σειρά

Δεν θα περιπλέξουμε τίποτα, υπάρχουν 3 κύριοι τρόποι:

Μετατρέψτε τα μπλοκ στα πεζά στοιχεία. Ταυτόχρονα, οι ιδιότητες Block χάνονται, οπότε αυτή η επιλογή δεν χρησιμοποιείται σχεδόν ποτέ ποτέ

Κάντε τα επιθυμητά στοιχεία μπλοκ. Αυτός είναι ένας ειδικός τύπος στον οποίο το στοιχείο αποθηκεύει τις ιδιότητές του, αλλά ταυτόχρονα επιτρέπει σε άλλα μπλοκ να παραμείνουν κοντά.

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

Αυτές οι επιλογές θα σταματήσουν. Το FlexBox, η πινακίδα και άλλα σημεία δεν θα ληφθούν υπόψη. Έτσι, ας έχουμε 3 υπότιτλους.

Τίτλος 1.

Τίτλος 2.

Τίτλος 3.

Φυσικά, όλες οι ιδιότητες του CSS πρέπει να συνταγογραφηθούν Ξεχωριστό αρχείο (Style.css) που θα συνδεθεί σε ένα έγγραφο HTML. Σε αυτό το αρχείο, θα γράψω το ελάχιστο στυλ έτσι ώστε οι υπότιτλοι μας απλά να δει.

h3 (φόντο: #eddcd;)

Εδώ βρίσκονται στη σελίδα:

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

Μετατρέπουμε σε χορδές και προσθέτουμε αμέσως εσωτερικές περιπτώσεις. Για αυτόν τον επιλογέα H3 πρέπει να προσθέσετε ιδιότητες:

Εμφάνιση: Inline. Padding: 30px;

Υπάρχουν 2 κύρια προβλήματα που συμβαίνουν κατά τη χρήση αυτής της λήψης. Το πρώτο είναι η ελάχιστη περίπτωση. Δημιουργείται λόγω του γεγονότος ότι υπάρχει ένας χώρος στον κώδικα μεταξύ μπλοκ, τα οποία σχηματίζουν αυτή την περίπτωση. Εάν το πρόβλημα αυτό πρέπει να λυθεί, υπάρχουν 2 κύριες επιλογές:

Στο HTML, τοποθετήστε τον κώδικα των επιθυμητών μπλοκ σε μία γραμμή χωρίς κενά

Βάλτε μια αρνητική εξωτερική περίπτωση στο δεξί -4 pixel. Είναι τόσο πολύ παίρνει ένα κενό.

Το δεύτερο πρόβλημα - με διαφορετικό ύψος των στοιχείων, μπορεί να προκύψουν προβλήματα με την οθόνη. Γενικά, η καλύτερη επιλογή είναι πλωτά μπλοκ. Αντί της οθόνης: Inline-Block Γράψτε αυτό:

Μπλοκ στη γραμμή χρησιμοποιώντας το πλαίσιο

Θα πω αμέσως ότι αν πρόκειται να χρησιμοποιήσετε οποιοδήποτε κανονικό πλαίσιο CSS (για παράδειγμα, bootstrap), τότε εξακολουθεί να είναι πολύ πιο εύκολο. Ολόκληρος ο κώδικας CSS που είναι υπεύθυνος για την ευθυγράμμιση των στοιχείων έχει ήδη γραφτεί και θα έχετε μόνο τις σωστές τάξεις. Για να το κάνετε αυτό, αρκεί να μελετήσετε το σύστημα δικτύου και μπορείτε να κάνετε τα προσαρμοστικά πρότυπα της Mustiscolone χωρίς δύσκολες δυσκολίες. Τουλάχιστον θα είναι πολύ πιο εύκολο από το να γράφετε css από το μηδέν.

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

Για παράδειγμα, όταν έχετε Μεγάλες οθόνες Πρέπει να υπάρχουν 4 στήλες, κατά μέσο όρο - 3, και επάνω Κινητά τηλέφωνα - 2. Χρησιμοποιώντας πλαίσια όπως bootstrap, ή μάλλον με τη βοήθεια του δικτύου του, συνειδητοποιήστε ότι αυτό είναι θέμα κυριολεκτικά λίγα λεπτά.

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

Μάθετε να εργάζεστε με το πλαίσιο που μπορείτε να βοηθήσετε. Η θεωρία εξηγείται επίσης εκεί, αλλά το πιο σημαντικό πράγμα είναι η πρακτική. Μπορείτε να κυνηγήσετε 3 προσαρμοστικά πρότυπα και να πάρετε μια εξαιρετική εμπειρία που θα σας επιτρέψει να αντικατοπτρίζετε τους ιστότοπους για να παραγγείλετε ή για τον εαυτό σας. Και αν θέλετε να εξοικειωθείτε με τα οφέλη και τις δυνατότητες του πλαισίου, προτείνω να δείτε τη σειρά άρθρων μας σχετικά με το bootstrap, καθώς και στη διάταξη μιας απλής διάταξης. Σας εύχομαι επιτυχία στη διάταξη και την κατασκευή ιστοσελίδων στο σύνολό της.

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

Πώς να κάνετε στο κείμενο μια γραμμή με το CSS

Για την εφαρμογή της συλλογής που πρέπει να επικοινωνήσουμε style.css αρχείο, μιλώντας σε αυτό μια αντίστοιχη ιδιοκτησία Σύνορο.. Έτσι, μια γραμμή θα εμφανιστεί πάνω ή από μια ορισμένη πλευρά του κειμένου. Με τη σειρά τους, υπάρχουν αρκετές ιδιότητες που είναι υπεύθυνοι για την εμφάνιση της γραμμής, δηλαδή:

- Σύνορα-κορυφή. - οριζόντια γραμμή, που βρίσκεται πάνω από το κείμενο.

- Σωσίβιο - κάθετη γραμμή, που βρίσκεται στα δεξιά του κειμένου.

- Στρίψτε το κάτω μέρος. - οριζόντια γραμμή, που βρίσκεται κάτω από το κείμενο.

- Τα σύνορα αριστερά. - κάθετη γραμμή που βρίσκεται στα αριστερά.

Πώς να κάνετε μια γραμμή σε HTML

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

Σύντομη αποκωδικοποίηση εντολών

- πλάτος. - μήκος γραμμής,

- Στερεός - Στερεά γραμμή.

- διάσπαρτος. - Spot line.

Για μια βαθύτερη γνωριμία με τα στυλ, συστήνω να το διαβάσω.

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

Η προκύπτουσα μέθοδος έχει πολλά πλεονεκτήματα:

Ένα ευρύ φάσμα δυνατοτήτων με τις οποίες μπορείτε να κάνετε σχεδόν οποιαδήποτε γραμμή.

Ευκολία να κάνετε όλες τις απαραίτητες αλλαγές απευθείας στον κώδικα HTML. Αυτό απλοποιεί σε μεγάλο βαθμό την εργασία για τους άπειρους κατασκευαστές τοποθεσιών.

Πώς να κάνετε μια ευθεία οριζόντια γραμμή χρησιμοποιώντας την ετικέτα HTML

---

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

Χαρακτηριστικά ετικέτας

---

- πλάτος. - Υπεύθυνος για τη διάρκεια της γραμμής. Μπορεί να υποδεικνύεται ως ποσοστό και εικονοστοιχεία.

- Μέγεθος - πάχος γραμμής. Που υποδεικνύονται σε εικονοστοιχεία.

- Χρώμα - Καθορίζει το χρώμα της γραμμής.

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

Οριζόντιες γραμμές Μη απαραίτητη μορφή (δεν απαιτείται ετικέτα κλεισίματος) Ετικέτα

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