32nd Project Combat-Mobile fluid layout [4]
Learning Essentials:
1. Tourist Photo section
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 Tourist pictures section
HTML section
<div class= "Container" >
<figure>
<figcaption>
<p> Special package, super rich attractions </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 77%</em>
<span class= "Price" >¥<strong>2864</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Shanghai Departure, Machine + wine included: Morning dinner + speedboat </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>8039</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> with Yancheng transfer, four-star hotel in the entire listing </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 90%</em>
<span class= "Price" >¥<strong>2709</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> summer holidays, 2 days free, no guided tours </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>9499</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p>4 to 5 stars, Golden Train, Jungfrau </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>9199</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Blue Dream Sea, exclusive villa, Banyan tree Afternoon tea </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 95%</em>
<span class= "Price" >¥<strong>6488</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Tours, 4 nights in Seychelles, 2 nights in Dubai </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 100%</em>
<span class= "Price" >¥<strong>9669</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> up to 3000 off! Six Chinese cuisine, one soup </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 93%</em>
<span class= "Price" >¥<strong>9999</strong> up </span>
</div>
</figcaption>
</figure>
</div>
<div class= "Clearfix" ></div>
CSS section
Remove border calculation
div,figure,figcaption {
Box-sizing:border-box;
}
Styles section
#tour Figure {
width:50%;
Float:left;
Background-color: #eee;
margin:0 0.05rem 0;
Font-size:. 16rem;
}
#tour figure img {
padding:. 02rem;
Vertical-align:middle;
Border-radius:. 04rem;
}
#tour Figcaption {
Color: #666;
padding:. 02rem. 05rem;
}
#tour figcaption h4 {
Display:block;
Font-weight:normal;
padding:. 05px 0;
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
}
#tour figcaption p {
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
}
#tour. Info {
padding:. 1rem 0 0 0;
Font-size:. 16rem;
}
#tour. Price {
Color: #f60;
}
#tour. Price Strong {
Letter-spacing:0.01rem;
}
#tour. Sat {
Color: #999;
Font-style:normal;
Float:right;
position:relative;
Right:. 05rem;
}
Media Enquiry
/* Media query, greater than 480px less than 640px*/
@media (min-width:480px) and (max-width:640px) {
#tour H2 {
Font-size:. 26rem;
}
#tour H3, #footer, #tour figure, #tour. info {
Font-size:. 16rem;
}
}
/* Media query, less than 480px*/
@media (max-width:480px) {
#tour H2 {
Font-size:. 20rem;
}
#tour H3, #tour. Info, #tour Figure {
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 class= "Container" >
<figure>
<figcaption>
<p> Special package, super rich attractions </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 77%</em>
<span class= "Price" >¥<strong>2864</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Shanghai Departure, Machine + wine included: Morning dinner + speedboat </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>8039</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> with Yancheng transfer, four-star hotel in the entire listing </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 90%</em>
<span class= "Price" >¥<strong>2709</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> summer holidays, 2 days free, no guided tours </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>9499</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p>4 to 5 stars, Golden Train, Jungfrau </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 97%</em>
<span class= "Price" >¥<strong>9199</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Blue Dream Sea, exclusive villa, Banyan tree Afternoon tea </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 95%</em>
<span class= "Price" >¥<strong>6488</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> Tours, 4 nights in Seychelles, 2 nights in Dubai </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 100%</em>
<span class= "Price" >¥<strong>9669</strong> up </span>
</div>
</figcaption>
</figure>
<figure>
<figcaption>
<p> up to 3000 off! Six Chinese cuisine, one soup </p>
<div class= "Info" >
<em class= "Sat" > Satisfaction 93%</em>
<span class= "Price" >¥<strong>9999</strong> up </span>
</div>
</figcaption>
</figure>
<div class= "Clearfix" ></div>
</div>
</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,h4,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,figure,figcaption {
Box-sizing:border-box;
}
. none {
Display:none;
}
. clearfix:after {
Content: '. ';
Display:block;
Clear:both;
height:0;
Visibility:hidden;
}
#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;
}
#tour Figure {
width:50%;
Float:left;
Background-color: #eee;
Font-size:. 16rem;
padding:0 0.05rem 0;
}
#tour figure img {
padding:. 02rem;
Border-radius:. 04rem;
}
#tour Figcaption {
Color: #666;
Font-size:. 16rem;
padding:. 02rem. 05rem;
}
#tour h4 {
Font-weight:normal;
White-space:nowrap;
Overflow:hidden;
Text-overflow:ellipsis;
}
#tour p {
White-space:nowrap;
Overflow:hidden;
Text-overflow:ellipsis;
}
#tour. Info {
padding:. 1rem 0 0 0;
Font-size:. 16rem;
}
#tour. Price {
Color: #f60;
}
#tour. Price Strong {
Letter-spacing:. 01rem;
}
#tour. Sat {
position:relative;
Float:right;
Right:. 05rem;
Font-style:normal;
}
/* Media query, greater than 480px less than 640px*/
@media (min-width:480px) and (max-width:640px) {
#tour H2 {
Font-size:. 26rem;
}
#tour H3, #footer, #tour figcaption, #tour. info {
Font-size:. 16rem;
}
}
/* Media query, less than 480px*/
@media (max-width:480px) {
#tour H2 {
Font-size:. 20rem;
}
#tour H3, #tour figcaption, #tour. info {
Font-size:. 14rem;
}
#footer {
Font-size:. 12rem;
}
}
32nd Project Combat-Mobile Fluid Layout 4
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
