Как внести изменения, чтобы создать адаптивный контент - PullRequest
Новая
       34

Как внести изменения, чтобы создать адаптивный контент

0 голосов
/ 23 января 2020 

<!doctype html>

<html lang="en">

<head>

  <meta name="cwwebpage" content="seattle-colours">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="seattle-colours.css">
  <link rel="stylesheet" href="dropdownMenu.css">

  <style>
  
    
    @media screen and(max-width: 600px) {
      section {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }
    }
    
    .fullbody {
      width: 100%;
      height: 100%;
      background-color: #131321;
      margin: 0;
      padding: 0;
    }
    
    header {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      display: inline-block;
      align-items: flex-end;
      display: flex;
      justify-content: center;
      padding: 10px;
      width: 100%;
      height: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .contact-email-phone {
      justify-content: center;
      padding: 10px;
      color: #ffff;
      margin-left: 30px;
    }
    
    .contact-email-phone>a {
      text-decoration: none;
      color: #ffff;
    }
    
    .contact-email-phone>a:hover {
      text-decoration-line: underline;
      color: #ffff;
    }
    
    .contact-email-phone>p {
      color: #ffff;
    }
    
    .home {
      display: flex;
      justify-content: left;
      padding: 10px;
      background-color: white;
      margin-left: 30px;
      margin-bottom: 20px;
      margin-top: 0px;
      position: absolute;
      float: left;
      border: none;
      padding: 1rem 2rem;
      border-radius: 10px;
      text-decoration: none;
      color: #0e0d0d;
      font-family: sans-serif;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      transition: background 250ms ease-in-out, transform 150ms ease;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    .home:hover,
    .home:focus {
      background: #434344;
      color: #fff;
    }
    
    .home:focus {
      outline: 1px solid #fff;
      outline-offset: -4px;
      color: #fff;
    }
    
    .home:active {
      transform: scale(0.99);
      color: #fff;
    }
    /*   Back button CSS*/
    
    .button {
      display: inline-block;
      border: none;
      padding: 1rem 2rem;
      margin-right: 20px;
      margin-left: -20px;
      border-radius: 40px 0px 0px 40px;
      text-decoration: none;
      background: #070707;
      color: #ffffff;
      font-family: sans-serif;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      transition: background 250ms ease-in-out, transform 150ms ease;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    .button:hover,
    .button:focus {
      background: #434344;
    }
    
    .button:focus {
      outline: 1px solid #fff;
      outline-offset: -4px;
    }
    
    .button:active {
      transform: scale(0.99);
    }
    /*  back button CSS end*/
    
    html,
    body,
    body div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    time,
    mark,
    audio,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
    }
    
    section {
      height: 100%;
      background-color: #ede6c1;
      padding: 15px;
      margin: auto;
      text-align: center;
      width: 100%;
    }
    
    p {
      font-family: "Times New Roman", Times, serif;
      color: #080000;
    }
    
    article {
      border: black;
      width: 100%;
      height: 100%;
      padding: 10px;
      margin: 10px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      box-sizing: border-box;
      margin: 0;
      font-family: Arial;
    }
    /*  Images table content start */
    
    .row {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap;
      /* IE10 */
      flex-wrap: wrap;
      padding: 0 4px;
      justify-content: center;
    }
    /* Create four equal columns that sits next to each other */
    
    .column {
      width: 100%;
      height: 100%;
      -ms-flex: 25%;
      /* IE10 */
      flex: 20%;
      max-width: 15%;
      padding: 0 4px;
      margin: 30px;
    }
    
    .column img {
      margin: 30px;
      vertical-align: middle;
      width: 100%;
      -webkit-box-shadow: 10px 10px 10px -6px #777;
      -moz-box-shadow: 10px 10px 10px -6px #777;
      box-shadow: 10px 10px 10px -6px #777;
      border-radius: 5px;
      background-color: #070707;
      width: 100%;
      height: 100px;
      background-color: white;
    }
    
    .column img:hover {
      transform: scale(1.3);
      border-style: solid;
      border-width: grey 1px;
      border-color: darkgrey;
    }
    /* Responsive layout - makes a two column-layout instead of four columns */
    
    @media screen and (max-width: 800px) {
      .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
      }
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    
    @media screen and (max-width: 600px) {
      .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }
    }
    
    label {
      float: none;
      margin-left: 40px;
    }
    /*  Images table content end*/
    /* Footer CSS*/
    
    footer {
      background-color: #999179;
      height: 153px;
      padding: 10px;
      text-align: center;
    }
    
    .header-dropdown-menu {
      align-items: right;
      text-align: right;
      background-color: #535c5f;
      height: 60px;
    }
    
    .sub-nav {
      border: none;
    }
    
    .top-menu-nav {
      display: flex;
      height: 50px;
      align-items: center;
    }
    
    .top-menu-nav:hover {
      background-color: #2f3537;
    }
    
    .sub-nav {
      list-style-position: outside;
    }
    
    nav,
    .content {
      max-width: 960px;
      margin: 0 auto;
    }
    
    .top-nav {
      font-size: 0;
      border-block-color: inherit;
      margin-right: 70px;
    }
    
    .top-nav li {
      display: inline-block;
      width: 20%;
      text-align: right;
      background: #292929;
      position: relative;
      z-index: 10;
    }
    
    .top-nav>li a {
      text-decoration: none;
      font-size: 24px;
      line-height: 1.5em;
      text-align: center;
      display: block;
      color: lightgrey;
    }
    
    li {
      padding-top: 10px;
    }
    
    .sub-nav>li>a:hover,
    .tert-nav>li>a:hover {
      color: grey;
      text-decoration: underline;
    }
    /*  Wokring on centralising the drop down text indented*/
    
    .sub-nav {
      visibility: hidden;
    }
    
    .top-nav li:hover .sub-nav {
      visibility: visible;
      padding-top: 15px;
    }
    
    .sub-nav>li,
    .sub-nav>li a {
      display: block;
      width: 100%;
      position: relative;
      background: white;
      color: black;
    }
    
    .sub-nav>li>a {
      border-top: none;
      border-radius: 5px;
      color: black;
    }
    
    .tert-nav {
      position: absolute;
      width: 100%;
      visibility: hidden;
    }
    
    .tert-nav>li,
    .tert-nav>li>a {
      display: block;
      width: 100%;
      background: #bada55;
    }
    
    .tert-nav>li>a {
      border: 1px solid #3c3c3c;
      border-bottom: none;
    }
    
    .tert-nav>li:last-child a {
      border-bottom: 1px solid #3c3c3c;
    }
    
    @media screen and (max-width: 900px) {
      .header-dropdown-menu {
        align-items: right;
        displ@media screen and (max-width: 900px) {
          .header-dropdown-menu, .top-nav, .top-menu-nav, .sub-nav {}
        }
  </style>

</head>

<body class="fullbody">


  <header>

    <div class="logo">
      <image src="images/cw_logo.png">
        </br>
        </br>
        <div class="contact-email-phone">
          <a href="email@emailyou.com">email@emailyou.com</a>
          </br>

          <p>1234567890</p>
        </div>
    </div>


    >

    <a class="home" href="../Home-Page/index.html" role="button">Home</a>
    </br>

    <button class="button" onclick="goBack()">Go Back</button>



  </header>


  <!-- Drop down menu content-->
  <div class="header-dropdown-menu">

    <ul class="top-nav">
      <li class="top-menu-nav"><a href="#">Menu</a>
        <ul class="sub-nav">
          <li><a href="#">wood Type</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Specification</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Images</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </li>
    </ul>
  </div>


  <!-- the main content of the page -->
  <section>
    <article>

      <h1> Colours</h1>
      <div class="row">
        <div class="column">
          <img src="images/seattle-colours-range/001-pure-white.jpg" style="width:100%" name="pure white">
          <label>001 pure white</label>
          <img src="images/seattle-colours-range/003-silk-white.jpg" style="width:100%">
          <label>003 silk white</label>
          <img src="images/seattle-colours-range/006-pearl.jpg" style="width:100%">
          <label>006 Pearl</label>
        </div>
        <div class="column">
          <img src="images/seattle-colours-range/012-crisp-linen.jpg" style="width:100%">
          <label>012 crisp linen</label>
          <img src="images/seattle-colours-range/019-string.jpg" style="width:100%">
          <label>019 string</label>
          <img src="images/seattle-colours-range/032-sea-mist.jpg" style="width:100%">
          <label>032 sea mist</label>
        </div>
        <div class="column">
          <img src="images/seattle-colours-range/049-stone-grey.jpg" style="width:100%">
          <label>049 stone grey</label>
          <img src="images/seattle-colours-range/051-brown-grey.jpg" style="width:100%">
          <label>051 brown grey</label>
          <img src="images/seattle-colours-range/080-taupe-grey.jpg" style="width:100%">
          <label>080 taupe grey</label>

        </div>
      </div>



    </article>
  </section>

  <footer>
    <span id="footer">All Rights Reserved © Copyright 2019 Custom West</span>
  </footer>
</body>
<script src="seattle-colours.js"></script>

</html>

Я работал над проектом и добавил много строк CSS, но с тех пор мне посоветовали, чтобы содержимое было полностью отзывчивым, которое вам нужно добавить метатег. Контент теперь не масштабируется правильно, и теперь стало ясно, что я собираюсь неправильно оформить CSS. Я добавил контент @media, но безрезультатно. Ошибка школьника, которую я знаю, и извлеченный урок, однако мне нужно исправить ответное действие, которое сейчас расстраивает, поскольку я чувствую, что близка к решению проблемы, но просто недостаточно.

См. Содержание ниже. 

    <!doctype html>

<html lang="en">

<head>

  <meta name="cwwebpage" content="seattle-colours">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="seattle-colours.css">
  <link rel="stylesheet" href="dropdownMenu.css">

  <style>


    @media screen and(max-width: 600px) {
      section {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }
    }

    .fullbody {
      width: 100%;
      height: 100%;
      background-color: #131321;
      margin: 0;
      padding: 0;
    }

    header {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: inline-block;
      align-items: flex-end;
      display: flex;
      justify-content: center;
      padding: 10px;
      width: 100%;
      height: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .contact-email-phone {
      justify-content: center;
      padding: 10px;
      color: #ffff;
      margin-left: 30px;
    }

    .contact-email-phone>a {
      text-decoration: none;
      color: #ffff;
    }

    .contact-email-phone>a:hover {
      text-decoration-line: underline;
      color: #ffff;
    }

    .contact-email-phone>p {
      color: #ffff;
    }

    .home {
      display: flex;
      justify-content: left;
      padding: 10px;
      background-color: white;
      margin-left: 30px;
      margin-bottom: 20px;
      margin-top: 0px;
      position: absolute;
      float: left;
      border: none;
      padding: 1rem 2rem;
      border-radius: 10px;
      text-decoration: none;
      color: #0e0d0d;
      font-family: sans-serif;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      transition: background 250ms ease-in-out, transform 150ms ease;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .home:hover,
    .home:focus {
      background: #434344;
      color: #fff;
    }

    .home:focus {
      outline: 1px solid #fff;
      outline-offset: -4px;
      color: #fff;
    }

    .home:active {
      transform: scale(0.99);
      color: #fff;
    }
    /*   Back button CSS*/

    .button {
      display: inline-block;
      border: none;
      padding: 1rem 2rem;
      margin-right: 20px;
      margin-left: -20px;
      border-radius: 40px 0px 0px 40px;
      text-decoration: none;
      background: #070707;
      color: #ffffff;
      font-family: sans-serif;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      transition: background 250ms ease-in-out, transform 150ms ease;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .button:hover,
    .button:focus {
      background: #434344;
    }

    .button:focus {
      outline: 1px solid #fff;
      outline-offset: -4px;
    }

    .button:active {
      transform: scale(0.99);
    }
    /*  back button CSS end*/

    html,
    body,
    body div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    time,
    mark,
    audio,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
    }

    section {
      height: 100%;
      background-color: #ede6c1;
      padding: 15px;
      margin: auto;
      text-align: center;
      width: 100%;
    }

    p {
      font-family: "Times New Roman", Times, serif;
      color: #080000;
    }

    article {
      border: black;
      width: 100%;
      height: 100%;
      padding: 10px;
      margin: 10px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      box-sizing: border-box;
      margin: 0;
      font-family: Arial;
    }
    /*  Images table content start */

    .row {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap;
      /* IE10 */
      flex-wrap: wrap;
      padding: 0 4px;
      justify-content: center;
    }
    /* Create four equal columns that sits next to each other */

    .column {
      width: 100%;
      height: 100%;
      -ms-flex: 25%;
      /* IE10 */
      flex: 20%;
      max-width: 15%;
      padding: 0 4px;
      margin: 30px;
    }

    .column img {
      margin: 30px;
      vertical-align: middle;
      width: 100%;
      -webkit-box-shadow: 10px 10px 10px -6px #777;
      -moz-box-shadow: 10px 10px 10px -6px #777;
      box-shadow: 10px 10px 10px -6px #777;
      border-radius: 5px;
      background-color: #070707;
      width: 100%;
      height: 100px;
      background-color: white;
    }

    .column img:hover {
      transform: scale(1.3);
      border-style: solid;
      border-width: grey 1px;
      border-color: darkgrey;
    }
    /* Responsive layout - makes a two column-layout instead of four columns */

    @media screen and (max-width: 800px) {
      .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
      }
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

    @media screen and (max-width: 600px) {
      .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }
    }

    label {
      float: none;
      margin-left: 40px;
    }
    /*  Images table content end*/
    /* Footer CSS*/

    footer {
      background-color: #999179;
      height: 153px;
      padding: 10px;
      text-align: center;
    }

    .header-dropdown-menu {
      align-items: right;
      text-align: right;
      background-color: #535c5f;
      height: 60px;
    }

    .sub-nav {
      border: none;
    }

    .top-menu-nav {
      display: flex;
      height: 50px;
      align-items: center;
    }

    .top-menu-nav:hover {
      background-color: #2f3537;
    }

    .sub-nav {
      list-style-position: outside;
    }

    nav,
    .content {
      max-width: 960px;
      margin: 0 auto;
    }

    .top-nav {
      font-size: 0;
      border-block-color: inherit;
      margin-right: 70px;
    }

    .top-nav li {
      display: inline-block;
      width: 20%;
      text-align: right;
      background: #292929;
      position: relative;
      z-index: 10;
    }

    .top-nav>li a {
      text-decoration: none;
      font-size: 24px;
      line-height: 1.5em;
      text-align: center;
      display: block;
      color: lightgrey;
    }

    li {
      padding-top: 10px;
    }

    .sub-nav>li>a:hover,
    .tert-nav>li>a:hover {
      color: grey;
      text-decoration: underline;
    }
    /*  Wokring on centralising the drop down text indented*/

    .sub-nav {
      visibility: hidden;
    }

    .top-nav li:hover .sub-nav {
      visibility: visible;
      padding-top: 15px;
    }

    .sub-nav>li,
    .sub-nav>li a {
      display: block;
      width: 100%;
      position: relative;
      background: white;
      color: black;
    }

    .sub-nav>li>a {
      border-top: none;
      border-radius: 5px;
      color: black;
    }

    .tert-nav {
      position: absolute;
      width: 100%;
      visibility: hidden;
    }

    .tert-nav>li,
    .tert-nav>li>a {
      display: block;
      width: 100%;
      background: #bada55;
    }

    .tert-nav>li>a {
      border: 1px solid #3c3c3c;
      border-bottom: none;
    }

    .tert-nav>li:last-child a {
      border-bottom: 1px solid #3c3c3c;
    }

    @media screen and (max-width: 900px) {
      .header-dropdown-menu {
        align-items: right;
        displ@media screen and (max-width: 900px) {
          .header-dropdown-menu, .top-nav, .top-menu-nav, .sub-nav {}
        }
  </style>

</head>

<body class="fullbody">


  <header>

    <div class="logo">
      <image src="images/cw_logo.png">
        </br>
        </br>
        <div class="contact-email-phone">
          <a href="email@emailyou.com">email@emailyou.com</a>
          </br>

          <p>1234567890</p>
        </div>
    </div>


    >

    <a class="home" href="../Home-Page/index.html" role="button">Home</a>
    </br>

    <button class="button" onclick="goBack()">Go Back</button>



  </header>


  <!-- Drop down menu content-->
  <div class="header-dropdown-menu">

    <ul class="top-nav">
      <li class="top-menu-nav"><a href="#">Menu</a>
        <ul class="sub-nav">
          <li><a href="#">wood Type</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Specification</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Images</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </li>
    </ul>
  </div>


  <!-- the main content of the page -->
  <section>
    <article>

      <h1> Colours</h1>
      <div class="row">
        <div class="column">
          <img src="images/seattle-colours-range/001-pure-white.jpg" style="width:100%" name="pure white">
          <label>001 pure white</label>
          <img src="images/seattle-colours-range/003-silk-white.jpg" style="width:100%">
          <label>003 silk white</label>
          <img src="images/seattle-colours-range/006-pearl.jpg" style="width:100%">
          <label>006 Pearl</label>
        </div>
        <div class="column">
          <img src="images/seattle-colours-range/012-crisp-linen.jpg" style="width:100%">
          <label>012 crisp linen</label>
          <img src="images/seattle-colours-range/019-string.jpg" style="width:100%">
          <label>019 string</label>
          <img src="images/seattle-colours-range/032-sea-mist.jpg" style="width:100%">
          <label>032 sea mist</label>
        </div>
        <div class="column">
          <img src="images/seattle-colours-range/049-stone-grey.jpg" style="width:100%">
          <label>049 stone grey</label>
          <img src="images/seattle-colours-range/051-brown-grey.jpg" style="width:100%">
          <label>051 brown grey</label>
          <img src="images/seattle-colours-range/080-taupe-grey.jpg" style="width:100%">
          <label>080 taupe grey</label>

        </div>
      </div>



    </article>
  </section>

  <footer>
    <span id="footer">All Rights Reserved © Copyright 2019 Custom West</span>
  </footer>
</body>
<script src="seattle-colours.js"></script>

</html>
...