html+css设计一个新闻网页
时间: 2023-11-25 10:07:36 浏览: 33
抱歉,作为AI语言模型,我无法呈现视觉效果,但我可以为您提供一些基本的HTML和CSS代码,以帮助您开始设计您的新闻网页:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>News Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
</header>
<main>
<section class="featured">
<h2>Featured Article</h2>
<article>
<img src="featured-image.jpg" alt="Featured Article Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan. Donec rhoncus nulla vel ante lobortis, sit amet egestas nunc fermentum. Sed at odio vel nisi maximus accumsan ut in velit.</p>
<a href="#">Read More</a>
</article>
</section>
<section class="latest">
<h2>Latest News</h2>
<article>
<img src="latest-image.jpg" alt="Latest News Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
<article>
<img src="latest-image.jpg" alt="Latest News Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
<article>
<img src="latest-image.jpg" alt="Latest News Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
</section>
<section class="popular">
<h2>Popular Articles</h2>
<article>
<img src="popular-image.jpg" alt="Popular Article Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
<article>
<img src="popular-image.jpg" alt="Popular Article Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
<article>
<img src="popular-image.jpg" alt="Popular Article Image">
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor nunc vel sapien ultricies, at iaculis tortor accumsan.</p>
<a href="#">Read More</a>
</article>
</section>
</main>
<footer>
<p>© 2021 News Website</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
nav ul {
display: flex;
}
nav li {
margin: 0 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.featured {
display: flex;
flex-direction: column;
align-items: center;
}
.featured h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.featured img {
max-width: 100%;
margin-bottom: 1rem;
}
.featured h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.latest {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin-top: 2rem;
}
.latest h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.latest article {
width: 30%;
margin: 0 1.5%;
background-color: #eee;
padding: 1rem;
margin-bottom: 1.5rem;
}
.latest img {
max-width: 100%;
margin-bottom: 1rem;
}
.latest h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.latest p {
font-size: 1rem;
margin-bottom: 1rem;
}
.latest a {
color: #333;
text-decoration: none;
background-color: #fff;
padding: 0.5rem 1rem;
border-radius: 5px;
}
.popular {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin-top: 2rem;
}
.popular h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.popular article {
width: 30%;
margin: 0 1.5%;
background-color: #eee;
padding: 1rem;
margin-bottom: 1.5rem;
}
.popular img {
max-width: 100%;
margin-bottom: 1rem;
}
.popular h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.popular p {
font-size: 1rem;
margin-bottom: 1rem;
}
.popular a {
color: #333;
text-decoration: none;
background-color: #fff;
padding: 0.5rem 1rem;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
```