Немного забавной магии CSS и разметки (часть 1)

CSS
Немного забавной магии CSS и разметки (часть 1)

предисловие

Макет и стиль являются обязательными для каждого внешнего интерфейса. В повседневной работе вы также столкнетесь с требованиями к макету некоторых конкретных сцен, а с помощью стиля вы сможете добиться некоторых магических эффектов. Я собрал некоторые макеты, встречающиеся в повседневной разработке, а также волшебные методы написания спецэффектов, которые мне довелось найти при просмотре крупных веб-сайтов, и я поделюсь ими здесь.

Из-за недостатка места он будет разделен на 2 части. Сегодня я впервые представлю несколько интересных и практичных макетов. Следующий покажет магию стиля.

Ленивая загрузка адаптации изображения заполнителя

При отображении изображений продуктов в торговом центре, если их много, лучше будет: сначала будет изображение-заполнитель, цель которого состоит в том, чтобы сделать страницу без дрожания, что является так называемым эффектом ленивой загрузки изображений. Однако, когда дело доходит до адаптации, это головная боль, особенно горизонтальное и вертикальное переключение экрана мобильного телефона. Если он рассчитывается с помощью JavaScript, может возникнуть дрожание.

Исходя из принципа, что вместо JS можно использовать CSS, имеем следующее решение:

<div class="img-ratio">
    <img src="http://via.placeholder.com/640x384">
</div>

.img-ratio {
    width: 100%;
    position: relative;
    padding-top: 75%;
}

.img-ratio > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Его можно адаптировать к различным экранам, если пользовательский интерфейс обеспечивает замещающее изображение 4:3. На изображении ниже показаны 2 изображения разной ширины и высоты, но с одинаковыми пропорциями, оба идеально отцентрированы.

Его принцип:

  • По ширине контейнера, по соотношению ширины и высоты автоматически рассчитывается фактический размер контейнера, а дочерние элементы типа img в контейнере адаптируются к ширине и высоте.
  • Ширина родительского контейнера изображения составляет 100 %, а высота родительского контейнера в процентах составляет: 100 * 3/4 ​​= 75 %.
  • Изображение является абсолютным и полностью заполняет родительский контейнер.

Горизонтальная полоса прокрутки на мобильных устройствах

Интерфейс мобильного терминала представляет собой дюйм земли. Иногда для контроля длины прокрутки экрана некоторые модули располагаются горизонтально. Однако горизонтальное расположение создает некоторые проблемы с компоновкой.

Например, стиль полосы прокрутки мобильного терминала зависит от мобильного браузера, который отличается. Одно из решений: скрыть ось прокрутки, но неoverflow-x:hidden;, иначе он не будет двигаться. Затем вычислите ширину каждого горизонтального блока, чтобы крайний правый блок был частично открыт, чтобы пользователь знал, что за пределами экрана справа есть контент, и может скользить по горизонтали.

А если ширина горизонтальной прокрутки неизвестна, т.к. количество горизонтальных модулей может быть изменено в соответствии с потребностями бизнеса, то для горизонтальной верстки использовать float нельзя. Поскольку используется плавающий элемент, необходимо знать ширину всей горизонтальной прокрутки, и вся ширина шире, чем совокупная ширина плавающих блоков, чтобы гарантировать, что плавающий элемент не будет перенесен.

Итак, имеется следующая надпись:

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

.wrapper {
    width: 340px;
    height: 80px;
    overflow: hidden;
}

.wrapper ul {
    height: 96px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}

Его идея такова: настройка ulwhite-space:nowrap;, наборdisplay:inline-block;. Самый внешний div использует разницу в высоте, чтобы скрыть горизонтальную полосу прокрутки.

Отображение по центру с переменной шириной верхней навигации

Некоторые официальные веб-сайты имеют верхнюю панель навигации. Область содержимого панели навигации часто требуется отображать в центре, а стороны оставлять пустыми. Под панелью навигации может быть корневая линия или тень, чтобы различать верхнюю часть и основное содержание.

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

Это способ центрирования и плавания в сочетании с относительным позиционированием.

нижний колонтитул

Когда высоты области основного контента страницы недостаточно, нижний колонтитул все равно отображается внизу. Это, конечно, не относится к положению: исправлено, нижний колонтитул находится сразу под областью содержимого. Есть 2 метода.

HTML-структура выглядит следующим образом:

<html>
    <body>
        <div id="content">....</div>
        <div id="footer">....</div>
    </body>
</html>

1. Поля и отступы

html, body {
    height: 100%;
}
$footer-height: 30px;

#content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

2. гибкий макет

$footer-height: 30px;

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

Сверхширокое фоновое изображение по центру

Для некоторых традиционных порталов основная область контента имеет примерно классическую ширину, например 980 или 1000 пикселей. Иногда в качестве общего фонового изображения используется более широкое изображение, размещаемое по центру, и не прокручивайте ось по горизонтали, можно сделать так:

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

::after реализует горизонтальное и вертикальное центрирование

Можно ли также использовать псевдоэлементы для достижения центрирования? Когда я увидел это в то время, я почувствовал, что это очень волшебно.Взгляните на следующий пример:

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}

Горизонтальное направление легко понять. По вертикали можно понять, что ::after тянет img вниз к середине.

Суммировать

Представленный сегодня контент в основном основан на верстке, либо я сталкивался с ним в своей работе, либо видел на каком-то сайте, изучил и поделюсь здесь.

Конечно, их решения не уникальны. Если у вас есть лучший план макета, оставьте сообщение, я обновлю его снова и с нетерпением жду новых обменов.

PS: Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись «Super Brother Front-end Small Stack», чтобы обменяться идеями и технологиями.

Категории