首页用HTML和css加一个表单做一个家乡介绍

用HTML和css加一个表单做一个家乡介绍

时间: 2024-03-14 08:45:38 浏览: 72

好的，下面是一个简单的家乡介绍表单的HTML和CSS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>家乡介绍</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>欢迎来到我的家乡！</h1> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required><br> <label for="city">城市：</label> <input type="text" id="city" name="city" required><br> <label for="province">省份：</label> <input type="text" id="province" name="province" required><br> <label for="message">留言：</label> <textarea id="message" name="message"></textarea><br> <input type="submit" value="提交"> </form> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } form { margin: 0 auto; width: 400px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } label { display: inline-block; width: 100px; } input, textarea { padding: 5px; width: 250px; border: none; border-bottom: 1px solid #ccc; margin-bottom: 10px; } input[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 20px; } input[type="submit"]:hover { background-color: #3e8e41; } ``` 这个表单包含了名字，邮箱，城市，省份和留言等字段。它具有基本的样式，包括一个圆角边框和阴影效果。需要注意的是，其中的“for”属性和“id”属性需要保持一致，以便于方便地通过标签关联相应的表单元素。

阅读全文