html联系我们界面代码
时间: 2023-09-03 07:28:36 浏览: 698
### 回答1:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
h1{
text-align: center;
color: #333;
}
form{
background-color: #fff;
max-width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
}
label{
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="email"], textarea{
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0px 0px 5px #ccc;
}
textarea{
height: 100px;
}
input[type="submit"]{
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover{
background-color: #555;
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
### 回答2:
以下是一个简单的HTML联系我们界面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>联系我们</title>
<style>
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], textarea {
width: 100%;
padding: 5px;
}
textarea {
height: 150px;
}
input[type="submit"] {
margin-top: 10px;
padding: 5px 10px;
background-color: #0066cc;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0050a3;
}
</style>
</head>
<body>
<form action="mailto:example@example.com" method="post" enctype="text/plain">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" required>
<label for="email">电子邮箱:</label>
<input type="text" name="email" id="email" required>
<label for="message">留言:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" value="发送留言">
</form>
</body>
</html>
```
这段代码创建了一个简单的联系我们表单。用户需要输入姓名、电子邮箱和留言信息,然后可以通过点击“发送留言”按钮来发送表单内容到example@example.com邮箱。表单使用了HTML5的表单验证属性`required`来确保所填信息的完整性。通过CSS样式对表单元素进行了简单的样式设计。
### 回答3:
HTML联系我们界面代码主要包括以下几个部分:
1. HTML文件头部声明
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系我们</title>
<style>
/* 样式表,用于美化页面 */
/* 可根据需要自定义样式 */
</style>
</head>
<body>
```
2. 页面内容部分
```
<h1>联系我们</h1>
<p>欢迎您与我们联系,如果您有任何疑问或建议,请填写以下表单并提交给我们。</p>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">留言:</label><br>
<textarea id="message" name="message" rows="5" cols="40" required></textarea><br><br>
<input type="submit" value="提交">
</form>
```
3. HTML文件尾部
```
</body>
</html>
```
以上代码是一个简单的联系我们界面的HTML代码示例,页面包括一个标题、一段简介、一个表单,用户可以填写姓名、邮箱和留言,并通过提交按钮向服务器发送数据。根据需要,可以添加CSS样式和后台服务器脚本来进一步完善和实现页面的功能。
相关推荐
暗色系界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/text.css" />
</head>
<body>
site map | FAQ's | help
Welcome
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Learn more
About
Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Learn more
Latest News
JULY 18, 2010
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Learn more
Our Services Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Home | About | Services | Clients | Contacts Web design by 站长素材 Online <div </html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Learn more
Our Services Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Set ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Learn more Home | About | Services | Clients | Contacts Web design by 站长素材 Online <div </html>