数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何为网页创建响应式联系方式部分？
在联系我们页面上，您一定见过用于添加您的姓名、电子邮件ID、电话号码、消息等的输入字段。还有一个按钮供用户提交联系表单。此外，有些网站还会添加一个图像，该图像在调整网页浏览器大小时会正确对齐，即响应式设计。让我们看看如何使用CSS在网站上为网页创建响应式联系方式部分。
设置联系图像
从标题开始，设置一个代表联系我们页面的图像：
<div class="contactCol"> <img class="contactImg" src="https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600"/> </div>
定位图像
要将联系图像定位在左侧，请使用float属性：
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
设置联系图像的宽度和高度：
.contactImg {
width: 200px;
height: 200px;
}
为联系字段设置表单
使用<form>元素设置联系字段的表单。需要联系的用户应填写名字、姓氏、电子邮件ID和消息字段。还为用户设置了一个提交按钮，以便他们可以使用<button>元素提交表单：
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
定位表单字段
要将表单定位在左侧，可以使用float属性：
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
设置响应式设计
响应式设计是使用媒体查询设置的。当网页浏览器调整大小小于600px时，布局会发生更改。表单和提交按钮的宽度设置为100%：
@media screen and (max-width: 600px) {
.contactCol, input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
示例
要创建网页的响应式联系方式部分，代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
input[type="text"], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 18px;
}
input[type="submit"] {
background-color: rgb(139, 76, 175);
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
label {
font-weight: bold;
}
.contactImg {
width: 200px;
height: 200px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.contactForm {
margin: auto;
border-radius: 5px;
background-color: #d3d3d3;
padding: 10px;
max-width: 1000px;
}
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
.contactSection:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.contactCol, input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Contact Section Example</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src="https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600"/>
</div>
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</body>
</html>
更新于：2023年12月8日
浏览量：179
广告