html和css设计静态网页
时间: 2023-12-29 21:02:07 浏览: 92
HTML和CSS是用于网页设计的两种基本技术。HTML是用于创建网页结构和内容的标记语言,而CSS则用于控制网页的样式和布局。下面是一个简单的HTML和CSS设计静态网页的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Static Webpage</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>My Static Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam eget bibendum bibendum, velit elit bibendum augue, eget bibendum enim ligula vel nunc. Sed euismod, diam eget bibendum bibendum, velit elit bibendum augue, eget bibendum enim ligula vel nunc.</p>
</article>
</section>
<footer>
<p>© 2021 My Static Webpage</p>
</footer>
</body>
</html>
```
这个例子包括一个简单的网页结构,包括页眉、导航、主要内容和页脚。CSS用于控制网页的样式和布局,包括背景颜色、字体、边框、阴影等。这个例子只是一个简单的示例,实际上可以使用HTML和CSS创建更复杂的网页。
阅读全文