【CSS】新闻页面制作案例一

作者：System 时间：2024年08月15日分类：所有,css 字数：1057

以下是一个简单的新闻页面示例，使用HTML和CSS创建：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻页面示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .news-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
  }
  .news-header {
    text-align: center;
    padding: 20px 0;
  }
  .news-title {
    font-size: 24px;
  }
  .news-date {
    color: #888;
  }
  .news-content {
    padding: 20px 0;
    line-height: 1.5;
  }
</style>
</head>
<body>
<div class="news-page">
  <div class="news-header">
    <h1 class="news-title">这是一个重要新闻的标题</h1>
    <div class="news-date">2023年6月15日</div>
  </div>
  <div class="news-content">
    <p>这里是新闻的内容部分，可以包含图片、视频和文字。</p>
    <!-- 新闻内容 -->
  </div>
</div>
</body>
</html>

这个示例展示了如何使用HTML和CSS创建一个简单的新闻页面。.news-page类用于设置页面的最大宽度、居中以及内边距。.news-header类用于设置新闻标题和日期的样式，.news-title和.news-date分别用于设置标题和日期的字体和颜色。.news-content类用于设置新闻内容的样式，比如内边距和行高。这个示例提供了一个基本框架，可以根据实际需求进行扩展和设计。

【CSS】新闻页面制作案例一

评论已关闭

推荐阅读