生成一个HTML和css的5页网页
时间: 2024-03-06 22:47:15 浏览: 13
很高兴为您提供HTML和CSS的5页网页的简单示例。以下是一个简单的示例:
1. 首页 index.html
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Latest News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet enim euismod, lacinia augue sit amet, molestie ipsum. Praesent lacinia ac nunc ac varius. Cras scelerisque, est id condimentum aliquet, ipsum sapien feugiat dolor, ac ullamcorper nisl odio sed odio. </p>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
2. 关于 about.html
```html
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Our Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet enim euismod, lacinia augue sit amet, molestie ipsum. Praesent lacinia ac nunc ac varius. Cras scelerisque, est id condimentum aliquet, ipsum sapien feugiat dolor, ac ullamcorper nisl odio sed odio. </p>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
3. 服务 services.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Our Services</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>What We Offer</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Mobile App Development</li>
<li>SEO Services</li>
</ul>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
4. 作品 portfolio.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Our Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Our Portfolio</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Our Recent Work</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
5. 联系 contact.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Get in Touch</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Submit">
</form>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"],
form input[type="email"],
form textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
form input[type="submit"]:hover {
background-color: #555;
}
```
希望上述示例对您有所帮助。如果您有其他问题,欢迎继续向我提问。