使用html+css实现一个静态页面(含源码)三个网页
时间: 2024-01-06 12:02:05 浏览: 42
实现静态页面需要使用HTML和CSS语言。我们可以创建三个不同的网页来展示这种技能。
首先,我们可以创建一个简单的个人主页。在HTML中,我们可以使用`<div>`标签和`<h1>`标签来创建页面的标题和内容区块。然后,利用CSS对页面的布局进行美化,比如设置背景颜色、字体样式和边框等。示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>欢迎来到我的个人主页</h1>
<p>这是我的个人介绍。</p>
</div>
</body>
</html>
```
```css
.container {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
padding: 20px;
border: 1px solid #ccc;
margin: 20px;
}
h1 {
color: #333;
}
```
接下来,我们可以创建一个产品展示页面。同样使用HTML和CSS的方式来构建页面的结构和样式。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product">
<img src="product.jpg" alt="产品图片">
<h2>产品名称</h2>
<p>产品介绍。</p>
</div>
</body>
</html>
```
```css
.product {
text-align: center;
padding: 20px;
}
h2 {
color: #333;
}
```
最后,我们可以创建一个简单的联系页面。在这个页面中,我们可以使用表单元素`<form>`,文本框`<input>`和提交按钮来实现一个简单的联系表单。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">邮箱:</label>
<input type="text" id="email" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
```
```css
form {
text-align: center;
padding: 20px;
}
input {
margin: 10px;
}
```
总结而言,以上就是如何使用HTML和CSS实现三个不同的静态页面的简单示例。希望以上内容对您有所帮助。