Знание хладнокровия в мире CSS

внешний интерфейс CSS
Знание хладнокровия в мире CSS

Чтение делает меня счастливым - лол

Недавно я прочитал новую книгу Чжан Синьсюй "Мир CSS" и получил много хитростей и глубокое понимание CSS.

Это также в то время, когда я делюсь содержанием некоторых глав внутри компании, поэтому я сразу покажу вам содержание, которым собираюсь поделиться первым, чтобы избавить всех от смущения просмотра после покупки книги!

Последние три главы этой книги

  • Отображение и скрытие элементов
  • стиль пользовательского интерфейса
  • изменение потока

Далее я перейду непосредственно к теме и начну несистематический обмен каждой главой.

Отображение и скрытие элементов

Есть много способов сделать элемент невидимым с помощью CSS, отсечения, позиционирования за пределами экрана, изменения прозрачности и т. д. — все это возможно. Хотя они невидимы невооруженным глазом, за ними скрываются различия во многих измерениях.

Ниже приводится сводка некоторых лучших скрытых практик.Давайте выберем подходящее использование в соответствии с реальным сценарием разработки.

лучшая практика сокрытия

  • Не занимайтесь пространством, не делает использование скрипта
    <script type="text/html">
    <!-- 图片是不会发送请求的 -->
    <img src="1.jpg" />
    <!-- 如果想嵌套需要借助textarea了 -->
    <textarea style="display: none;">
        <img src="2.png" />
    </textarea>
</script>
  • Не занимает места, ресурсы можно загружать, доступ к DOM можно получить с помощью display:none
    <div id="box">成都</div>
    <script>
        let oBox = document.getElementById('box');
        console.log(oBox);  // <div id="box">成都</div>
    </script>
  • Не занимает места, есть эффект перехода при скрытии и отображении
    .hidden {
    position: absolute;
    visibility: hidden;
}

<div class="div hidden">一杯敬朝阳 一杯敬月光</div>
  • Занимает место, нельзя щелкнуть видимость: скрыто
    .vh {
    visibility: hidden;
}
  • Не занимает места, не нажимается, с клавиатуры есть доступ к нарезке клипа
    .out {
    position: relative;
    left: -999em;
}
.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

<div class="clip">
    <div class="out">青花瓷</div>
</div>
  • Занимают место, не могут щелкнуть, клавиатура может получить доступ к родственнику
    <div style="position: relative;top: -999em;">狮子座</div>
  • Занять место, вы можете нажать непрозрачность
    <div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
  • Скрытый текст с помощью text-indent
    <p style="text-indent: -999999px;">天下无双</p>

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

отображение и отображение элемента

Мы все знаем, что если значение display равно none, элемент и все дочерние элементы скрыты, в противном случае, если значение не равно none, все они отображаются.

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

none делает невозможным щелчок, не может быть доступен вспомогательным устройствам, таким как программы чтения с экрана, и не занимает места.На самом деле, это не только это, но и то, что вы должны знать, что

я: у меня есть вино, тогда не говори тебе никакой истории

Я знаю display:none ты не одноклассница без истории

Фоновые изображения элементов с display: none загружаются по-разному в зависимости от разных браузеров.

  1. В браузере Firefox фоновое изображение display:none не загружается, включая display:none родительского элемента.

  2. В браузерах Chrome и Safari загрузка изображения зависит от того, является ли родительский элемент none.Если родительский элемент имеет display:none, изображение не будет загружено.

    Если родительский элемент не имеет display:none, но сам имеет элемент фонового изображения, он все равно будет загружен.

  3. Под браузером IE, как ни делай, будешь запрашивать ресурсы изображения, он такой своевольный

Поэтому при фактическом развитии, например,Эффект переключения карусели изображений в шапке

Те изображения, которые должны быть скрыты по умолчанию, скрыты на дочерних элементах элемента display:none в качестве фоновых изображений.Такие небольшие изменения могут значительно улучшить загрузку страницы, а также являются очень полезными советами.

whatever

Вышеупомянутое очень интересно, но на самом деле невозможно загрузить графические ресурсы со всеми фоновыми изображениями.

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

до скорого

Говорят, что display:none делает вещи самыми чистыми и чистыми, и их нельзя щелкнуть или потрогать, но что, черт возьми, происходит в следующей ситуации?

Выходи объяснять, мы все цивилизованные люди и никогда не будем применять силу!

<form action="/index.php">
    <input type="submit" id="hi" style="display: none;">
    <label for="hi">提交</label>
