Как добавить описание образования и навыков с помощью CSS
Development | Комментировать запись
Эта серия покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все руководства по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале с помощью HTML и CSS мы создадим на нашем сайте разделы Education и Skills. Для этого мы создадим CSS-класс, который будет оформлять два расположенных рядом одинаковых поля с контентом.
Всю условную информацию вы можете заменить своей собственной. Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.
Требования
Для работы вам нужно подготовить среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Создание и оформление полей
Для начала откройте свой файл styles.css, а затем скопируйте и вставьте в него следующие строки:
. . .
/* Fifth section */
.column-2a {
float: left;
width: 45%;
padding: 40px;
padding-left:70px;
padding-right: 70px;
padding-bottom:60px;
height:450px;
margin:30px;
margin-right:30px;
margin-bottom: 40px;
background-color:white;
}
Этот фрагмент кода создает класс column-2a. Он похож на класс column-2, который мы создавали для стилизации раздела About в предыдущем руководстве этой серии, только для его высоты установлено значение 450px. Если вы измените объем контента в этом поле, вам, возможно, придется соответствующим образом отрегулировать и высоту, иначе поле может переполниться или срезаться.
Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов
Прежде чем продолжить, сохраните файл styles.css.
Затем перейдите к файлу index.html и вставьте следующий фрагмент кода после последнего закрывающего тега </div>:
. . .
<!--Section 5: Education and Skills-->
<h2>Education</h2>
<table class="table-style">
<div class="column-2a">
<tr>
<td>Barnacle Bootcamp</td>
<td>2020</td>
</tr>
<tr>
<td>Seaweed University</td>
<td>2019-2020</td>
</tr>
<tr>
<td>Highwater High School</td>
<td>2018-2019</td>
</tr>
<tr>
<td>Middle-Sized Pond Middle School</td>
<td>2017-2018</td>
</tr>
<tr>
<td>Minnow Elementary School</td>
<td>2016-2017</td>
</tr>
<tr>
<td>Phytoplankton Preschool</td>
<td>2015-2016</td>
</tr>
</table>
</div>
Этот фрагмент кода создает столбец, оформленный с помощью класса column-2a, и вставляет таблицу, стилизованную под класс table-style, созданный в предыдущем руководстве. Внутри таблицы мы разместили фиктивную историю образования. Тег <tr> открывает строку таблицы, в которую вставлены три набора табличных данных (внутри тега <td>).
Читайте также: Создание таблиц в HTML
Сохраните файл и перезагрузите браузер, чтобы убедиться, что таблица отображается правильно. У вас должна получиться таблица с заголовком Education, первый столбец которой содержит название учреждения, а второй – годы обучения. Таблица будет находиться в левой части экрана.
Следующим шагом будет добавление второй таблицы, в которой будут перечислены навыки. Вернитесь в файл index.html и вставьте следующий фрагмент кода после последнего закрывающего тега </div>:
. . .
<div class="column-2a">
<h2>Skills</h2>
<table class="table-style">
<tr>
<td>Social Media</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Public Speaking</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Internet Ethics Ambassador</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Content production</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td> HTML</td>
<td>⭐⭐⭐</td>
</tr>
<tr>
<td> CSS</td>
<td>⭐⭐⭐</td>
</tr>
</table>
</div>
Этот фрагмент кода работает точно так же, как предыдущий: он создает поле, стилизованное согласно классу column-2a, и вставляет в него таблицу, оформленную с помощью table-style. Обратите внимание, что для добавления звездочек мы используем эмодзи. В HTML-контенте можно использовать любые эмодзи.
Сохраните файл и перезагрузите страницу, чтобы убедиться, что таблица отображается правильно. Теперь в правой части экрана, которая до этого была пуста, появится таблица Skills: в первом столбце перечислены навыки, а во втором с помощью звездочек визуализирован уровень владения тем или иным навыком.
Заключение
Сегодня с помощью таблиц стилей вы добавили на свой сайт еще один раздел. Вы можете самостоятельно поэкспериментировать с изменением размеров и добавлением новых строк и столбцов.
Tags: CSS, CSS-practice, HTML