БЛОГ НА HUSL


Верстка шапки слайдера

Автор вопроса: wfamilyweb

Верстаю слайдер Фигмовский слайдер. Наверстал следующее

@charset "UTF-8";

/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: Roboto;
}

.wrapper {
  /*min-height: 100%;*/
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.wrapper ._container {
  width: 80.5555555556%;
  /*padding: 0px 15px;*/
  margin: 0px auto;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.wrapper ._container .news header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 120px;
}

.wrapper ._container .news header h1 {
  width: 23.9655172414%;
  height: 60px;
  margin-left: 0px;
  /*margin-top: 120px;*/
  margin-right: 27.7586206897%;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  /*120%*/
  color: #527CCD;
}

.wrapper ._container .news header .slider-navigation {
  width: 48.275862069%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /*margin-top: 120px;*/
}

.wrapper ._container .news header .slider-navigation .slider-scrollbar {
  width: 31.0344827586%;
  height: 0px;
  margin-top: 30px;
  border-bottom: 1px solid #C8D9FB;
}

.wrapper ._container .news header .slider-navigation .scrollbar-arrows {
  margin-left: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.wrapper ._container .news header .slider-navigation .scrollbar-arrows .scrollbar-left__arrow {
  /*margin-top: 90px;*/
  width: 60px;
  height: 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #C8D9FB;
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  margin-right: 40px;
}

.wrapper ._container .news header .slider-navigation .scrollbar-arrows .scrollbar-right__arrow {
  /*margin-top: 90px;*/
  width: 60px;
  height: 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #C8D9FB;
  -webkit-transform: -matrix(-1, 0, 0, 1, 0, 0);
  transform: -matrix(-1, 0, 0, 1, 0, 0);
}


/*
.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}
*/
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>TestSlider</title>
</head>

<body>
  <div class="wrapper">
    <div class="_container">
      <div class="news">
        <header>
          <h1>Актуальное</h1>
          <div class="slider-navigation">
            <div class="slider-scrollbar"></div>
            <div class="scrollbar-arrows">
              <div class="scrollbar-left__arrow"></div>
              <div class="scrollbar-right__arrow"></div>
            </div>
          </div>
        </header>
      </div>
    </div>
  </div>
</body>

</html>

Привожу scss файл

/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: Roboto;
}

.wrapper {
  /*min-height: 100%;*/
  overflow: hidden;
  display: flex;
  flex-direction: column;
  ._container {
    width: 1160px / 1440px * 100%;
    /*padding: 0px 15px;*/
    margin: 0px auto;
    box-sizing: content-box;
    .news {
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 120px;
        h1 {
          width: 278px / 1160px * 100%;
          height: 60px;
          margin-left: 0px;
          /*margin-top: 120px;*/
          margin-right: 322px / 1160px * 100%;
          font-family: Roboto;
          font-style: normal;
          font-weight: 700;
          font-size: 50px;
          line-height: 60px;
          /*120%*/
          color: #527CCD;
        }
        .slider-navigation {
          width: 560px / 1160px * 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          /*margin-top: 120px;*/
          .slider-scrollbar {
            width: 360px / 1160px * 100%;
            height: 0px;
            margin-top: 30px;
            border-bottom: 1px solid #C8D9FB;
          }
          .scrollbar-arrows {
            margin-left: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .scrollbar-left__arrow {
              /*margin-top: 90px;*/
              width: 60px;
              height: 60px;
              box-sizing: border-box;
              border: 1px solid #C8D9FB;
              transform: matrix(-1, 0, 0, 1, 0, 0);
              margin-right: 40px;
            }
            .scrollbar-right__arrow {
              /*margin-top: 90px;*/
              width: 60px;
              height: 60px;
              box-sizing: border-box;
              border: 1px solid #C8D9FB;
              transform: -matrix(-1, 0, 0, 1, 0, 0);
            }
          }
        }
      }
    }
  }
}


/*
.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}
*/

см. режим На всю страницу

  1. Необходимо, чтобы было как на макете, а именно, чтобы заголовок h1, панель прокрутки слайдера .slider-navigation были отображены с отступом от верха страницы на 120px, чтобы кнопки со стрелками прокрутки слайдера .slider-left__arrow, .slider-right__arrow были по высоте такими же как и заголовок h1 - 60px, полоса прокрутки .slider-scrollbar была по центру (по высоте) относительно заголовка h1 и кнопок прокрутки слайдера .scrollbar-arrows (с отступами от верха и низа по 30px).

  2. Также необходимо, чтобы .slider-scrollbar находился ближе к .scrollbar-arrows (чтобы расстояние между ними составляло 40px) и чтобы .slider-scrollbar по длине был значительно длиннее (чтобы было как на макете).

Подскажите как этого добиться.

На данный момент верстка следующая

._container {
  width: 1160px / 1440px * 100%;
  /*padding: 0px 15px;*/
  margin: 0px auto;
  box-sizing: content-box;
  .news {
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // отступ всей шапки от верха страницы
      margin-top: 120px;
      h1 {
        width: 278px / 1160px * 100%;
        height: 60px;
        margin-left: 0px;
        /*margin-top: 120px;*/
        margin-right: 322px / 1160px * 100%;
        font-family: Roboto;
        font-style: normal;
        font-weight: 700;
        font-size: 50px;
        line-height: 60px;
        /*120%*/
        color: #527CCD;
      }
      .slider-navigation {
        width: 560px / 1160px * 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*margin-top: 120px;*/
        .slider-scrollbar {
          width: 360px / 1160px * 100%;
          height: 0px;
          // отступ сверху внутри панели со слайдером и также соответственно от заголовка h1
          margin-top: 30px;
          border-bottom: 1px solid #C8D9FB;
        }
        .scrollbar-arrows {
          margin-left: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .scrollbar-left__arrow {
            /*margin-top: 90px;*/
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            border: 1px solid #C8D9FB;
            transform: matrix(-1, 0, 0, 1, 0, 0);
            margin-right: 40px;
          }
          .scrollbar-right__arrow {
            /*margin-top: 90px;*/
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            border: 1px solid #C8D9FB;
            transform: -matrix(-1, 0, 0, 1, 0, 0);
          }
        }
      }
    }
  }
}


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.