Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Как сделать многостраничный сайт html css

Многостраничный сайт в HTML и CSS это сайт, который состоит из нескольких страниц с разным содержимым. Вот как создать многостраничный сайт:

  1. Создайте отдельный файл HTML для каждой страницы. Например, index.html, about.html, contact.html и т.д.
  2. Добавьте на каждую страницу общие элементы, такие как меню навигации, заголовки, подвал и т.д.
  3. Создайте файл CSS, который будет содержать общие стили для всех страниц. Например, стили для шрифтов, цветов, фона и т.д.
  4. Добавьте отдельный файл CSS для каждой страницы, который будет содержать уникальные стили для этой страницы. Например, стили для размещения контента на странице, фона, шрифта и т.д.
  5. С помощью HTML-тега <a> создайте ссылки на другие страницы сайта. Например, переместите ссылку на страницу «О нас» на главной странице, что пользователь мог перейти на страницу «О нас» по клику на ссылку.

Пример кода для приведенных выше шагов:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Главная страница</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="index.html">Главная страница</a></li>
        <li><a href="about.html">О нас</a></li>
        <li><a href="contact.html">Контакты</a></li>
      </ul>
    </nav>
    <header>
      <h1>Добро пожаловать на наш сайт!</h1>
      <p>Здесь вы найдете все, что вас интересует.</p>
    </header>
    <main>
      <p>Какой-то текст на главной странице</p>
      <a href="about.html">Узнать больше</a>
    </main>
    <footer>
      <p>&copy; 2020 Наш сайт</p>
    </footer>
  </body>
</html>

about.html

<!DOCTYPE html>
<html>
  <head>
    <title>О нас</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="about.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="index.html">Главная страница</a></li>
        <li><a href="about.html">О нас</a></li>
        <li><a href="contact.html">Контакты</a></li>
      </ul>
    </nav>
    <header>
      <h1>О нашей компании</h1>
    </header>
    <main>
      <p>Какой-то текст на странице "О нас"</p>
    </main>
    <footer>
      <p>&copy; 2020 Наш сайт</p>
    </footer>
  </body>
</html>

contact.html

<!DOCTYPE html>
<html>
  <head>
    <title>Контакты</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="contact.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="index.html">Главная страница</a></li>
        <li><a href="about.html">О нас</a></li>
        <li><a href="contact.html">Контакты</a></li>
      </ul>
    </nav>
    <header>
      <h1>Связаться с нами</h1>
    </header>
    <main>
      <p>Какой-то текст на странице "Контакты"</p>
      <ul>
        <li>Email: example@example.com</li>
        <li>Телефон: +7 (123) 456-78-90</li>
      </ul>
    </main>
    <footer>
      <p>&copy; 2020 Наш сайт</p>
    </footer>
  </body>
</html>

common.css

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  display: block;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-decoration: none;
}

header {
  background-color: #f2f2f2;
  padding: 30px;
}
header h1 {
  margin: 0;
}

main {
  padding: 30px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

index.css

main p {
  font-size: 20px;
  line-height: 1.5;
}

main a {
  display: block;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #333;
  padding: 10px;
  margin-top: 20px;
  text-decoration: none;
}

about.css

main p {
  font-size: 24px;
  line-height: 1.5;
}

contact.css

main ul {
  list-style: none;
  padding: 0;
  font-size: 24px;
  line-height: 1.5;
}

main ul li {
  margin-bottom: 10px;
}

Таким образом, создание многостраничного сайта сводится к созданию отдель

Поделиться:

Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.