实现静态
页面需要使用
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实现三个不同的静态
页面的简单示例。希望以上内容对您有所帮助。
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
