32nd Project Combat-Mobile fluid layout [3]
Learning Essentials:
1. Search section
2. Tourism section
3. Media Enquiry
This chapter starts with the first PC-side project, which is designed to be a mobile-accessible page
The project uses a fluid layout.
A Search section
The search section contains three of content, background chunks, text boxes, and buttons.
HTML section
<div id= "Search" >
<input type= "text" class= "search" placeholder= "Please enter tourist attractions or city" >
<button class= "button" > Search </button>
</div>
CSS section
#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%;
}
Layout ignores border calculations
div {
Box-sizing:border-box;
}
Two Tourism section
Here, we first design a title, the specific picture part is placed in the following lesson.
HTML section
<div id= "Tour" >
</div>
CSS section
#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;
}
Three Media Enquiry
Media inquiries, here we do not go into detail to explain, this put to the back of the response section of the explanation, here simple to use that is
Can
/* Media query, greater than 480 less than 640*/
@media (min-width:480px) and (max-width:640px) {
#tour H2 {
Font-size:. 26rem;
}
#tour H3 {
Font-size:. 16rem;
}
#footer {
Font-size:. 14rem;
}
}
/* Media query, less than 480*/
@media (max-width:480px) {
#tour H2 {
Font-size:. 18rem;
}
#tour H3 {
Font-size:. 14rem;
}
#footer {
Font-size:. 12rem;
}
}
Code:
<! DOCTYPE html>
<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> Dipper City Travel Agency-Mobile </title>
<link rel= "stylesheet" href= "Css/style.css" >
<body>
<nav class= "link" >
<ul>
<li class= "Active" ><a href= "index.html" > Home </a></li>
<li><a href= "information.html" > News </a></li>
<li><a href= "ticket.html" > Ticketing </a></li>
<li><a href= "about.html" > About </a></li>
</ul>
</nav>
<div id= "Adver" >
</div>
<div id= "Search" >
<input type= "text" class= "search" placeholder= "Please enter tourist attractions or city" >
<button class= "button" > Search </button>
</div>
<div id= "Tour" >
</div>
<footer id= "Footer" >
<div class= "Top" >
Client | Touch Screen Version | Computer edition
</div>
<div class= "Bottom" >
Copyright©ycku Dipper City Travel Service | Su ICP 备 120,110,119th No.
</div>
</footer>
</body>
@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, SA Ns-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;
}
/* Media query, greater than 480px less than 640px*/
@media (min-width:480px) and (max-width:640px) {
#tour H2 {
Font-size:. 26rem;
}
#tour H3 {
Font-size:. 16rem;
}
#footer {
Font-size:. 16rem;
}
}
/* Media query, less than 480px*/
@media (max-width:480px) {
#tour H2 {
Font-size:. 20rem;
}
#tour H3 {
Font-size:. 14rem;
}
#footer {
Font-size:. 12rem;
}
}
32nd Project Combat-Mobile Fluid Layout 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
