Создайте адаптивную главную страницу новостного сайта

Введение

В этом проекте вы научитесь создавать главную страницу сайта LabEx Daily. Вам будет поручено настроить структуру HTML и стилизовать различные разделы главной страницы с использованием CSS.

👀 Предпросмотр

Предпросмотр главной страницы LabEx Daily

🎯 Задачи

В этом проекте вы научитесь:

Настраивать структуру HTML для главной страницы LabEx Daily
Стилизовать раздел заголовка, включая логотип и кнопки навигации
Стилизовать раздел баннера, включая изображение телефона и область контента
Стилизовать раздел заголовков вкладок, включая текст "Последние новости" и "Больше"
Стилизовать раздел списка новостей, включая макет элементов новостей и кнопку "Больше"
Стилизовать раздел подвала, включая левую и правую части

🏆 Достижения

После завершения этого проекта вы сможете:

Создать адаптивную и визуально привлекательную главную страницу для сайта с новостями
Использовать CSS для стилизации различных разделов веб-страницы
Размещать и выравнивать элементы с использованием CSS
Применять различные свойства CSS для достижения желаемого дизайна

Настройка структуры проекта

В этом шаге вы настроите структуру проекта и подготовите необходимые файлы и папки.

Начальный код для этого вопроса уже предоставлен. Откройте среду разработки, и структура каталогов будет выглядеть следующим образом:

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

где:

css/style.css - это файл стилей, который необходимо завершить для этого задания.
images содержит файлы изображений, используемые в проекте.
index.html - это главная страница проекта LabEx Daily.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее, откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Пожалуйста, завершите файл стилей css/style.css (не изменяйте базовый css стиль, уже заданный), чтобы главная страница LabEx Daily выглядела следующим образом (общая ширина страницы - 1024px):

Описание изображения

Стилизовать заголовок

В этом шаге вы научитесь стилизовать раздел заголовка главной страницы LabEx Daily. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Добавьте следующее правило CSS после /* TODO */, чтобы настроить стиль заголовка:

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

Эти правила CSS стилизуют заголовок, включая логотип LabEx Daily, кнопку "APP Download" и их эффект наведения.

Стилизовать баннер

В этом шаге вы научитесь стилизовать раздел баннера главной страницы LabEx Daily. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Добавьте следующие правила CSS в файл css/style.css:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

Эти правила CSS стилизуют раздел баннера, включая цвет фона, позиционирование изображения телефона и область контента с заголовком и описанием.

Стилизовать заголовок вкладки

В этом шаге вы научитесь стилизовать раздел заголовка вкладок главной страницы LabEx Daily. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Добавьте следующие правила CSS в файл css/style.css:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

Эти правила CSS стилизуют раздел заголовка вкладок, включая цвет фона, позиционирование текста "Просмотр содержимого" и "Последнее содержимое" и их соответствующие стили.

Стилизовать список новостей

В этом шаге вы научитесь стилизовать раздел списка новостей главной страницы LabEx Daily. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Добавьте следующие правила CSS в файл css/style.css:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

Эти правила CSS стилизуют раздел списка новостей, включая макет элементов новостей, размер и позиционирование изображений, стили текста и кнопку "Посмотреть больше в приложении!" внизу.

Стилизовать подвал

В этом финальном шаге вы научитесь стилизовать раздел подвала главной страницы LabEx Daily. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Добавьте следующие правила CSS в файл css/style.css:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

Эти правила CSS стилизуют раздел подвала, включая цвет фона, макет левой и правой секций, стили текста и позиционирование изображения QR-кода.

Поздравляем! Теперь вы завершили стилизацию главной страницы LabEx Daily. Теперь вы можете открыть файл index.html в вашем веб-браузере, чтобы увидеть окончательный результат.

LabEx Daily homepage footer

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

Создание адаптивной главной страницы новостного сайта