用html+css写一个联系我们的网页
时间: 2023-10-05 08:11:06 浏览: 53
好的,请看以下代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>联系我们</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
form {
margin: 50px auto;
width: 60%;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
label {
display: block;
margin-top: 10px;
color: #666;
}
input[type=text],textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #f9f9f9;
margin-top: 5px;
font-size: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
border-radius: 3px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
}
input[type=submit]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>联系我们</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" placeholder="请输入邮箱">
<label for="message">留言:</label>
<textarea id="message" name="message" placeholder="请输入留言内容"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
```
这个代码示例实现了一个简单的“联系我们”页面,包括一个标题、一个表单和一些 CSS 样式。你可以在其中输入姓名、邮箱和留言内容,并通过提交按钮提交表单。该页面的样式基于 CSS,包括背景颜色、字体、文本对齐方式、边距、边框、阴影和按钮样式。
你可以将这些代码复制到一个新的 HTML 文件中,并在浏览器中打开该文件,以查看实际效果。