Введение
В этом лабе сосредоточьтесь на основной области содержания вашего сайта. Эта секция демонстрирует услуги "Дом для питомцев".
Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 93%. Он получил 98% положительных отзывов от учащихся.
Разметка 'О нас'
Раздел "О нас" можно разделить на две части: часть с изображением и часть с текстовым содержанием. Для добавления изображения используйте тег <img>, для добавления заголовка - тег <h2>, для добавления текстового абзаца - тег <p>.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Содержание шапки-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Главная</li>
<li>О нас</li>
<li>Показать</li>
<li>Контакты</li>
</ul>
</nav>
</header>
<!--Основное содержание-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Добро пожаловать</h1>
<p>
~ На этом сайте предлагаются персональные услуги для питомцев. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="просто кошка" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>О нас</h2>
<p>
Мы занимаемся созданием сообщества счастливых питомцев и еще более
счастливых хозяев питомцев. <br /><br />
Наша выдающаяся команда по обслуживанию клиентов стремится
обеспечить вам беспрепятственный опыт покупок, предоставляя
профессиональную поддержку от просмотра товаров до доставки и
дальнейших услуг. <br /><br />Мы понимаем важность быстрой и
надежной доставки, поэтому предлагаем варианты быстрой доставки и
возврат товаров без проблем.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
</div>
</main>
<!--Содержание подвала-->
<footer></footer>
</body>
</html>
- Глобальный атрибут
idопределяет идентификатор (ID), который должен быть уникальным на всей странице. Он похож наclass, так как является именем элемента, но отличие заключается в том, что id уникален, и атрибут id также позволяет создавать закладки, которые мы будем использовать позже в эксперименте. - HTML-элементы
<h1>по<h6>представляют шесть уровней заголовков разделов. - HTML-элемент
<br>создает перенос строки в тексте (возврат каретки). Он полезен для написания стихотворения или адреса, где разделение строк имеет значение.
Разметка 'Показать'
На странице "Показать", которая состоит в основном из изображений и текста, мы можем разделить эту страницу на три раздела, каждый из которых состоит из изображений и текста.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Содержание шапки-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Главная</li>
<li>О нас</li>
<li>Показать</li>
<li>Контакты</li>
</ul>
</nav>
</header>
<!--Основное содержание-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Добро пожаловать</h1>
<p>
~ На этом сайте предлагаются персональные услуги для питомцев. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="просто кошка" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>О нас</h2>
<p>
Мы занимаемся созданием сообщества счастливых питомцев и еще более
счастливых хозяев питомцев. <br /><br />
Наша выдающаяся команда по обслуживанию клиентов стремится
обеспечить вам беспрепятственный опыт покупок, предоставляя
профессиональную поддержку от просмотра товаров до доставки и
дальнейших услуг. <br /><br />Мы понимаем важность быстрой и
надежной доставки, поэтому предлагаем варианты быстрой доставки и
возврат товаров без проблем.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Показать</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img
src="images/service-1.png"
alt="Услуги по прогулке собак"
/>
<figcaption>
Предоставляем услуги по уходу за питомцами.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-2.png"
alt="Услуги ветеринарных осмотров питомцев"
/>
<figcaption>
Предоставляем услуги ветеринарных осмотров питомцев.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-3.png"
alt="Услуги по мойке питомцев"
/>
<figcaption>Предоставляем услуги по мойке питомцев.</figcaption>
</figure>
</div>
</div>
</section>
</div>
</main>
<!--Содержание подвала-->
<footer></footer>
</body>
</html>
- HTML-элемент
<figure>представляет собой автономное содержание, возможно с необязательной подписью, которая задается с использованием элемента<figcaption>. Фигура, ее подпись и ее содержимое ссылаются как на единый блок.
Резюме
В этой лабораторной работе вы получили практику в разработке основной части сайта, где вы представили услуги "Дома для питомцев". Этот этап был至关重要 для того, чтобы детально описать, что предлагает сайт, и повысить его ценность для посетителей за счет структурированного контента и эстетики.