</form>

Скрытая кнопка вызывает щелчок, запуская отправку формы, это явление происходит в модных браузерах (IE9+, современные стандартные браузеры)

Раз есть такое исключение, то какой смысл добавлять display:none?

  • Смысл таков: когда кнопка и элемент метки не находятся на горизонтальной линии, щелчок по элементу метки не вызовет позиционирование привязки.
  • Но: автор не рекомендует этого, потому что кнопка отправки теряет доступ к клавиатуре

многие из них естественны

В HTML есть много тегов и атрибутов, которые естественным образом идут с display:none

  • Теги: стиль, сценарий, диалог
  • Атрибуты:
    <input type="hidden" name="id" value="1" />
// 专门用来放置类似token或id这些隐藏信息的
// 所以说，表单元素的显隐并不影响数据的提交
// 其真正影响的是disabled属性
  • Добавлено в HTML5hiddenЭто логическое свойство позволяет скрыть элемент по своей природе.
    <div hidden>看不见我</div>
// IE11及现代标准浏览器都支持，如果做兼容需要这样写下即可
[hidden] {
    display: none;
}
  • Для старого упорядоченного списка, если дочерний элемент li имеет набор элементов с display:none, то исходный элемент с 10 фазами будет окончательно рассчитан как 9 элементов, а элемент с display:none будет установлен следующим родственным элементом.
  • Еще момент в том, что display:none фактически не влияет на реализацию анимации css3 animation, а влияет только на выполнение эффекта перехода перехода, поэтому связь между свойствами перехода и видимости лучше (старое железо убито горем)

Теперь, когда мы поговорили о видимости, давайте пригласим видимость к дебюту.

видимость и отображение элементов

видимость должна себя оправдывать,Больше, чем просто резервирование места

Смотрите много:

  1. Наследование (одна из самых интересных фич, не то что я сказал)
    • Родительский элемент устанавливает visibility:hidden, а дочерний элемент также наследует это свойство, которое также является невидимым.
    • Однако существенное отличие состоит в том, что после того, как родительский элемент установлен в скрытый, а дочерний элемент установлен в видимый, дочерний элемент можно просмотреть.
    • В этот момент родительский элемент устанавливает display:none, и дочерний элемент никогда не будет виден.
    <ul style="visibility: hidden;">
    <li style="visibility: visible;">1</li>
    <li>2</li>
    <li>3</li>
    <li style="visibility: visible;">4</li>
</ul>

2. Счетчик с CSS

Хотя visibility:hidden делает элемент невидимым, это не влияет на его эффект подсчета.результаты не будут пересчитаны

3. с переходом

Установлен элемент с параметром visible:hidden, который может хорошо показать эффект перехода

Это связано с тем, что в поддерживаемых переходом свойствах CSS есть видимость (это действительно брат), но нет свойства отображения

  1. И JS

видимость: скрытый дружественный к js в дополнение к дружественному переходу

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

На данный момент рекомендуется использовать visibility:hidden

.hidden {
    position: absolute;
    visibility: hidden;
}
let ele = document.getElementById('demo');

console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());

Что ж, вышеуказанный контент подходит к концу, давайте продолжим начинать новое путешествие, ха-ха

стиль пользовательского интерфейса

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

свойство контура, аналогичное границе

контур представляет контур элемента.Синтаксис такой же, как и у границы.Он делится на три значения: ширина, тип и цвет.

.outline {
    height: 60px;
    width: 60px;
    outline: 2px dashed #0c9;
}

Стиль тот же, но первоначальный замысел дизайна не тот, чему можно научиться у солнца и луны.

контур — это свойство, тесно связанное с взаимодействием с пользователем, тесно связанное с состоянием фокуса и доступом к клавиатуре.

Для кнопок или ссылок обычные операции с клавиатурой следующие: клавиша Tab непрерывно фокусирует элементы управления (элементы формы, такие как ссылки, кнопки, поля ввода и т. д.) последовательно или фокусируется на обычных элементах с установленным tabindex, а затем нажимает Shift+ Вкладка для обратного доступа

вот и дело!

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

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

непрофессиональное поведение

Во многих случаях, когда непосредственно в стиле сброса, очень нецелесообразно писать следующую форму

* { outline: 0 none; }
或
a { outline: 0 none; }

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

例如：
.input {
    outline: 0;
}
// 但是，必须把focus状态样式加上
.input:focus {
    border-color: Highlight
}

