Добавление резюме на сайт с помощью CSS
Development | Комментировать запись
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью 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: CSS, CSS-practice, HTML