Добавление резюме на сайт с помощью CSS

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В этом мануале мы создадим раздел Employment с помощью HTML-таблиц и CSS-классов. Для этого мы добавим и стилизуем заголовок, широкий столбец и HTML-таблицу внутри столбца.

Все материалы, которые мы используем, вы можете легко заменить своим контентом. Все описанные здесь методы можно применить и к другим проектам, разработанным на CSS/HTML.

Требования

Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание нового раздела и заголовка

Для начала создайте класс, который вставит пустое пространство между предыдущим разделом Projects и новым разделом Employment. Добавьте следующие комментарии CSS и набор правил в конец файла styles.css:

. . .

/* Section 4 */

/* Add space between sections */

.section-break {

  margin:50px;

  height:500px;

}

В этом фрагменте кода мы добавили комментарий CSS, отделяющий наборы правил CSS для нового раздела от остальных правил, и комментарий, объясняющий назначение класса section-break. Позже мы присвоим этот класс пустому элементу <div> в файле index.html, что придаст ему высоту 500 пикселей и внутреннее поле 50 пикселей. Этот элемент <div> будет по сути невидимым, но его высота будет выглядеть как разрыв между разделами, а последующий контент сместится на 500 пикселей вниз по странице.

Перейдите в файл index.html и добавьте следующий фрагмент кода:

. . .

<!--Section 4: Employment—>

<div class="section-break"> </div>

<h2 class="section-heading">Experience</h2>

Этот фрагмент открывает комментарий для обозначения HTML-кода нового раздела, после чего идет контейнер <div>, которому присвоен класс section-break. Этот код также добавляет заголовок раздела Experience и оформляет его согласно классу section-heading, который вы создали ранее.

Примечание: Если вы не работали с этой серией руководств по порядку, вы можете добавить класс section-heading в файл styles.css вот так:

. . .

.section-heading {

  text-align:center;

  color:#102C4E;

  margin-top: 150px;

  margin-bottom:70px;

  font-size: 35px;

}

Сохраните файл index.html и загрузите его в браузере. Теперь у вас должен быть заголовок Experience после разрыва между разделами.

Оформление широкого столбца и таблицы

Затем нам нужно создать классы, которые позволят нам оформить широкий белый столбец и таблицу внутри него. Добавьте следующий фрагмент кода в конец файла styles.css:

. . .

/* Wide column */

.column-1 {

  width: 90%;

  height: auto;

  padding-top:70px;

  padding-left:70px;

  padding-bottom:70px;

  margin:auto;

  margin-bottom:50px;

  margin-top: 75px;

  background-color:white;

}

/* Table formatting */

.table-style {

  width:100%;

  border-spacing: 24px;

}

В первом наборе объявлены правила стиля для класса column-1. Обратите внимание, мы указали ширину в процентах, чтобы столбец изменял размер в соответствии с шириной области просмотра. Параметр height имеет значение auto, что позволяет таблице регулировать свою высоту в соответствии с требованиями к высоте HTML-контента, который находится внутри. Также мы создали правило, чтобы сделать цвет фона для <div> белым.

Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов

Во втором наборе определяется класс table-style и ряд правил. Объявление width:100% заставляет таблицу занимать всю ширину контейнера, в котором она находится. Объявление border-spacing:24px помещает между ячейками таблицы 24 пикселя, позволяя контенту занять всю ширину столбца. Если бы мы не добавили это правило, каждая из ячеек таблицы была бы намного ближе друг к другу.

Создание столбца и таблицы

Теперь давайте добавим столбец и таблицу в файл HTML. Сохраните файл styles.css, вернитесь к index.html и добавьте следующий фрагмент кода чуть ниже строки <h2 class=»section-heading»>Experience</h2>:

. . .

<div class="column-1">

  <h2>Employment</h2>

  <table class="table-style">

    <tr>

      <td>Freelance designer</td>

      <td>MyFirstJob</td>

      <td>2015-present</td>

   </tr>

    <tr>

      <td>Lead designer</td>

      <td>MyThirdJob</td>

      <td>2019-2020</td>

   </tr>

   <tr>

      <td> Lead designer </td>

      <td>MySecondJob</td>

      <td>2018-2019</td>

   </tr>

   <tr>

      <td>Web designer</td>

      <td>AnotherJob</td>

      <td>2017-2018</td>

   </tr>

   <tr>

      <td>Assistant designer</td>

      <td>OneMoreJob</td>

      <td>2016-2017</td>

   </tr>

  </table>

 </div>

</div>

Мы добавили контейнер <div>, стилизованный в соответствии с классом column-1, и поместили внутри него HTML-таблицу, стилизованную согласно классу table-style. Внутри таблицы мы разместили свое резюме. Тег <tr> открывает строку таблицы, в которую вставлены наборы данных (помеченные тегом <td>).

Читайте также: Создание таблиц в HTML

Сохраните оба файла и перезагрузите веб-страницу в браузере. Теперь на странице будет один широкий столбец, содержащий внутри таблицу с четырьмя строками и тремя столбцами.

Обратите внимание, первые три элемента <td> вставляются между первым набором тегов <tr>. Вы можете добавлять новые строки, используя тот же формат данных, и высота столбца будет соответствующим образом корректироваться, поскольку мы установили в height значение auto в классе column-1.Также можно добавить дополнительные столбцы, для этого нужно создать новые элементы <td> внутри строк <tr>.

Заключение

Мы создали и оформили таблицу в структурированном макете с помощью CSS. Поэкспериментируйте с размерами таблицы и количеством строк и столбцов самостоятельно, чтобы научиться работать с таблицами.

Tags: , ,

Добавить комментарий