30 ноября 2018г.
Обучение html и css с нуля бесплатный курс адаптивный дизайн уроки онлайн метод медиа - запросы
Медиа запрос представляет собой метод CSS введенный в CSS3.
Он использует @media правило для включения блока свойств CSS только, если определенное условие истинно.
Если окно браузера меньше 500px, цвет фона изменится на белый
@media only screen and (max-width: 500px) {
body {
background-color: white;
}
}
Когда ширина становится больше, чем 768px, каждый столбец должен иметь ширину 100%:
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Вы можете добавить столько точек для остановки, сколько вам понадобиться. А мы также сможем вставить контрольную точку между планшетами и мобильными телефонами. Мы сделаем это, добавив еще один медиа-запрос (на 600px), а также добавим набор новых классов для устройств размером более 600 пикселей (но меньше, чем 768px):
Обратите внимание, что два набора классов почти идентичны, единственное отличие это имя (col-m и определение):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Медиа-запросы также могут быть использованы для изменения макета веб-страницы в зависимости от ориентации веб-браузера.
Вы можете использовать набор свойств CSS, который будет применяться только тогда, когда окно браузера шире, чем его высота, так называемая ориентация (landscape).
Веб-страница будет иметь фон код цвета HEX (#ecfbdc) светло-голубой цвет, если ориентация находится в режиме (landscape):
@media only screen and (orientation: landscape) {
body {
background-color: #ecfbdc;
}
}
1 Давайте откроем наш файл с именем index.html в текстовом редакторе, и вместе со мной приступаем к HTML верстке одностраничного сайта розового цвета бесплатно. В предыдущем уроке изображен макет нашей веб-страницы. И первое что мы должны сделать это (header) голову нашего одностраничника.
Оформление головы одностраничного сайта розового цвета
<body>
<div class="header">
<h1>Одностраничный сайт розового цвета бесплатно верстка «Формула успеха»</h1>
</div>
</body>
Далее мы вставим отзывчивую сетку на нашу веб-страницу сайта. В ней мы расположим: первая секция (меню сайта расположено слева), средняя секция (контент расположен по середине), третья секция (сайдбар расположен справа).
Добавляем отзывчивую сетку на одностраничный сайт розового цвета.
Для рабочего стола:
Первая и третья секция будет охватывать по 3 колонки каждая. Средняя секция будет охватывать 6 столбцов.
Для планшетов:
Первый раздел будет охватывать 3 колонки, второй будет охватывать 9, а третья секция будет отображаться ниже первых двух секций, и она будет охватывать 12 столбцов:
<body>
<div class="header">
<h1>Одностраничный сайт розового цвета бесплатно верстка «Формула успеха»</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>Формула успеха</li>
<li>Формула богатства</li>
<li>Формула трех стихий</li>
<li>Формула благодарения</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h2>Формула денег</h2>
<p>Данная формула помогает настроиться на вибрации изобилия и установить связь со Вселенной. Вселенная не знает недостатка, в ней все в изобилии - вся природа демонстрирует это. Почувствовав себя частью Вселенной, Вы сможете в полной мере ощутить ее бесконечное богатство и совершенство.</p>
<h4>Космическое изобилие проявляется потоком денег в моей жизни.</h4>
<p>При произнесении слова "поток" 2 раза соедините указательный и большой пальцы правой руки и визуализируйте, как поток энергии, словно лучи солнечного света, наполняет Вас. Когда Вы произносите слово "поток" и два раза соединяете пальцы, в Вашем подсознании запускается программа успеха, а Вы становитесь магнитом для денег и удачи.</p>
<h3>HEX коды цвета для страницы сайта</h3>
<p>Все HEX коды цвета для страницы сайта изображены на картинке</p>
<img src="style/images/img1.jpg" alt="HEX коды цвета для страницы сайта">
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>Любовь дарует мне успех.</h2>
<p>Произнесение данной формулы привлекает деньги и ускоряет достижение успеха в любых начинаниях, а также нейтрализует все негативные последствия. Вы сможете успокоить ум, уменьшить беспокойство, усилить концентрацию и расширить восприятие. Для этого постоянно повторяйте аффирмацию.</p>
<h2>Формула для создания заголовков для сайта</h2>
<p>ЧИСЛО ИЛИ (СЛОВО-ТРИГГЕР) + ПРИЛАГАТЕЛЬНОЕ + КЛЮЧЕВОЕ СЛОВО + ВЫГОДА</p>
</div>
</div>
</div>
<!-- Подвал -->
<div class="footer">
<p>Измените размеры окна браузера, чтобы увидеть, как содержимое реагирует на изменение размеров.</p>
</div>
</body>
Не забывайте сохранять изменения в html документе сочетанием (ctrl+S). Вы заметили что в секторе (контент), на странице появилось изображение. Как вставить изображение на веб-страницу, вы узнаете в следующем уроке.
Учебник адаптивный веб-дизайн скачать полностью, с его помощью Вы уже буквально через несколько часов сможете создать одностраничный сайт на подвижной сетке, любой тематики.
Готовые шаблоны html легкий способ сделать сайт самому. Помогу разработать сайт под ключ вплоть до загрузки на хостинг. Адаптивная верстка для смартфонов и планшетов. В галерее готовых сайтов можно выбрать и купить шаблон html недорого.
