資料結構
網路
關係資料庫管理系統(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
廣告