Спрощені макети веб-сторінок з допомогою каскадних таблиць CSS
Привіт, дивовижні пошукачі знань у веб-розробці! Давайте зануримося в захопливий світ веб-сторінок, використовуючи наш чарівний паличка – CSS Множинні стовпці (класно, правда?).
Коли я сказав “чарівна паличка”, я справді мав на увазі це. CSS Множинні стовпці – це супергерой в божевільному, дикому і чудовому всесвіті оформлення CSS. Цей покритий плащем лицар рятує нас від ускладнень і плутанини, зроблюючи наші веб-сторінки спонтанно набирати форму. Як? Ну, давайте розкриємо код.
H2: Сила CSS Множинних стовпців
По-перше, CSS Множинні стовпці це буквально ваш друг, сусід Людина-Павук. Окей, він не кидає павутиння або не рятує Квінс, Нью-Йорк від суперзлочинців. Ну, не Нью-Йорк, але він безумовно рятує ваш код від біди.
Отже, ось як це працює: множинний розміщення стовпчиків CSS дозволяє легко визначати кілька стовпців тексту – так само, як у газетах! Немає надскладного коду, немає ракетної науки. Простота – ключ для розкриття коду. Або в цьому випадку, ‘легка читабельність’ – це ключ до розкриття макетів веб-сторінок!
H2: Використання CSS Множинних стовпців
Сповіщення про ключові слова: простота! CSS Множинні стовпці використовують прості властивості, які драматично полегшують наш процес створення макету. Перед тим як занадто збудитися, пам’ятайте, що велика потужність вимагає великої відповідальності – і синтаксису!
До властивостей входять:
column-count: Це визначає кількість стовпців у макеті.
column-gap: Як ви вже здогадалися, це простір між стовпцями.
column-rule: Це лінія, яка проводиться між стовпцями (граємо гарно, стовпчики!).
Синтаксис? Вже на підході!
Нижче подано фрагмент коду, який створює макет з трьома стовпцями з інтервалом у 20 пікселів між стовпцями і твердою лінією:
div {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid black;
}
Так, це все. Можете бути впевнені, за цими чотирма рядками коду не приховані жодні чарівні заклинання або книжки чарівників, які вам потрібно розшифрувати.
H2: Додавання яскравості за допомогою Span
Чи ви коли-небудь уявляли, що макет веб-сторінки, а не лише ваша перша коханка зі школи, може бути завойований всього лише ‘span’? (Окей, поганий каламбур, але я не міг відстати!)
Властивість ‘column-span’ ідеально підходить для тих елементів, які потребують додаткового простору і уваги.
img {
column-span: all;
}
Так, навіть цим особливим зображенням надається можливість засяяти!
H2: Головоломка сумісності між платформами
Як і кожен супергерой, у CSS Множинних стовпців є свій криптоніт: сумісність між браузерами. Хоча він в основному підтримується сучасними браузерами, ви не захочете залишити жодного користувача на милості долі, чи не так?
Тому для старомодного Internet Explorer невеликий додатковий рядок коду зробить диво:
div {
column-count: 3;
column-gap: 20px;
-webkit-column-gap: 20px; / Chrome, Safari, Opera /
-moz-column-gap: 20px; / Firefox */
column-rule: 1px solid black;
}
Бачите, навіть кодування має деякі хороші манери – не залишати жодного користувача позаду!
І ось вам це! Тепер ви можете створити охайний макет, схожий на газету, за допомогою CSS Множинних стовпців. Будьте супергероєм, якого потребує ваш макет веб-сторінки.
Пам’ятайте, кодування – це просто ваша супергеройська подорож. Продовжуйте розшифровувати коди, продовжуйте врятувати макети, і, найважливіше, продовжуйте сміятися над моїми жартами!
