Html+Css網頁設計(三)
效果
PC 端
手機端
Contact
contact.html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>WCB Cafe - CONTACT</title>
<meta name="description" content="提供綜合咖啡與健康有機食物的咖啡店">
<link rel="icon" href="images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/contact.css" rel="stylesheet" />
</head>
<body>
<div id="contact" class="big-bg">
<header class="page-header wrapper">
<h1>
<a href="index.html"><img src="images/logo.svg" alt="WCB cafe - NEWS" class="logo" /></a>
</h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<h2 class="page-title">Contact</h2>
<form action="#">
<div>
<label for="name">姓名</label>
<input type="text" id="name" name="your-name" />
</div>
<div>
<label for="email">電子郵箱</label>
<input type="email" id="email" name="your-email" />
</div>
<div>
<label for="message">留言</label>
<textarea id="message" name="your-message"></textarea>
</div>
<input type="submit" class="button" value="提交" />
</form>
</div><!-- wrapper -->
</div><!-- /#menu -->
<section id="location">
<div class="wrapper">
<div class="location-info">
<h3 class="sub-title">Cafe 北京東站店</h3>
<p>
地址： 北京〇〇區<br>
〇〇〇〇〇〇〇 000-22-1<br>
〇〇〇〇<br>
電話： 86-1111-1111<br>
營業時間： 10:00〜20:00<br>
公休日：星期三
</p>
</div><!-- /.location-info -->
<div class="location-map">
<iframe src="https://surl.amap.com/1Cu6feKauF" width="800" height="400" frameborder="0" style="border:0"
allowfullscreen></iframe>
</div><!-- /.location-map -->
</div>
</section>
<section id="sns">
<div class="wrapper">
<div class="sns-box">
<h3 class="sub-title">Facebook</h3>
Facebook
</div>
<div class="sns-box">
<h3 class="sub-title">Twitter</h3>
Twitter
</div>
<div class="sns-box">
<h3 class="sub-title">咖啡介紹</h3>
<iframe
src="https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=b1a39f7e5db33a6dc6cbe8cd41d3f6f1&tvId=751144400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%"
frameborder="0"
allowfullscreen="true"
width="560" height="315">
</iframe>
</div>
</div> <!-- wrapper -->
</section>
<footer>
<div class="wrapper">
<div class="copyright">
<p><small> © 2022 WCB Cafe</small> </p>
</div>
</div>
</footer>
</body>
</html>
contact.css
@charset "UTF-8";
form div {
margin-bottom: 14px;
}
label {
display: block;
margin-bottom: 6px;
font-size: 1.125rem;
}
#contact {
background-image: url(../images/contact-bg.jpg);
min-height: 100vh;
}
input[type="text"], input[type="email"], textarea {
background: rgba(255, 255, 255, .5);
border:1px #fff solid;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
}
input[type="text"], input[type="email"] {
width: 100%;
max-width: 240px;
}
textarea {
width: 100%;
max-width: 480px;
height: 6rem;
}
input[type="submit"] {
border: none;
cursor: pointer;
line-height: 1;
}
/* 商店資料.地圖 /SNS */
#location {
padding: 4% 0;
}
#location .wrapper {
display: flex;
justify-content: space-between;
}
.location-info {
width: 22%;
}
.location-info p {
padding: 12px 10px;
}
.location-map {
width: 74%;
}
/* SNS */
#sns {
background: #faf7f0;
padding: 4% 0;
}
#sns .wrapper {
display: flex;
justify-content: space-between;
}
#sns .sub-title {
margin-bottom: 30px;
}
.sns-box {
width: 30%;
}
/* 公共部分 */
.sub-title {
font-size: 1.375rem;
padding: 0 8px 8px;
border-bottom: 2px #0bd solid;
font-weight: normal;
}
iframe {
width: 100%;
}
@media (max-width: 600px) {
#contact .page-title {
margin-top: 40px;
}
input[type="text"], input[type="email"], textarea {
max-width: 100%;
}
#location .wrapper, #sns .wrapper {
flex-direction: column;
}
.location-info, .location-map, .sns-box {
width: 100%;
}
}
資源
背景圖：
