標籤：
第32 章項目實戰-移動端流體布局[3]
學習要點：
1.搜尋部分
2.旅遊部分
3.媒體查詢
本章主要開始如果通過第一個PC 端項目進行重構，設計成移動端可訪問的頁面，這個
項目採用的是流體布局。
一．搜尋部分
搜尋部分包含三個內容，背景區塊、文字框和按鈕。
//HTML 部分
<div id="search">
<input type="text" class="search" placeholder="請輸入旅遊景點或城市">
<button class="button">搜尋</button>
</div>
//CSS 部分
#search {
max-width: 6.4rem;
height: .33rem;
background-color: #ddd;
margin: 0 auto;
position: relative;
padding: .03rem 0 0 0;
}
#search .search {
display: block;
outline: none;
width: 95%;
font-size: .14rem;
border-radius: .04rem;
background-color: #fff;
border: none;
height: .27rem;
padding: 0 .05rem;
margin: 0 auto;
}
#search .button {
display: block;
background-color: #eee;
outline: none;
cursor: pointer;
color: #666;
width: .5rem;
height: .27rem;
border: none;
border-top-right-radius: .04rem;
border-bottom-right-radius: .04rem;
position: absolute;
font-size: .12rem;
top: .03rem;
right: 1%;
}
//布局忽略邊框計算
div {
box-sizing: border-box;
}
二．旅遊部分
這裡，我們首先設計一個標題，具體圖片部分放到後面一節課。
//HTML 部分
<div id="tour">
<hgroup>
<h2>熱門旅遊</h2>
<h3>最新的各種熱門旅遊資訊的推薦！</h3>
</hgroup>
</div>
//CSS 部分
#tour {
max-width: 6.4rem;
margin: .1rem auto 0 auto;
}
#tour h2 {
text-align: center;
color: #666;
font-size: .26rem;
}
#tour h3 {
text-align: center;
font-weight: normal;
color: #666;
margin: 0.05rem 0 0.1rem 0;
font-size: .16rem;
}
三．媒體查詢
媒體查詢，這裡我們不去詳細去講解，這個放到後面響應式章節講解，這裡簡單使用即
可。
/*媒體查詢，大於480 小於640*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
#tour h3 {
font-size: .16rem;
}
#footer {
font-size: .14rem;
}
}
/*媒體查詢，小於480*/
@media (max-width: 480px) {
#tour h2 {
font-size: .18rem;
}
#tour h3 {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
}
代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>瓢城旅行社-移動端</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<nav class="link">
<h2 class="none">網站導航</h2>
<ul>
<li class="active"><a href="index.html">首頁</a></li>
<li><a href="information.html">資訊</a></li>
<li><a href="ticket.html">票務</a></li>
<li><a href="about.html">關於</a></li>
</ul>
</nav>
</header>
<div id="adver">
<img src="img/adver.png" >
</div>
<div id="search">
<input type="text" class="search" placeholder="請輸入旅遊景點或城市">
<button class="button">搜尋</button>
</div>
<div id="tour">
<hgroup>
<h2>熱門旅遊</h2>
<h3>最新的各種熱門旅遊資訊的推薦！</h3>
</hgroup>
</div>
<footer id="footer">
<div class="top">
用戶端 | 觸屏版 | 電腦版
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅行社 | 蘇ICP備120110119號
</div>
</footer>
</body>
</html>
@charset "utf-8";
html {
font-size: 625%;
}
body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
font-size: .16rem;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
div {
box-sizing: border-box;
}
.none {
display: none;
}
#header {
width: 100%;
height: .45rem;
background-color: #333;
font-size: 0.16rem;
}
#header .link {
height: .45rem;
line-height: .45rem;
color: #eee;
}
#header .link li {
width: 25%;
text-align: center;
float: left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#adver {
max-width: 6.4rem;
margin: 0 auto;
}
#footer {
max-width: 6.4rem;
background-color: #222;
color: #777;
margin: 0 auto;
text-align: center;
padding: .1rem 0;
font-size: .16rem;
}
#footer .top {
padding: 0 0 .05rem 0;
}
#search {
max-width: 6.4rem;
height: .33rem;
margin: 0 auto;
background-color: #ddd;
padding: .03rem 0 0 0;
position: relative;
}
#search .search {
width: 95%;
height: .27rem;
border-radius: .04rem;
border: none;
outline: none;
background-color: #fff;
display: block;
margin: 0 auto;
font-size: .14rem;
padding: 0 .05rem;
}
#search .button {
display: block;
outline: none;
width: .5rem;
height: .27rem;
color: #666;
border: none;
background-color: #eee;
border-top-right-radius: .04rem;
border-bottom-right-radius: .04rem;
font-size: .14rem;
position: absolute;
top: .03rem;
right: 1%;
}
#tour {
max-width: 6.4rem;
margin: .1rem auto 0 auto;
}
#tour h2 {
text-align: center;
color: #666;
font-size: .26rem;
}
#tour h3 {
text-align: center;
color: #666;
font-weight: normal;
font-size: .16rem;
margin: .05rem 0 .1rem 0;
}
/*媒體查詢，大於480px小於640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
#tour h3 {
font-size: .16rem;
}
#footer {
font-size: .16rem;
}
}
/*媒體查詢，小於480px*/
@media (max-width: 480px) {
#tour h2 {
font-size: .20rem;
}
#tour h3 {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
}
第32 章項目實戰-移動端流體布局3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
