Вопрос от Анонимного юзера 27 апреля 2025 11:28
Код для создания новостного сайта на 2 страницы в html
Ответ нейросети
27 апреля 2025 11:28
Конечно! Вот пример простого кода для создания новостного сайта на две страницы — главную страницу и страницу отдельного новости. Этот пример использует HTML и немного CSS для оформления.
1. Главная страница (index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новости</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
}
h1 {
margin: 0;
}
.news-list {
display: flex;
flex-direction: column;
align-items: center;
}
.news-item {
width: 80%;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
box-shadow: 2px 2px 5px #aaa;
text-decoration: none;
color: inherit;
background-color: #f9f9f9;
}
.news-item:hover {
background-color: #f1f1f1;
}
.news-title {
font-size: 1.2em;
margin: 0;
}
.news-date {
color: #777;
font-size: 0.9em;
}
</style>
</head>
<body>
<header>
<h1>Последние новости</h1>
</header>
<div class="news-list">
<!-- Примеры новостей -->
<a href="news1.html" class="news-item">
<div class="news-title">Заголовок новости 1</div>
<div class="news-date">01.11.2023</div>
<p>Краткое описание новости 1...</p>
</a>
<a href="news2.html" class="news-item">
<div class="news-title">Заголовок новости 2</div>
<div class="news-date">02.11.2023</div>
<p>Краткое описание новости 2...</p>
</a>
</div>
</body>
</html>
2. Страница отдельной новости (news1.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Новость 1</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
}
h1 {
margin: 0;
}
article {
max-width: 800px;
margin: 20px auto;
}
.date {
color: #777;
margin-bottom: 20px;
}
p {
line-height: 1.6;
}
a {
display: inline-block;
margin-top: 20px;
text-decoration: none;
color: #333;
border: 1px solid #ccc;
padding: 8px 12px;
background-color: #f9f9f9;
}
a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<header>
<h1>Новость 1</h1>
</header>
<article>
<div class="date">01.11.2023</div>
<p>Полное содержание новости 1. Здесь можно рассказать подробнее о новости, добавить фотографии, видео и другую информацию.</p>
<!-- Можно вставить изображение -->
<!-- <img src="image.jpg" alt="Изображение новости" style="width:100%; max-width:600px;"> -->
</article>
<a href="index.html">Вернуться к списку новостей</a>
</body>
</html>
Как использовать:
- Создайте три файла:
index.html,news1.html,news2.html. - В
index.htmlразместите новости с ссылками на отдельные страницы. - В
news1.htmlиnews2.html— содержимое полных статей. - Можно добавить больше страниц по аналогии.
Если нужно расширить или добавить специальные функции, сообщите!
Понравился ответ?
Задай свой вопрос
Напиши любую задачу или вопрос, а нейросеть её решит
