web前端简易网站代码
时间: 2023-08-03 09:09:41 浏览: 50
以下是一个简单的 Web 前端网站的 HTML、CSS 和 JavaScript 代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nulla tempor, rhoncus sapien sed, pharetra nibh. Sed luctus, risus eget commodo ornare, sapien quam vulputate quam, eu tristique velit velit vel justo.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
color: #333;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
JavaScript 代码:
```javascript
// 可选的 JavaScript 代码,用于与用户交互或实现特定功能
```