2 апр 2021 в 01:29

Начинающий веб-разработчик: пишу сайт со сменой экранов на 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.

Результат:

Вот такой симпатичный плюс получился.

На этом статья заканчивается. В следующей статье я сделаю второй экран сайта и реализую переход между экранами.

Спасибо за внимание, до скорого!

Хабы: