В этой статье мы затронем один очень простой и современный способ вёрстки сайта. Главным критерием будет следующее: сайт должен быть адаптивным под все мобильные устройства. В данной статье не будет лишней информации – что такое html и прочее, для этого существует специальный раздел на нашем сайте, где вы найдёте бесплатные онлайн-курсы по вёрстке .
Все действия будем делать поэтапно и в данной статье не будет заворачиваться в плане дизайна.
Цель данной статьи - показать принцип вёрстки, данный код вы можете использовать во всех своих проектах. Основная идея в том, что вам не нужны различные Фреймворки по типу Bootstrap и ему подобные.
Создайте на своём компьютере папку, абсолютно в любом месте (для обучения можно просто на рабочем столе). Далее создайте файлы по схеме, которая расположена ниже по тексту. Когда верстаете сайт, следует придерживаться следующим правилам размещения папок и файлов.
[css]
Открываем файл index.html и внесём туда код размещённый ниже. Данный файл можно открыть в при помощи браузера, ваш браузер будет воспринимать его как готовый сайт и построит блоки согласно следующему коду:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой первый сайт</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- сюда вставляем код html шапки -->
<!-- сюда вставляем код html контента -->
<!-- сюда вставляем код html сетки -->
<!-- сюда вставляем код html подвала -->
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Как уже было написано выше, мы не будем особо заморачиваться с дизайном, поэтому всё будет в минималистичном стиле. В нашей шапке будет логотип, ссылки на WhatsApp и Viber, номер телефона.
Заменяем в index.html:
<!-- сюда вставляем код html шапки --><div id='win1'>
<div class="header">
<div class="container">
<div class="row">
<div class="advantages-items">
<div class="win1__logo"><img src="images/logo.png"></div>
<div class="win1__soc">
<a href="viber://add?number=(ваш_номер_телефона)"><img src="images/viber.png"></a>
<a href="https://wa.me/(ваш_номер_телефона)?text=Привет!"><img src="images/whatsapp.png"></a>
</div>
<div class="win1__phone">
<span>(ваш_номер_телефона)</span>
<a href="mailto:(ваш_email)">(ваш_email)</a>
</div>
</div>
</div>
</div>
</div>
Открываем файл /css/css.css . В данном файле будут хранится стили нашего сайта. К примеру, вы хотите изменить цвет текста или отступы между буквами. Теперь вам понадобится добавить туда основные стили, которые нам понадобятся для построения блоков по горизонтали.
Вставляем следующий код в файл /css/css.css:
body {font-family: 'Roboto Slab', serif;overflow-x: hidden;color: #000;background: #fff;padding:0;margin:0;font-size:14px;}
.container{position:relative;width:1170px;margin-right: auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before, .container:after{content:'';display:table;clear:both;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.advantages-items{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: left;-webkit-justify-content: left;-ms-flex-pack: left;justify-content: left;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.advantages-items.items-bottom{-webkit-box-align: flex-end;-webkit-align-items: flex-end;-ms-flex-align: flex-end;align-items: flex-end;}
.advantages-items.items-top{-webkit-box-align: end;-webkit-align-items: end;-ms-flex-align: end;align-items: end;}
.container - данный класс говорит о том, что ширина нашего сайта относительно всей ширины экрана составляет 1170px, вы можете сделать по желанию, но лучше оставить так как есть.
.advantages-items – говорит о том, что дочерние блоки выстраиваются по горизонтали и выравниваются по центру относительно горизонта.
.advantages-items.items-bottom – говорит о том, что дочерние блоки будут выравниваться понизу.
.advantages-items.items-top – говорит о том, что дочерние блоки будут выравниваться поверху.
Ниже мы добавим стили для нашей шапки (css.css):
.win1__logo{-webkit-flex-basis: -webkit-calc(100% - 400px);-ms-flex-preferred-size: calc(100% - 400px);flex-basis: calc(100% - 400px);box-sizing: border-box;}
.win1__soc{-webkit-flex-basis: 200px;-ms-flex-preferred-size: 200px;flex-basis: 200px;box-sizing: border-box;}
.win1__phone{-webkit-flex-basis: 200px;-ms-flex-preferred-size: 200px;flex-basis: 200px;box-sizing: border-box;}
В данном коде мы говорим следующее:
.win__soc – блок ссылок на Whatsapp и Viber будут шириной 200px (пикселей).
.win__phone – блок с номером телефона на сайте будет шириной 200px (пикселей).
.win1__logo – блок логотипа будет шириной 100% - 400px (400px – это суммарная ширина блоков win__soc и win__phone).
Теперь посмотрим на сайт. Как он выглядит? Заходим через браузер Google Chrome или Яндекс.Браузер. Почему именно эти браузеры? Зачастую это самые популярные браузеры, плюс нам понадобится Панель инструментов web-разработчика, которая уже встроена в данные браузеры.
Открыть index.html через браузер можно следующим путём: кликаем правой кнопкой мыши на файл index.html и выбираем: Открыть с помощью - далее выбираем браузер (Google Crome или Яндекс.Браузер). Теперь мы видим что блоки с логотипом и иконки не отображаются? Всё верно, в нашей папке images отсутствуют файлы logo.png, viber.png и whatsapp.png. Вы можете использовать свои изображения.
Либо скачать наши заготовки: logo.png viber.png и whatsapp.png (не забудьте переименовать название файлов в точности как тут)
Теперь, чтобы логотип не прилипал, добавим отступы к шапке. Существует 2 вида отступов: внутренний и внешний, мы будем использовать внутренний. Но мы будем использовать отступ для всей шапки, поэтому в css.css добавим новый стиль:
.header{padding:25px 0}Далее добавим стиль для номера телефона, его нужно сделать больше, более жирным:
.win1__phone span{font-size:16px;font-weight:bold;margin-bottom:6px;display:inline-block}
Идея первого экрана в том, чтобы слева на 50% от всего экрана был текст, а справа background с картинкой. Для начала давайте сделаем структуру в index.html.
Заменяем в index.html:
<!-- сюда вставляем код html контента -->На:
<div id="win2">
<div class="container">
<div class="row">
<div class="advantages-items">
<div class="left">
<div class="title1"><span>Мой первый сайт</span> вам понравится результат</div>
<div class="title2">узнайте более подробней перейдя по ссылке</div>
<a href="#" class="button1"><span>Подробнее <i class="im im-arrow-right"></i></span></a>
</div>
</div>
</div>
</div>
</div>Теперь нужно добавить стили к нашему экрану, чтобы он выглядел более презентабельным. Первую строчку в .tittle1 span сделаем самой крупной и с новой строчки. То, что не находится в теге span, сделаем чуть меньше, а класс .title2 сделаем ещё меньше. Плюс добавим стили кнопки с классом .button1.
#win2{padding:150px 0;background:#f1f1f1}
#win2 .title1 {font-size:30px;display:block;margin-bottom:15px;font-weight:bold}
#win2 .title1 span{font-size:40px;display:block;margin-bottom:10px;text-transform:uppercase;}
#win2 .title2 {font-size:18px;display:block;margin-bottom:35px}
.button1{font-weight:bold;border:0;cursor:pointer;text-transform:uppercase;position:relative;font-family: 'MuseoSans700';overflow:hidden;text-decoration:none;font-size:18px;color:#1e1a0d;display:inline-block;text-align:center;padding:15px 50px;border-radius: 6px;background-image: -moz-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);background-image: -webkit-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);background-image: -ms-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);box-shadow: 0px -1px 0px 0px rgba(255, 233, 173, 0.05), 0px 5px 0px 0px rgb(195, 151, 28), 2px 7px 38px 0px rgb(10, 10, 9,0.1);}
.button1.button1--white{border-bottom:5px solid #d0b73f;box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.004),0px 5px 0px 0px rgba(208, 183, 63, 0.004),0px 12px 13px 0px rgba(0, 0, 0, 0.10);}
.button1 span{position:relative;z-index:5;}
.button1 span i{font-size: 16px;position: relative;margin-left: 10px;top: 2px;}
.button1:before{content:'';position:absolute;z-index:4;opacity:0;top:0;left:0;width:100%;height:100%;background:#fff;box-shadow: 0px 0px 51px 57px rgba(255, 255, 255, 0.91);}
.button1:hover:before{opacity:0.5}
.button1:after{animation:landing_pageBlick 4s linear infinite;content:'';position:absolute;z-index:4;border-radius:300px;opacity:1;top:0;left:0;width:50px;height:100%;background:#fff;box-shadow: 0px 0px 51px 57px rgba(255, 255, 255, 0.91);}
@keyframes landing_pageBlick {0% {left:-50%;opacity:0}50%{left:-50%;opacity:0}60%{left:10%;opacity:1}70%{left:120%;opacity:0}100% {left:0%;opacity:0}}Чтобы заменить фон на нашем экране с цвета на картинку требуется сделать следующее:
Заменяем в предыдущем коде:
#win2{padding:150px 0;background:#f1f1f1}На:
#win2{padding:150px 0;background:#f1f1f1 url(https://showskills.ru/uploads/posts/2019-11/1572684083_bg.jpg) center center no-repeat;background-size:cover}Когда верстаешь сайт, зачастую нужно сделать сетку из 3,4,5 и более блоков по горизонтали, к примеру вам нужно сделать блок с преимуществами. В качестве примера мы сделаем сетку из 3 блоков, открываем index.html и ставим следующий код:
Заменяем в index.html
<!-- сюда вставляем код html сетки -->На:
<div id="win3">
<div class="container">
<div class="row">
<h2>О нас</h2>
<div class="advantages-items items-top">
<div class="wrap">
<div class="info">
<div class="tile">Быстро</div>
<div class="text">Вы делаете заявку на сайте или по телефону</div>
</div>
</div>
<div class="wrap">
<div class="info">
<div class="tile">Качественно</div>
<div class="text">Мы составляем техническое задание и высылаем вам</div>
</div>
</div>
<div class="wrap">
<div class="info">
<div class="tile">Результативно</div>
<div class="text">В течении 5 дней вы получаете готовый продукт</div>
</div>
</div>
</div>
</div>
</div>
</div>Теперь нам нужно разделить наши блоки на 3, для этого пропишем сразу следующий код в css.css:
#win3{padding:50px 0;text-align:center}
#win3 h2{font-size:40px;text-transform:uppercase}
#win3 .wrap{box-sizing: border-box;-webkit-flex-basis: -webkit-calc(100% / 3);-ms-flex-preferred-size: calc(100% / 3);flex-basis: calc(100% / 3);}
#win3 .wrap .info{padding:0 15px;}
#win3 .wrap .info .tile{font-size:30px;font-weight:bold;padding-bottom:10px}
#win3 .wrap .info .text{font-size:18px;}Подвал будет максимально простой, в нём будет повторятся наш логотип и строчка: все права защищены.
Заменяем в index.html
<!-- сюда вставляем код html подвала -->На:
<footer>
<div class="container">
<div class="row">
<div class="advantages-items">
<div class="wrap"><img src="images/logo.png"></div>
<div class="wrap end">Все права защищены © 2020</div>
</div>
</div>
</div>
</footer>Теперь добавим следующее в css.css. По сути мы опять будем работать со свойством flex-basis, только установим следующий код:
footer{margin-top:50px;padding:15px 0; background:#f1f1f1}
footer .wrap{-webkit-flex-basis: 50%;-ms-flex-preferred-size: 50%;flex-basis: 50%;}
footer .wrap.end{text-align:right}
Теперь сделаем так, чтобы наш сайт нормально отображался на всех видах устройствах, по другому говоря адаптируем сайт под все мобильные устройства. Вы можете использовать Инструменты web-мастера, в Google Chrome данный инструмент можно вызвать по разному, нажать кнопку F12, либо наведите на элемент который нужно адаптировать правой кнопкой и выберете Посмотреть код. После нажмите комбинацию клавиш CTRL+SHIFT+M. Далее добавьте в ваш css.css следующий код:
@media(max-width:1200px){
.container{width:100%;padding:0}
.container .row{padding-left:15px;padding-right:15px}
}
@media(max-width:1024px){
}
@media(max-width:768px){
}
@media(max-width:767px){
}
@media(max-width:600px){
}
@media(max-width:500px){
}В данном примере можно адаптировать сайт следующим образом:
@media(max-width:1200px){
.container{width:100%;padding:0}
.container .row{padding-left:15px;padding-right:15px}
}
@media(max-width:1024px){
#win1{background:#f1f1f1}
.win1__logo, .win1__soc, .win1__phone{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin-bottom:15px;text-align:center}
.win1__phone span{display:block}
#win2{text-align:center;padding: 0px 0 50px;}
#win2 .left{width:100%}
#win3 .wrap{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin:15px 0}
}
@media(max-width:768px){
}
@media(max-width:767px){
}
@media(max-width:600px){
}
@media(max-width:500px){
footer .wrap, footer .wrap.end{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin:15px 0;text-align:center}
}
5 видео
6 видео
4 видео
8 видео
5 видео
5 видео
8 видео
5 видео
6 видео
3 видео