HTML+CSS新闻网站页面示例 - 如何使用前端技术构建新闻页面 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>新闻页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
<pre><code>.header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.header h1 {
  margin: 0;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.article {
  margin-bottom: 20px;
}

.article h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.article p {
  margin: 10px 0;
  color: #666;
}

.article img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.article .author {
  color: #999;
}

.article .date {
  color: #999;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}
</code></pre>
  </style>
</head>
<body>
  <div class="header">
    <h1>新闻网站</h1>
  </div>
  <div class="container">
    <div class="article">
      <h2>示例新闻标题</h2>
      <p>示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容</p>
      <img src="news-image.jpg" alt="新闻图片">
      <p class="author">作者：示例作者</p>
      <p class="date">日期：2021-01-01</p>
    </div>
<pre><code>&lt;div class=&quot;article&quot;&gt;
  &lt;h2&gt;示例新闻标题&lt;/h2&gt;
  &lt;p&gt;示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容&lt;/p&gt;
  &lt;img src=&quot;news-image.jpg&quot; alt=&quot;新闻图片&quot;&gt;
  &lt;p class=&quot;author&quot;&gt;作者：示例作者&lt;/p&gt;
  &lt;p class=&quot;date&quot;&gt;日期：2021-01-01&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;article&quot;&gt;
  &lt;h2&gt;示例新闻标题&lt;/h2&gt;
  &lt;p&gt;示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容示例新闻内容&lt;/p&gt;
  &lt;img src=&quot;news-image.jpg&quot; alt=&quot;新闻图片&quot;&gt;
  &lt;p class=&quot;author&quot;&gt;作者：示例作者&lt;/p&gt;
  &lt;p class=&quot;date&quot;&gt;日期：2021-01-01&lt;/p&gt;
&lt;/div&gt;
</code></pre>
  </div>
  <div class="footer">
    &copy; 2021 新闻网站. All rights reserved.
  </div>
</body>
</html>