报纸样式的网页
时间: 2023-10-21 08:12:35 浏览: 39
您可以使用HTML和CSS来创建报纸样式的网页。以下是一个示例代码,您可以根据自己的需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>Newspaper Style Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.article {
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
margin-bottom: 40px;
}
.article:last-child {
border-bottom: none;
margin-bottom: 0;
}
.article h2 {
font-size: 28px;
margin-top: 0;
margin-bottom: 10px;
}
.article p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
}
.article img {
display: block;
max-width: 100%;
margin: 0 auto;
margin-bottom: 20px;
}
.author {
font-size: 14px;
font-style: italic;
color: #888;
}
</style>
</head>
<body>
<div class="container">
<h1>News Today</h1>
<div class="article">
<h2>Breaking News</h2>
<img src="https://via.placeholder.com/800x400" alt="Breaking News">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel ullamcorper enim, nec gravida est. Aliquam venenatis bibendum odio, ac lobortis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla et enim libero. </p>
<p class="author">By John Doe</p>
</div>
<div class="article">
<h2>Local News</h2>
<img src="https://via.placeholder.com/800x400" alt="Local News">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel ullamcorper enim, nec gravida est. Aliquam venenatis bibendum odio, ac lobortis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla et enim libero. </p>
<p class="author">By Jane Smith</p>
</div>
<div class="article">
<h2>Sports News</h2>
<img src="https://via.placeholder.com/800x400" alt="Sports News">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel ullamcorper enim, nec gravida est. Aliquam venenatis bibendum odio, ac lobortis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla et enim libero. </p>
<p class="author">By Mark Johnson</p>
</div>
</div>
</body>
</html>
```
请注意,此代码只是一个简单的示例,您可以根据自己的需求进行修改和扩展。