用css和html生成一个网页
时间: 2023-10-05 07:06:58 浏览: 27
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
h1 {
margin: 0;
padding: 10px;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
margin: 0 5px;
border-radius: 5px;
}
nav a:hover {
background-color: #fff;
color: #444;
}
section {
padding: 20px;
margin: 20px;
background-color: #fff;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>My Webpage</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome to my webpage</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius quam vel tincidunt ullamcorper. Vivamus commodo elit euismod, aliquam enim at, pretium tellus. Fusce congue, velit id porta tincidunt, quam nisi bibendum sapien, non malesuada ipsum dolor at ante. Nullam sapien mi, ultricies vel arcu in, vehicula iaculis risus. Nam sapien felis, feugiat ac nibh eu, feugiat pretium velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et sapien in tellus condimentum malesuada. Fusce congue euismod magna, at tristique est bibendum a. Etiam euismod, leo vel feugiat ullamcorper, mi neque elementum eros, auctor suscipit mauris purus eu quam. Sed ultrices mauris non lacus imperdiet, non pellentesque lectus pellentesque.</p>
</section>
<footer>
<p>Copyright © 2021 My Webpage</p>
</footer>
</body>
</html>