目录
1.网页图片
网页宽度大于1250px时
网页宽度为950px-1250px时
网页宽度为650px-950px时
网页宽度为460px-650px时
网页宽度为460px以下时
2.文件目录
3.代码实现
sample.html
<!doctype html>
<html lang="en">
<link>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HotelV</title>
<link rel="stylesheet" media="screen and (max-width:460px)" href="css/index5.css" />
<link rel="stylesheet" media="screen and (min-width:460px) and (max-width:650px)" href="css/index4.css" />
<link rel="stylesheet" media="screen and (min-width:650px) and (max-width:950px)" href="css/index3.css" />
<link rel="stylesheet" media="screen and (min-width:950px) and (max-width:1250px)" href="css/index2.css" />
<link rel="stylesheet" media="screen and (min-width:1250px)" href="css/index.css" />
<script src="js/photo-gallery.js"></script>
</head>
<body>
<div class="body-content">
<div class="Book">
<div class="Book_a_room">
Book a room
</div>
<div class="Book_Part">
Arrival:<input type="text" /><br />
Departure:<input type="text" /><br />
<input type="number">Nights<br />
<input type="number">Adults<input type="number">Children
<input type="button" value="Check availability">
</div>
</div>
<div class="container">
<div class="container1">
<h3>Hotel V</h3>
<ul>
<li>Find a hotel</li>
<li>Meeting Events</li>
<li>About Hotel</li>
</ul>
</div>
<div class="container2">
<h3>Hotel detail</h3>
<ul>
<li>Amenities</li>
<li>Maps</li>
<li>Room Type</li>
</ul>
<h4>Check in</h4>
<p>Check in:3pm</p>
<p>Check out:12pm</p>
<h4>Map and Location</h4>
<img src="images/map.png" alt="Our office location" />
</div>
<div class="container3">
<h3>Meeting and Events</h3>
<p>We provide venues for different types of events:</p>
<div class="images">
<div><img src="images/5016.png" alt="Gathering" /><h2>Gathering</h2></div>
<div><img src="images/5015.png" alt="Meetings" /><h2>Meetings</h2></div>
<div><img src="images/5040.png" alt="Workshops" /><h2>Workshops</h2></div>
</div>
<p>See how our customer said on the project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. Thisis ct. A sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample proje really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project</p>
<p>This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project.</p>
<h3>Photo Gallery</h3>
<canvas id="photo-gallery" width="500px"></canvas>
<p>This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project. This is a sample project. This is really just a sample project. A sample project.</p>
<div class="second_images">
<img src="images/5018.png" alt="Don’t just hear what we say." />
</div>
<div class="third_footer">
<div class="part1">
<h3>Teatimaniale</h3>
<div>
<p>Great hotel and convienent location Absolutely five stars!</p>
</div>
<p>This is a sample text. This is really just a sample text. A sample text. This is a sample text. This is really just a sample text. A sample text. This is a sample text. This is really just a sample text. A sample text. This is a sample text. This is really just a sample text. A sample text. This is a sample text. This is really just a sample text. A sample text. This is a sample text. This is really just a sample text. a sample text.</p>
</div>
<div class="part2">
<img src="images/4912.png" alt="Photo outside hotel" />
<img src="images/5029.png" alt="Photo inside room" />
</div>
</div>
</div>
<div class="container4">
<h3>Things to do</h3>
<div>
<img src="images/ads.png" alt="Advertisement" />
<img src="images/ads.png" alt="Advertisement" />
<img src="images/ads.png" alt="Advertisement" />
<img src="images/ads.png" alt="Advertisement" />
</div>
<p>Become sponser</p>
</div>
</div>
</div>
<div class="footer">
<div class="footer_container">
<div class="footer_part1">
<h4>Contact</h4>
<p>hello@example.com</p>
<p>2088 Meadow Lane,</p>
<p>Cranford, Nj0701</p>
</div>
<div class="footer_part2">
<h4>Footer</h4>
<p>Footer Col Footer Col Footer Col Footer Col Footer Col Footer Col Footer Col Footer Col </p>
</div>
<div class="footer_part3">
<h4>Subscribe</h4>
<p>Subscribe our newsletter for news.</p>
</div>
<div class="footer_part4">
<h4>Hotel Group</h4>
<p>We have hotels all over the world.</p>
<div class="footer-image-container">
<div><img src="images/icon.gif" alt="icon" /></div>
<div><img src="images/icon.gif" alt="icon" /></div>
<div><img src="images/icon.gif" alt="icon" /></div>
<div><img src="images/icon.gif" alt="icon" /></div>
<div><img src="images/icon.gif" alt="icon" /></div>
<div><img src="images/icon.gif" alt="icon" /></div>
</div>
</div>
</div>
<p>©2015.WorldSkills.</p>
</div>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.body-content {
background-color: rgb(255, 251, 133);
display: flex;
width: 90%;
padding: 5%;
/*justify-content: center;
align-items: center;
flex-direction: row;*/
position: relative;
box-shadow: 4px 4px 4px #999999;
flex-direction: column;
}
@font-face {
font-family: 'Dancing_ScriptBold';
src: url('../Fonts/Dancing_Script/DancingScript-Regular.ttf');
}
@font-face {
font-family: 'Dancing_Script';
src: url('../Fonts/Dancing_Script/DancingScript-Bold.ttf');
}
@font-face {
font-family: 'Vollkorn';
src: url('../Fonts/Vollkorn/Vollkorn-Regular.ttf');
}
@font-face {
font-family: 'VollkornBold';
src: url('../Fonts/Vollkorn/Vollkorn-Bold.ttf');
}
.Book_a_room {
position: absolute;
width: 20%;
top: 0;
right: 0;
margin-right: 5%;
padding: 0.5%;
background-color: #cccccc;
font-family: Vollkorn;
font-weight: bold;
}
.Book_Part {
width: 20%;
top: 1.5%;
padding: 0.5%;
background-color: #cccccc;
font-family: Vollkorn;
position: absolute;
right: 0;
margin-right: 5%;
display: none;
}
.Book_Part input {
padding: 1%;
margin: 1%;
}
.Book_Part input[type="text"] {
width: 60%;
}
.Book_Part input[type="number"] {
width: 20%;
}
.Book:hover .Book_Part {
display: block;
}
.container {
width: 100%;
display: flex;
box-shadow: 4px 4px 4px #999999;
}
.container1 {
width: 10%;
background-color: rgb(250, 230, 35);
padding: 1%;
display: flex;
flex-direction: column;
}
.container1 h3 {
font-family: Dancing_ScriptBold;
font-size: 1.8em;
}
.container1 li {
margin-top: 13%;
font-family: Vollkorn;
font-size: 0.7em;
color: #999999;
}
.container2 {
width: 15%;
background-color:white;
padding: 1%;
display: flex;
flex-direction: column;
}
.container2 h3 {
font-family: Dancing_ScriptBold;
font-size: 1.8em;
}
.container2 li {
margin: 2.5%;
font-family: Vollkorn;
font-size: 0.7em;
color: #999999;
}
.container2 h4 {
font-family: Dancing_ScriptBold;
font-size: 1.2em;
margin: 1%;
}
.container2 p {
font-family: Vollkorn;
font-size: 0.8em;
margin: 1%;
}
.container2 img {
width: 90%;
}
.container3 {
width: 50%;
background-color:white;
padding: 1%;
display: flex;
flex-direction: column;
}
.container3 h3 {
font-family: Dancing_ScriptBold;
font-size: 1.8em;
}
.container3 p {
font-family: Vollkorn;
font-size: 1em;
margin-top: 1.5%;
margin-bottom: 1%;
}
.images {
width: 100%;
display: flex;
}
.images div {
width: 33%;
height: 100%;
margin-right: 1%;
position: relative;
}
.images div img {
width: 100%;
height: 240px;
filter: grayscale(90%) brightness(120%);
}
.images div h2 {
position: absolute;
font-family: Vollkorn;
font-size: 1.5em;
color: white;
bottom: 10%;
left: 8%;
}
.images div:hover img {
width: 100%;
height: 240px;
filter: none;
}
.second_images {
width: 100%;
}
.second_images img {
width: 100%;
}
.third_footer {
display: flex;
flex-direction: row;
margin-top: 3%;
}
.third_footer .part1 {
flex-grow: 4;
}
.third_footer .part1 p {
font-family: Vollkorn;
font-size: 0.7em;
padding-right: 3%;
}
.third_footer .part1 div {
border: 0px solid rgb(250, 226, 143);
border-left-width: 4px;
margin-top: 5%;
margin-bottom: 5%;
}
.third_footer .part1 div p {
font-family: Vollkorn;
font-size: 1.5em;
padding: 5%;
}
.third_footer .part2 {
flex-grow: 5;
}
.third_footer .part2 img {
width: 100%;
}
.container4 {
width: 25%;
background-color: #eeeeee;
padding: 1%;
}
.container4 h3 {
font-family: Dancing_ScriptBold;
font-size: 1.8em;
}
.container4 div img {
margin: 0.5%;
width: 47%;
}
.container4 p {
font-family: Vollkorn;
font-size: 0.8em;
color: #999999;
margin-top: 2%;
}
#photo-gallery {
width: 100%;
background-color:#efefef
}
.footer {
width: 90%;
font-family: Vollkorn;
background-color: #dddddd;
display: flex;
flex-direction: column;
padding: 5%;
}
.footer p {
width: 100%;
}
.footer_container {
width: 100%;
display: flex;
justify-content: space-between;
}
.footer_part1 {
width: 20%;
}
.footer_container h4 {
font-family: Dancing_Script;
margin-bottom: 7%;
}
.footer_container p {
font-size: 0.8em;
}
.footer_part2 {
width: 20%;
}
.footer_part3 {
width: 20%;
}
.footer_part4 {
width: 20%;
}
.footer-image-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer-image-container div {
width: 30%;
margin-right: 3%;
}
.footer-image-container div img {
width: 100%;
}