简单网页设计代码
时间: 2023-08-29 07:07:46 浏览: 68
好的,以下是一个简单的 HTML 和 CSS 的示例代码,用于创建一个静态网页。你可以根据自己的需求进行修改和调整。
```HTML
<!DOCTYPE html>
<html>
<head>
<title>My Simple Webpage</title>
<style>
/* CSS样式 */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f4f4f4;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
padding: 10px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
padding: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px auto;
max-width: 960px;
padding: 0 20px;
}
section {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 20px;
width: 30%;
}
section h2 {
font-size: 24px;
margin-bottom: 10px;
}
section p {
font-size: 16px;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to my webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form action="#" method="get">
<input type="text" name="search" placeholder="Search...">
<button type="submit">Go</button>
</form>
</nav>
<main>
<section>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Integer tincidunt velit vel lorem congue, et condimentum augue porttitor.</p>
</section>
<section>
<h2>Section 3</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus sed felis auctor, ornare magna id, egestas sapien.</p>
</section>
</main>
<footer>
<p>© 2021 My Simple Webpage</p>
</footer>
</body>
</html>
```
这个静态网页包含一个简单的头部,导航栏,内容区域和页脚。你可以根据自己的需要进行修改和调整,例如更改颜色,添加新的元素等。希望对你有所帮助。
阅读全文