Загрузка…
Через несколько секунд всё будет готово
- Теория
- Теория
Меняем меню сайта на PHP
У тебя неплохо получилось! Вот новая задача: Босс хочет добавить ссылку на блог в шапку сайта. Добавь пункт «Блог» в меню.
Обычно сайты состоят из нескольких HTML-страниц. Подробнее вы узнаете об этом в тренажёре «Знакомство с HTML и CSS». Чтобы поправить шапку на всём сайте, надо пройтись по разметке каждой страницы и внести изменение. Чем больше страниц на сайте, тем больше времени может занять такая работа.
Наши страницы собираются из компонентов с помощью PHP. Во всех сценариях мы используем один и тот же компонент шапки component/header.php. Поэтому нам достаточно внести правку в этом файле, и шапка изменится на всех страницах, где подключён этот компонент.
Добавим пункт «Блог» в меню и проверим, что шапка обновилась на всех страницах магазина.
Все файлы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Интернет-магазин товаров для дома</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="site-navigation">
<a class="logo-link" href="index.php">
<img src="img/logo-full.svg" width="62" height="17" alt="Логотип магазина gloevk">
</a>
<ul class="navigation-list">
<li><a href="catalog.php">Каталог</a></li>
<li><a href="delivery.html">Доставка</a></li>
<li><a href="contacts.html">Контакты</a></li>
<!-- <li><a href="blog.html">Блог</a></li> -->
</ul>
</nav>
</header>
<?php
require('components/header.php');
require('components/company_info.php');
require('components/footer.php');
<?php
require('components/header.php');
require('components/products_list.php');
require('components/footer.php');
?>
<section class="intro">
<div class="container">
<h1 class="intro-title">Комфорт и уют в <b>вашей</b> квартире</h1>
<p>Разнообразные товары для дома с доставкой по всей планете</p>
</div>
</section>
<section class="popular-products">
<div class="container">
<h2 class="visually-hidden">Популярные товары</h2>
<ul class="products-list">
<li>
<a class="product-card" href="product.php?product_id=1">
<h3>Мсеюлида</h3>
<p>лампа напольная</p>
<span class="price"><del>289</del> 288</span>
<img src="img/item-mseyulida.jpg" width="156" height="120" alt="Напольная лампа «Мсеюлида»">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=2">
<h3>Рмаериби</h3>
<p>диван трёхместный</p>
<span class="price">5870</span>
<img src="img/item-rmaeribi.jpg" width="156" height="120" alt="Трёхместный диван «Рмаериби»">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=3">
<h3>Блетуб</h3>
<p>люстра потолочная</p>
<span class="price">1360</span>
<img src="img/item-bletub.jpg" width="156" height="120" alt="Потолочная люстра «Блетуб»">
</a>
</li>
</ul>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="features-title">Что <b>выделяет</b> нас среди конкурентов?</h2>
<ul class="features-list">
<li class="feature-unique">Уникальные товары не имеют аналогов</li>
<li class="feature-organic">Используем только природные материалы</li>
<li class="feature-protected">Устойчивы к кошачьим зубам и когтям</li>
</ul>
</div>
</section>
<footer class="site-footer">
<div class="container">
<ul class="navigation-list">
<li><a href="catalog.php">Каталог</a></li>
<li><a href="delivery.html">Доставка</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
<ul class="social-list">
<li>
<a class="social-link-twitter" href="https://twitter.com">
<span class="visually-hidden">Твиттер</span>
</a>
</li>
<li>
<a class="social-link-instagram" href="https://instagram.com">
<span class="visually-hidden">Инстаграм</span>
</a>
</li>
<li>
<a class="social-link-facebook" href="https://facebook.com">
<span class="visually-hidden">Фейсбук</span>
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
<section class="item">
<div class="container">
<h1 class="item-title">Название товара</h1>
<img src="img/placeholder.png" width="510" height="392" alt="Заготовка для фото товара">
</div>
</section>
<section class="catalog">
<div class="container">
<h1 class="catalog-title">Каталог товаров</h1>
<ul class="products-list">
<li>
<a class="product-card" href="product.php?product_id=1">
<h3>Мсеюлида</h3>
<p>лампа напольная</p>
<span class="price"><del>289</del> 288</span>
<img src="img/item-mseyulida.jpg" width="156" height="120" alt="Напольная лампа «Мсеюлида»">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=2">
<h3>Рмаериби</h3>
<p>диван трёхместный</p>
<span class="price">5870</span>
<img src="img/item-rmaeribi.jpg" width="156" height="120" alt="Трёхместный диван «Рмаериби»">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=3">
<h3>Блетуб</h3>
<p>люстра потолочная</p>
<span class="price">1360</span>
<img src="img/item-bletub.jpg" width="156" height="120" alt="Потолочная люстра «Блетуб»">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=4">
<h3>Ннулм</h3>
<p>рабочий стол</p>
<span class="price">6832</span>
<img src="img/item-nnulm.jpg" width="156" height="120" alt="Компьютерный стол «Ннулм»">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=5">
<h3>Асусмер</h3>
<p>подвесная кровать</p>
<span class="price"><del>21320</del> 19320</span>
<img src="img/item-asusmer.jpg" width="156" height="120" alt="Подвесная кровать «Асусмер»">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=6">
<h3>Тре</h3>
<p>набор мебели</p>
<span class="price">32560</span>
<img src="img/item-tre.jpg" width="156" height="120" alt="Набор мебели «Тре»">
</a>
</li>
</ul>
</div>
</section>
<?php
require('components/header.php');
require('components/product_info.php');
require('components/footer.php');
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
body {
min-width: 550px;
padding: 0;
margin: 0;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 13px;
line-height: 18px;
}
a {
text-decoration: none;
color: inherit;
}
.container {
width: 510px;
padding: 0 20px;
margin: 0 auto;
}
.site-navigation {
display: flex;
width: 510px;
padding: 0 20px;
margin: 0 auto;
justify-content: space-between;
}
.site-header {
position: relative;
z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.logo-link:hover,
.logo-link:focus {
opacity: 0.5;
}
.logo-link:active {
opacity: 0.3;
}
.logo-link img {
margin: 10px 0;
}
.navigation-list {
display: flex;
margin: 0 -15px 0 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
justify-content: flex-end;
}
.navigation-list a:hover,
.navigation-list a:focus {
opacity: 0.5;
}
.navigation-list a:active {
color: #ff8a00;
}
.navigation-list a {
display: block;
padding: 12px 15px 11px;
color: #845927;
}
.intro .container {
z-index: -1;
min-height: 150px;
margin-bottom: 20px;
padding: 15px 0 0;
box-sizing: border-box;
background-image: url("img/index-background.jpg");
background-repeat: no-repeat;
background-position: top right;
}
.intro-title {
width: 240px;
padding: 0;
margin: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.intro-title b,
.features-title b,
.delivery-text b {
font-weight: 400;
color: #ff8a00;
}
.intro p {
width: 210px;
margin: 8px 0 10px;
padding: 0;
line-height: 20px;
}
.quote {
display: block;
position: relative;
padding: 0 0 0 33px;
margin: 20px 0 20px;
font-family: "Georgia", "Times", serif;
font-style: italic;
}
.quote p {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 24px;
quotes: none;
}
.quote::before {
position: absolute;
content: "«";
top: 0;
left: 0;
font-size: 36px;
color: #ff8a00;
}
.author {
display: block;
padding: 0;
margin: 4px 0;
}
.popular-products {
margin: 0;
background-color: #fff3e5;
}
.delivery,
.custom,
.contacts,
.catalog,
.item {
margin: 15px 0 10px;
}
.delivery-title,
.custom-title,
.contacts-title,
.catalog-title,
.item-title {
padding: 0;
margin: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.custom-columns {
display: flex;
flex-grow: 0;
}
.custom-columns img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 20px 30px 0;
min-height: 200px;
}
.custom-columns div {
margin: 5px 0 20px;
}
.products-list {
display: flex;
padding: 20px 0 0;
margin: 0 0 0 -20px;
flex-wrap: wrap;
flex-shrink: 0;
list-style: none;
}
.products-list li {
display: flex;
}
.product-card {
position: relative;
display: flex;
width: 132px;
margin-bottom: 20px;
margin-left: 20px;
padding: 124px 12px 12px;
flex-direction: column;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-new {
position: relative;
}
.product-card-new::after {
position: absolute;
content: "new";
width: 34px;
height: 15px;
top: 8px;
right: -2px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px 0 0 4px;
}
.product-card:hover,
.product-card:focus {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.product-card:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.product-card img {
position: absolute;
top: 0;
left: 0;
order: -1;
}
.product-card h3 {
margin: 0 0 2px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 15px;
line-height: 18px;
font-weight: 400;
}
.product-card p {
margin: 0 0 8px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-size: 13px;
line-height: 16px;
}
.price {
margin-top: auto;
font-weight: 700;
font-size: 15px;
color: #ff8a00;
}
.price del {
margin-right: 2px;
font-weight: 400;
font-size: 13px;
color: #000000;
text-decoration: line-through;
}
span.price::after,
.price del::after {
content: "₽";
}
span.price:empty::after,
.price del:empty::after {
content: "";
}
.map-link {
display: block;
margin-top: -20px;
margin-bottom: 30px;
color: #845927;
}
.contacts img,
.item img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
}
.contacts-info {
margin: -10px 0 30px;
}
.contacts-info p {
position: relative;
padding-left: 16px;
margin: 12px 0;
}
.contact-phone::before {
position: absolute;
content: "";
width: 10px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-phone.svg");
}
.contact-address::before {
position: absolute;
content: "";
width: 9px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-pin.svg");
}
.delivery-background {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
background-image: url("img/delivery-background.jpg");
background-repeat: no-repeat;
background-position: center left;
}
.delivery-text {
width: 210px;
margin-left: auto;
padding: 16px 20px 20px;
background-color: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.delivery-text p {
margin: 8px;
padding: 0;
}
.features {
padding-top: 20px;
padding-bottom: 10px;
}
.features-title,
.products-title {
margin: 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 20px;
line-height: 24px;
font-weight: 400;
}
.features-list {
display: flex;
padding: 0;
margin: 14px 0 0;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.features-list li {
position: relative;
width: 142px;
margin-bottom: 10px;
}
.features-list li::before {
position: absolute;
content: "";
top: 2px;
left: 0;
}
.feature-unique {
padding-left: 22px;
}
.feature-unique::before {
width: 16px;
height: 12px;
background-image: url("img/feature-unique.svg");
}
.feature-organic {
padding-left: 25px;
}
.feature-organic::before {
width: 19px;
height: 12px;
background-image: url("img/feature-organic.svg");
}
.feature-protected {
padding-left: 16px;
}
.feature-protected::before {
width: 10px;
height: 12px;
background-image: url("img/feature-protected.svg");
}
.site-footer {
background-color: #847462;
}
.site-footer .container {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
.site-footer .navigation-list {
margin-right: 15px;
margin-left: -15px;
justify-content: left;
}
.site-footer a {
display: block;
margin: 0;
padding: 14px 15px;
color: #ffffff;
}
.social-list {
display: flex;
width: 110px;
padding: 0;
margin: 0 -10px 2px;
justify-content: end;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.social-list a {
display: block;
width: 14px;
height: 14px;
padding: 10px;
background-repeat: no-repeat;
background-position: center;
}
.social-link-twitter {
background-image: url("img/icon-twitter.svg");
}
.social-link-instagram {
background-image: url("img/icon-instagram.svg");
}
.social-link-facebook {
background-image: url("img/icon-facebook.svg");
}
.social-list a:hover,
.social-list a:focus {
opacity: 0.5;
}
.social-list a:active {
opacity: 0.3;
}
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Произошла ошибка
из-за недостатка ресурсов или ошибки в программе, попробуйте исправить код для повторного запуска
100%
Консоль
Консоль