响应式网页作品 HTML5+CSS——Gallery Sample

PG5

已于 2023-05-31 11:07:36 修改

阅读量363

点赞数 2

分类专栏：前端文章标签：前端 html5 css

于 2023-05-31 10:49:57 首次发布

本文链接：https://blog.csdn.net/weixin_43823060/article/details/130964044

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>&copy;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%;
}