Наконец снова: никогда не устанавливать контур: 0 нет глобально;

Такая операция приведет к тому, что пользователь не сможет найти текущий фокус при доступе к клавиатуре, что легко вызвать путаницу.Ради всех, давайте сойдемся

Давайте возьмем некоторые сухие товары ниже: В реальной разработке иногда необходимо заменить обычные элементы элементами управления формой, чтобы получить эффект контура.

Например: кнопка отправки для завершения дизайна пользовательского интерфейса очень утомительна, поэтому используйте элемент метки, чтобы соединить цветы и связать их с этими собственными элементами управления формы через атрибут for.

[type="submit"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.btn {
    display: inline-block;
    padding: 2px 12px;
    background-color: #19b955;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
:focus + label.btn {
    outline: 1px dashed hotpink;
    outline: 3px auto -webkit-focus-ring-color;
}

<div class="panel">
    <input type="submit" id="box">
    <label for="box" class="btn">提交</label>
</div>

Настоящий контур, который не занимает места и его применение

контур — это свойство, которое не занимает никакого места в прямом смысле. Удивительно

Прямоугольный полый эффект отсечения аватара

Давайте посмотрим на карту эффектов

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

核心css是
.crop {
    overflow: hidden;
}
.crop .crop-area {
    width: 80px;
    height: 80px;
    outline: 256px solid #000;
    outline: 256px solid rgba(0, 0, 0, .5);
    background: url(about:blank);
    background: linear-gradient(to top, transparent, transparent);
    filter: alpha(opacity=50);
    cursor: move;
}
:root .crop-area {
    filter: none;
}

Используйте большой контур, чтобы получить полупрозрачную черную маску вокруг него, потому что независимо от того, насколько большой контур установлен, он не будет занимать место и влиять на макет.Что касается лишней части, просто установите переполнение: скрыто для родителя элемент. Уведомление:

  • Поскольку, учитывая, что IE8 не поддерживает rgba, вышеуказанный фильтр используется для установки прозрачности наполовину.
  • Но так как IE9 поддерживает rgba, сбросьте его с помощью :root без использования фильтра
  • Кроме того, в IE10 будут проблемы с проникновением кликов для полых элементов, поэтому установка невидимого фонового содержимого на фон может быть решена.

Трюки приложения для автоматического заполнения оставшегося пространства экрана

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

Ключ css должен установитьКонтур с очень большим диапазоном контуровАтрибуты, такие как указание 9999px, гарантируют, что независимо от того, насколько высок экран, цвет контура может быть покрыт.

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

.footer {
    height: 50px;
}
.footer > p {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px 0;
    background-color: #00a1f5;
    outline: 9999px solid #00a1f5;
    color: #fff;
    clip: rect(0, 9999px, 9999px, 0);
}

<div class="footer">
    <p>没错，我就是footer</p>
</div>

свойства курсора

Атрибут курсора курсор Мы действительно самые знакомые незнакомцы

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

В мире курсоров гораздо богаче, чем мы себе представляем, следующиеПо функциональным характеристикамДавайте классифицировать его

Ослепительный массив значений атрибутов курсора

Советы по дружбе и недружелюбию: ☆ (указывает на обычное использование)

  • общепринятый
    • курсор: авто; по умолчанию
      • Исполнение поля ввода курсор: текст (текстовый курсор)
      • Ссылки с атрибутами Href отображаются как курсор: указатель (ручной курсор)
      • кнопка ведет себя как курсор: по умолчанию (стрелка по умолчанию)
    • ☆ курсор: по умолчанию; системный курсор по умолчанию
      • Маленькая история из недоразумения:
        • Поскольку собственный стиль кнопок браузера не идеален, особенно возраст IE, черный ящик, непостоянная ширина и т. д. Так что все используют тег для имитации кнопки.При подъеме будет эффект типа руки, сохраняйте дополнительные дополнения. Таким образом, в течение длительного времени это стало практикой отрасли.
    • курсор: нет, чтобы скрыть курсор
      • Что?В чем польза?Его функция заключается в установке эффекта скрытого курсора,когда мышь неподвижна в течение 3 секунд после полного экрана при просмотре видео
      • IE8 не поддерживает, но и через пользовательский курсор для обработки
      // 自定义光标
.cur-none {
    cursor: url(transparent.cur), auto;
}
:root .cur-none {   // IE9+
    cursor: none
}
  • Ссылки и статус
    • ☆ курсор: указатель, рука
    • курсор: справка; курсор справки
      • Используйте маленький значок вопросительного знака в справочной ссылке или подсказке
      • Однако в настоящее время его редко можно увидеть в Интернете, и он используется чаще.курсор:указатель рукаиметь дело с
    • курсор: прогресс; в процессе
      • Применимый сценарий — когда веб-страница загружает js, когда сеть не очень хорошая, время загрузки js слишком велико.
      body {
    cursor: progress;
},
// 当js加载完成后再将光标cursor设为auto;
// 增加了用户体验
document.addEventListener('DOMContentLoaded', () => {
    document.body.style.cursor = 'auto';
});
    • cursor: wait;
      • Бесполезный курсор, выглядит как песочные часы
    • cursor: context-menu;
      • Контекстное меню, сложная совместимость, форма бочки с бензином, не очень полезно
  • выберите
    • ☆ курсор: текст, текст можно выделить
      • Производительность курсора по умолчанию для ввода: курсор:текст
        • Но если установитьdisabledПосле этого курсор автоматически станет курсором: по умолчанию.
      • Кроме того, если выделение текста не разрешено в современных браузерах, после установки user-select:none измените соответствующий курсор на cursor:default
      p {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}
<p>弱水三千</p>
// 不过现在最新版的浏览器都自动设置了cursor:default
    • cursor: vertical-text;
      • Вертикальный выбор, текст типографии - это вертикальная ситуация,почти нет возможности использовать
    • cursor: crosshair;
      • перекрестье, оно сравниваетПодходит для выбора цветана сцене,обычно не используется
    • cursor: cell;
      • Курсор ячейки, подходящий для разработки веб-страниц, подобных Excel.
      • И IE8 его пока не поддерживает, его тоже надо настраиватьнет возможности выступить
  • тянуть
    • ☆ курсор: двигаться;
      • Переместите курсор, указывая, что текущий элемент подвижен.
      • общийвсплывающий компонентДобавить курсор: переместите его в строку заголовка, чтобы пользователь знал, что его можно перетаскивать.
    • cursor: copy;
      • Скопируйте курсор, указывающий, что текущий элемент можно скопировать, IE8 его не поддерживает, его нужно настроить.Не практично
    • cursor: alias;
      • Курсор-псевдоним, указывающий, что текущий элемент может создать псевдоним или ярлык, как и копия выше,бесполезно
    • курсор: запрещенный и курсор: запрещенный;
      • Тот же стиль, оба указывают на запрещенный
      • Стоит отметить, что:
        • не давать отключенную кнопкуДобавить курсор: не разрешено
        • Поскольку его состояние имеет отношение только к поведению перетаскивания
        • Таким образом, отключение курсора кнопки по-прежнему используетпо умолчанию больше подходит
  • обеНовое в CSS3Тип курсора
    • зум
      • курсор: увеличить; увеличить
      • курсор: уменьшить масштаб; уменьшить масштаб
    • схватить
      • курсор: схватить; пятью пальцами открыть ладонь
      • курсор: захват; пятипалая рука
      • Вам также необходимо добавить префикс -webkit, чтобы он вступил в силу в Chrome.
      • Здесь сторона QQ Music PC выполнила такую ​​обработку курсора, как показано на рисунке ниже.
  • пользовательский курсор
    • Если вы столкнулись с некоторыми типами курсоров, которые не поддерживаются IE8, вы можете добиться совместимости с помощью пользовательских средств.
    • Браузеры, такие как chrome, могут напрямую использовать изображения png в качестве курсоров.
    • IE не работает, он по-прежнему использует специальный формат .cur
    • Самая большая роль пользовательского курсора на самом деле заключается в настройке стиля курсора в соответствии с потребностями бизнеса.
    • Но я больше не использую его

Вышеприведенный контент представил все содержание стиля пользовательского интерфейса, а также холодное знание последней главы.Не стесняйтесь, продолжайте читать, понимать, понимать, понимать

изменение потока

Вы можете не поверить, если скажете это,directionОн может изменять направление горизонтального потока, хотя мало кто знает или использует его, но это не мешает его свету и теплу

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

direction

Всего два значения:

  • направление: ltr; по умолчанию
    • ltr -> слева направо (слева направо)
    • Восточноазиатская, европейская и американская письменностьнаходятся в режиме ltr
  • direction: rtl;
    • rtl -> справа налево (справа налево)
    • Арабский и иврит написаны в режиме rtl

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

Свойство direction по умолчанию имеет свойство

можно изменитьзаменить элемент(img, ввод, текстовое поле, выбор) илиinline-block/inline-tableГоризонтальный порядок отрисовки элементов

Возьмите каштан:обратный порядок

<div class="box" dir="rtl">
    <p>我是第2名</p>
    <p>我是第一名</p>
</div>

<p dir="rtl">
    <img src="../1.jpg" alt="猫">
    <img src="../2.png" alt="狗">
</p>

Еще каштан:

Например, при создании компонента всплывающего окна,подтверждатьа такжекнопка отменыИногда это будет основано на поведении пользователяотображается в другом месте

Давайте посмотрим на роль этой функции в реальной разработке.

Пользователи Windows видят, как это выглядит:

Что видят пользователи Mac:

Ладно, тема направления подходит к концу, давайте введем последние знания, подождите, отдохните

writing-mode

Жаль, что режим записи, который меняет вертикальные и горизонтальные правила мира CSS, такая мощная функция, не была обнаружена и широко использовалась всеми.

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

режим письма может изменить типографику и превратить ее в вертикальный поток, как показано на следующем рисунке.

При использовании грамматики также необходимо помнить два набора, один из которыхIEчастная собственность, совокупностьCSS3Канонические свойства

Синтаксис CSS3:

writing-mode: horizontal-tb;    默认值
    文本流是水平方向的
writing-mode: vertical-rl; 
    文本是垂直方向的，阅读顺序从右向左(古诗的顺序)
writing-mode: vertical-lr;
    文本垂直方向，阅读顺序从左到右(水平变成了垂直展示)

Синтаксис IE:

IE的writing-mode多达11个，真正有用的记住两个就好了

-ms-writing-mode: lr-tb;    初始值
    lr-tb对应的是CSS3语法中的horizontal-tb
-ms-writing-mode: tb-rl;
    tb-rl对应的是CSS3语法中的vertical-rl
-ms-writing-mode: tb-lr;
    tb-lr对应的是CSS3语法中的vertical-lr

противАктуальная версияОрганизовать режим письма так

writing-mode: lr-tb | tb-rl | tb-lr (IE8+)
writing-mode: horizontal-tb | vertical-rl | vertical-lr;

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

Горизонтальное направление также может быть слиянием MARGIN

Мы все знаем, что вертикальные поля двух соседних элементов объединятся, когда элемент становитсявертикальный потоккогда,горизонтальное полетакже объединить

.vertical-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

<div class="div vertical-mode">
    <div class="list" style="margin-left: 20px;">one</div>
    <div class="list" style="margin-right: 50px;">two</div>
</div>

Обычные блочные элементы могут использовать margin: auto для вертикального центрирования.

img {
    display: block;
    margin: auto 0;
}

<div class="box vertical-mode">
    <img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
    <div class="demo">青花瓷</div>
    <!-- <img src="../2.png" alt=""> -->
</div>

Выше приведены коды вертикального центрирования, реализованные элементом изображения и обычным элементом блока соответственно.

text-align: center реализует вертикальное центрирование изображения (эффект, достигнутый выше)

<div class="box vertical-mode" style="text-align: center;">
    <img src="../2.png" alt="">
</div>

Используйте text-indent для достижения эффекта погружения текста

основной css

.btn:active {
    text-indent: 2px;
}
<a href="javascript:;" class="btn vertical-mode">领</a>

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

И этот эффект подходит только для сценариев с одним словом

Достичь полностью совместимых шрифтов значков с эффектом поворота значков.

Под старым IE вращать маленькие значки очень проблематично, когда в режиме письма документ превращается в вертикальный поток, английский язык, цифры и символы естественно поворачиваются.90°

Совместимость @ font-facted - это хорошоIE5.5поддерживается, поэтому даже еслиIE6а такжеIE7нет проблем

<span class="icon-play vertical-mode">剪头朝下</span>

Ну вот и все содержание последних трех глав в "Мире CSS", и наконец закончено, ха-ха, надеюсь вы сможете набраться холодных знаний, а еще нужно купить оригинальную версию книги, высылать не буду адрес, пожалуйста, поддержите работы Чжан Синьсюй

Просто несколько слов

Подведу личный итог:

В css есть много замечательных вещей, когда некоторые функции были изначально разработаны, они могут родиться только для определенных графических макетов.

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

Но это также дает нам некоторые удивительные приемы в процессе разработки, которые стоит изучить и понять.

Спасибо за просмотр, до свидания, ха-ха

Категории