Начинающий веб-разработчик: пишу сайт со сменой экранов на JQuery. Часть 1
Введение
Здравствуйте, в моей прошлой статье я уже говорил, что я начинающий веб-разработчик, в этом деле всего пол года, потихоньку учусь, сделал свой блог и в принципе уже что-то знаю и делюсь этим со своими читателями.
Сегодня я начинаю серию постов по разработке сайта со сменой экранов на JQuery, которая затянется на 3-4 статьи. Вся разработка будет проходить немного раньше того, как я опубликую статью, практически live - трансляция! Профессионалов своего дела прошу комментировать работу не строго, но по факту, а начинающим разработчика советую вникать и учитывать замечания старших.
Я буду делать нестандартный сайт. На этом сайте будет одна страница, которая будет разделена на несколько экранов, которые будут переключаться нажатием на определенные элементы посредствам сил JS с библиотекой JQuery. На сайте будет всего 4 экрана, постараюсь вместить на них всю нужную информацию.
Приступим к началу моего проекта - сайт мобильного приложения со меной экранов на JQuery.
Подготовка html разметки и создание первого контейнера
Начнем конечно же со стандартной html разметки, ну знаете там, теги head
, body
, title
и так далее.
Про создание файлов index.html
, style.css
и папки с картинками рассказывать не буду, думаю тут можно разобраться самому, гугл вам в помощь.
Вот такую html
разметку я написал:
<!DOCTYPE html>
<html>
<head>
<title>Шаблон сайта мобильного приложения</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>
title
прописал,meta
для адаптивности прописал, файл стилей и библиотеку JQuery подключил, пришло время писать структуру сайта. Не для кого не секрет, что структура html прописывается внутри тега body
.
<div class="box_1">
<div class="col_box_1">
<h1>Основной заголовок</h1>
<p>Текст с первичным описанием</p>
<a href="#" class="button1">кнопка</a>
</div>
<div class="col_box_1">
<img src="image/1278ab5be10755a58d45bbe641e350fd.png" alt="">
</div>
</div>
Вот так я сделал структуру первого блока, поясню:
Создаём контейнер
box_1
;Помещаем в контейнер две колонки
col_box_1
;В первую колонку помещаем заголовок
h1
и параграфp
с будущим описанием, а также ссылкуa
с классомbutton
для создания кнопки, с помощью которой осуществляется действие;Во вторую колонку помещаем изображение
img
, которое будет как-то презентовать продукт, изображение я уже вставил.
Задаем стили первого контейнера и его элементов
Настала пора задать стили первому контейнеру и всем его элементам. Как все знают, данные манипуляции я буду проводить в файле style.css
, который я подключил в разделе head
.
body {
background-color: rgb(27, 27, 27);
margin: 0;
}
/******container-1******/
.box_1::after {
content: "";
display: table;
clear: both;
}
.box_1 {
padding: 4%;
}
.col_box_1 {
float: left;
width: 50%;
color: white;
text-shadow: 1px 1px 1px rgb(100, 97, 97);
font-family:'Franklin Gothic Medium', 'Arial Narrow', 'sans-serif';
}
.col_box_1 h1 {
padding-top: 22%;
font-size: 50px;
padding-left: 15%;
}
.col_box_1 p {
padding-left: 15%;
font-size: 20px;
}
a.button1 {
display: inline-block;
color: white;
font-weight: 500;
text-decoration: none;
user-select: none;
padding: .5em 2em;
outline: none;
border: 2px solid;
border-radius: 1px;
margin-left: 15%;
transition: 0.2s;
}
a.button1:hover {
background: rgba(255,255,255,.2);
}
.col_box_1 img {
object-fit: contain;
width: 60%;
height: 35%;
padding-left: 15%;
}
Задаем общий фон сайта, сайт будет в темных тонах. Также указываем внешние отступы
margin: 0
;Выравниваем
col_box_1
по левой стороне с помощью методаfloat
, тем самым создаем две колонки размером 50% на 50%. Можно использовать более новые методы для построения колонок, типаgrid
иflexbox
;Задаем общие стили для всех элементов и задаем стили для нашей кнопки
button1
;Задаем стили изображению, указываем заполнение
object-fit: contain;, размеры width height и внутренние отступы слева padding-left;
Посмотрим на результат:
Получилось вроде неплохо, по дизайну тоже нормально, минимализм, ничего лишнего.
Не хватает только одной детали, чтобы переключать экраны, нам нужен какой-то элемент, при нажатие на который, будет осуществляться переход.
Я вставлю этот элемент в виде иконки плюса посередине в нижней части экрана.
<div class="box_1">
<div class="col_box_1">
<h1>Основной заголовок</h1>
<p>Текст с первичным описанием</p>
<a href="#" class="button1">кнопка</a>
</div>
<div class="col_box_1">
<img src="image/1278ab5be10755a58d45bbe641e350fd.png" alt="">
</div>
<!--Иконка плюсика-->
<img id="center_img" src="image/add_plus_interface_icon_181584.png" alt="" width="80" height="80">
</div>
И задаем иконке стили:
#center_img {
display: block;
margin: 0 auto;
transition: 0.5s;
}
#center_img:hover {
transition: 0.5s;
width: 70px;
height: 70px;
}
Тут в принципе всё должно быть ясно, вставляем иконку с помощью тега img
, задаем ей размеры, в стилях указываем её расположение и эффекты при наведение :hover
.
Результат:
Вот такой симпатичный плюс получился.
На этом статья заканчивается. В следующей статье я сделаю второй экран сайта и реализую переход между экранами.
Спасибо за внимание, до скорого!