Построение Адаптивный веб-сайта с нуля
В этой главе мы будем строить W3.CSS отзывчивый сайт с нуля.
Во-первых, начнем с простой HTML-страницы, с начальным видовом и ссылкой на W3.CSS.
пример
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Попробуй сам " Поместите элементы в контейнерах
Теперь нам нужно добавить общую поля и отступы для всех элементов.
Для достижения этой цели, положить ваши HTML элементов внутри контейнеров (<DIV класс = "W3-контейнер">)
Для того, чтобы сделать возможным определить отдельные классы для заголовков. Отделить заголовок от остального содержимого, используя отдельный элемент <div>:
пример
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Попробуй сам " Цвет Классы
Цветовые классы определяет цвет элементов.
Этот пример добавляет цвет к первому элементу <div>:
пример
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Попробуй сам " Размер Классы
Классы Размер определяет размер шрифта для элементов.
В этом примере добавляется размер для обоих элементов заголовка:
пример
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Попробуй сам " Использование семантических элементов
Если вы хотите следовать семантические рекомендации HTML5. пожалуйста, сделай!
Это не имеет значения для W3.CSS, если вы используете <DIV> или <заголовок>. |
пример
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Попробуй сам " Multicolumn Отзывчивый Layout
С W3.CSS легко создать многоколоночного адаптивный макет.
Столбцы будут автоматически перестраиваются при просмотре на различных размеров экрана.
Некоторые правила сетки:
- Начните с строки класса <DIV класс = "W3-рядного отступа">
- Используйте предопределенные классы, как "W3-третий", чтобы быстро сделать столбцы сетки
- Поместите текстовое содержимое внутри столбцов сетки
В этом примере показано, как создать три колонки одинаковой ширины:
пример
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Попробуй сам " Этот пример показывает, как создать четыре столбца равной ширины:
пример
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Попробуй сам " Колонны с различной шириной
В этом примере создается макет три колонки, где колонка в середине шире, чем первый и последний столбец:
пример
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Попробуй сам " Навигация Бары
Панель навигации является навигационным заголовок, который помещается в верхней части страницы.
пример
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
Попробуй сам " Боковая навигация
С боковой панели навигации, у вас есть несколько вариантов:
- Всегда показывать панель навигации слева от содержимого страницы.
- Откройте панель навигации, скрывая левую часть содержимого страницы.
- Откройте панель навигации, скрывая все содержимое страницы.
- Сдвиг содержимого страницы вправо, при открытии панели навигации.
В этом примере открывается панель навигации, скрывая часть содержимого страницы:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript, чтобы открыть и скрыть меню используется:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Попробуй сам "