От прототипа до готового продукта: пошаговая CSS-верстка

• Оригинальный адрес:Implementing a Mockup: CSS Layout Step by Step
• Оригинальный автор:Dave Ceddia
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:Baddyo
• Корректор:cyz980908,Moonliujk

Для многих людей создание макетов — одна из самых сложных частей фронтенд-разработки.

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

Если ваша обычная стратегия состоит в том, чтобы составлять макеты шаг за шагом - сначала поставьте здесь элемент А, ну, элемент А на месте, я посмотрю, как поставить туда Б... тогда вы не чувствуете себя разочарованным . CSS можно воспроизводить иначе, чем SKetch или Photoshop.

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

Мы пробежимся по тексту на небольшом примере, и я объясню вам весь код CSS, поэтому, даже если вы не знаете или забылиpositionа такжеdisplayиспользования, даже если вы не видите разницыalign-itemsа такжеjustify-contentразница, вы все равно что-то выиграете.

И мы будем использовать чистый код HTML и CSS для демонстрации, поэтому вам не нужно знать React, Vue, Angular, CSS-in-JS или даже JavaScript.

Звучит здорово, верно? Итак, приступим.

небольшой пример макета

В этой статье мы собираемся сделать макет компонента Twitter Twitter:

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

Необходимо избегать проектирования в уме при сборке макета в браузере, чтобы процесс разработки был более плавным. конечно тыМогуДостигните царства этого единства рук и мозга! Но так как вы все еще послушно читаете это, я могу предположить, что выЕще нетТакой волшебный. :)

Шаг 1: Разделяй и властвуй

Прежде чем мы начнем набирать код, давайте различать каждую единицу макета:

При создании макета с помощью CSS полезно думать о строках и столбцах. Таким образом, вы размещаете элементы сверху вниз или слева направо. Эта идея строк и столбцов идеально соответствует двум техникам компоновки в CSS: Flexbox и Grid.

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

Шаг 2: Нарисуйте прямоугольники вдоль каждой единицы

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

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

Прямоугольник упоминается, потому что вы хотите выровнять ряд элементов — например, имя пользователя в первой строке, @handle Без перевода.Woohoo. Городской словарь.com/define.PHP?…), а также время и последний ряд значков — заключите их в рамки для удобства планирования.

Согласно текущему плану, макет реализован с помощью HTML-кода следующим образом:

<article>
  <img
    src="http://www.gravatar.com/avatar"
    alt="Name"
  />
  <div>
    <span>@handle</span>
    <span>Name</span>
    <span>3h ago</span>
  </div>
  <p>
    Some insightful message.
  </p>
  <ul>
    <li><button>Reply</button></li>
    <li><button>Retweet</button></li>
    <li><button>Like</button></li>
    <li><button>...</button></li>
  </ul>
</article>

Отображаемый эффект выглядит следующим образом (вы можете нажатьздесьотладочный код):

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

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

Примечание о семантическом HTML

Вам может быть интересно, почему я выбрал именно эти элементы...article,pи т.п. почему бы не использовать обаdivШерстяная ткань?

Зачем писать это:

<article>
  <img ... />
  <div>
    <span/>
    <span/>
    <span/>
  </div>
  <p> ... </p>
  <ul>
    <li>
      <button> ... </button>
    </li>
  </ul>
</article>

вместо того, чтобы писать так?

<div>
  <img ... />
  <div>
    <div/>
    <div/>
    <div/>
  </div>
  <div> ... </div>
  <div>
    <button> ... </button>
  </div>
</div>

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

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

articleТеги представляют контент, похожий на статью, и вы можете думать о твите как о чем-то похожем на статью.

pТеги представляют собой абзацы, а текст содержания твита чем-то похож на абзац.

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

Мы не можем в двух словах рассказать о семантике HTML-элементов и о том, какие теги в каких случаях использовать. Но в большинстве случаев смысловой элемент, даже если его семантика не подходит, болееdivмощный,divЭтикетка представляет "область".

стиль элемента по умолчанию

Что определяет стиль элемента? Почему одни элементы занимают строку сами по себе, а другие могут находиться на той же строке?

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

встроенный элементОни ютятся бок о бок в линию (как слова в предложении, при необходимости с разрывами строк). Согласно стилю по умолчанию в браузере,span,buttonтак же какimgВсе являются встроенными элементами.

а такжеэлемент блочного уровня, всегда ходить в одиночестве. Чтобы понять вывод консоли, вы можете думать об элементах блочного уровня с новой строкой до и после каждого элемента.\n. какconsole.log("\ndiv\n").article,div,li,ulтак же какpТеги — это элементы блочного уровня.

Обратите внимание, что в приведенном выше примере, почему дажеimgМетка является встроенным элементом, а изображение аватара по-прежнему занимает строку? потому что под нимdivявляется элементом блочного уровня.

Тогда обратите внимание, почему @handle, имя пользователя и время находятся в одной строке? Причина в том, что ониspanтег, в то время какspanявляется встроенным элементом.

Эти триspanи буквальное «содержательное сообщение» находятся на отдельных строках, потому что (а) они заключены вdivсередина,divЕстественно начинать новую строку после; (b)pМетки также являются элементами блочного уровня, которые, естественно, начинаются с новой строки. (Причина, по которой две пустые строки не отображаются, заключается в том, что HTML объединяет соседние пустые строки так же, как и соседние пробелы.)

Если вы посмотрите внимательнее, вы обнаружите, что пространство над и под «содержательным сообщением» больше, чем пространство над и под изображением аватара, никнеймом, именем пользователя и временем. Размер этого пространства также контролируется стилем по умолчанию:pВ верхней и нижней части этикетки естьmargin.

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

Шаг 3: Нарисуйте еще несколько коробок

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

Но это не работает. Строчные элементы не препятствуют тому, чтобы блочные элементы внутри них начинали новую строку.

Чтобы аккуратно упаковать эти элементы, нам нужно использовать более мощную технологию, такую ​​как Flexbox или Grid layout. На этот раз мы используем Flexbox для ее решения.

Как работает флексбокс

Гибкая компоновка с CSS может размещать элементы в строкиилиРасполагаются столбцами. Это односторонняя система компоновки. Чтобы получить пересекающиеся строки и столбцы (так задумано компонент твита), нам нужно добавить несколько элементов-контейнеров, чтобы изменить направление.

Вы можете установить на контейнерdisplay: flex;чтобы включить раскладку Flex. Контейнер сам по себе является элементом блочного уровня (он может стоять на отдельной строке), а его внутренние элементы становятся «дочерними элементами Flex», то есть они больше не являются встроенными или элементами блочного уровня; все они управляются модулем Flex. контейнер.

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

Мы задаем внешний контейнер (зеленый блок) как столбец, синий блок — строку, а элементы в красном блоке — столбцы.

Почему стоит выбрать макет Flexbox вместо макета Grid?

По некоторым причинам я решил использовать Flexbox вместо Grid. Я считаю, что макет Flexbox проще в освоении и больше подходит для облегченных макетов. когда в макетеВ основном линияилив основном столбцы, макеты Flexbox работают лучше.

Еще один важный момент заключается в том, что даже если макет Grid моложе макета Flexbox, первый не может поколебать статус последнего. Каждый из них подходит для разных сценариев, в обоих случаях мы должны учиться и не перегружать свои навыки. В некоторых случаях вы даже можете использовать оба варианта — например, макет Grid отображает всю страницу, а макет Flexbox регулирует форму на странице.

Да-да, в мире веб-разработки общее правило замены заключается в том, что следующая волна подталкивает предыдущую волну, но в CSS это не так. Flexbox и Grid могут гармонично сосуществовать.

Решая проблемы с УСБ, все дороги ведут в Рим!

Шаг 4: Примените Flexbox

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

<article class="tweet">
  <img
    class="avatar"
    src="http://www.gravatar.com/avatar"
    alt="Name"
  />
  <div class="content">
    <div class="author-meta">
      <span class="handle">@handle</span>
      <span class="name">Name</span>
      <span class="time">3h ago</span>
    </div>
    <p>
      Some insightful message.
    </p>
    <ul class="actions">
      <li><button>Reply</button></li>
      <li><button>Retweet</button></li>
      <li><button>Like</button></li>
      <li><button>...</button></li>
    </ul>
  </div>
</article>

(код здесь)

Похоже, ничего не изменилось.

Это потому чтоdivНевидимый как элемент блочного уровня (вводится один, если нет пустой строки). Когда вам нужен контейнер, который обертывает другие элементы, кромеdivНет более семантически подходящего выбора.

Вот наш первый фрагмент кода CSS, который мы поместим в наш HTML-документ.headпомеченstyleвнутри:

.tweet {
  display: flex;
}

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

в CSS с.Селектор в начале представляет собой селектор класса. Зачем.? Я не знаю. Просто нужно запомнить это правило.

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

Поскольку контейнер Flex по умолчанию:

• выстроить подпункты;
• Сделайте дочерние элементы той же ширины, что и их содержимое, и—
• Выравнивает рост всех детей до роста самого высокого ребенка.

мы можем использоватьalign-itemsсвойство для управления выравниванием по вертикали.

.tweet {
  display: flex;
  align-items: flex-start;
}

align-itemsЗначение по умолчаниюstretch, и установите его наflex-start, выравнивает дочерние элементы по верхней части контейнера,а такжеДержите детей на их соответствующей высоте.

Диалектика ориентации: строки или столбцы?

Кроме того, ориентация flex-контейнеров по умолчаниюflex-direction: row;. Да, направление — «строки», хотя нам может показаться, что это больше похоже на две колонки. Подумайте об этом, как дети выстроились в очередьРяд, что облегчает понимание.

Что-то вроде этого изображения вазы или изображения двух лиц. Он виден как гребень и вершина сбоку.

Wikipedia

Больше места для текстового контента

Дети гибкого макета принимают только желаемую ширину, но нам нужноcontentСделайте площадь максимально просторной.

Поэтому мы дадимcontentэтот div установленflex: 1;Атрибуты. (У div есть имя класса, поэтому мы снова можем использовать селектор класса!)

.content {
  flex: 1;
}

Нам также нужно установить аватаркуmargin, к счастью, добавьте пробел между аватаркой и текстом:

.avatar {
  margin-right: 10px;
}

Глаз больше радует!

поля и отступы

Тогда... зачем использоватьmarginвместоpadding? Почему он должен быть установлен справа от аватара, а не слева от текстового содержимого?

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

По крайней мере, в макете англоязычного интерфейса направление потока документов — слева направо и сверху вниз, поэтому каждый элемент «зависит» от элементов слева от него и над ним.

В CSS на позиционирование каждого элемента влияют элементы слева и над ним. (по крайней мере, когда вы встречаетесьposition: absoluteДо тех парней, как это. )

Принципы SoC (разделение ответственности)

С точки зрения технической реализации, как установитьavatarа такжеcontentПромежутки между ними такие же. Он такой же широкий, как и должен быть, нет.borderвмешательство (paddingсуществуетborderвнутри; иmarginснаружи).

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

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

Если мы установим маржу вcontentлевая сторона, а потом в один прекрасный день мы удалилиavatar, но предыдущий разрыв все еще там. Мы также должны исследовать, что вызывает дополнительное пространство (отtweetконтейнер? еще изcontentШерстяная ткань? ) и избавиться от него.

или еслиcontentустановить левое поле, и мы хотим поставитьcontentЗамените другими элементами, мы должны помнитьзаполнить пробел.

Ладно, ради 10 пикселей не нужно столько времени тратить, достаточно установить поля справа и снизу от аватара. Приступаем к кодированию.

удалить стиль списка

неупорядоченный списокulи элементы списка в немliСкрывает много места с левой стороны и несколько точек в горошек. Это не тот эффект, который нам нужен.

Мы можем очистить все пробелы в левой части ненумерованного списка. Мы также собираемся превратить его во гибкий контейнер, чтобы кнопки внутри выровнялись (сflex-direction: row).

Элемент списка имеет атрибут, которыйlist-style-type, значение по умолчаниюdisc, чтобы каждый элемент списка начинался с точки, мы используемlist-style: none;(list-styleЯвляетсяАббревиатура свойство, который включает в себя несколько других свойств, в том числеlist-style-type), чтобы отключить эффект.

.actions {
  display: flex;
  padding: 0;
}
.actions li {
  list-style: none;
}

.actionsЕще один селектор класса. Оригинал.

а также.actions liселектор, что означает "actionsВсе элементы классаlielement". Это комбинация селектора класса и селектора элемента.

Пространства, используемые для разделения составных селекторов, представляютсужение выбора. На самом деле CSS считывает селекторы в обратном порядке. Процесс заключается в том, чтобы «сначала найти всеli, то в этихliИмя класса, найденное вactionsте". Но независимо от того, понимаете ли вы это в прямом или обратном порядке, результат один и тот же. (ВStackOverflowПодробнее)

Кнопка прокрутки

Есть несколько способов выровнять кнопки по горизонтали.

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

Они выравнивают текст по левому краю, центру, правому краю и «выравнивают», что означает, что он заполняет всю строку.

В макете Flexbox вы можете использоватьjustify-contentсвойства для достижения выравнивания. уже настроенflex-direction: row(значение по умолчанию, которое также используется в этой статье), вы можете передатьjustify-contentВыровняйте дочерние предметы влево или вправо.justify-contentЗначение по умолчаниюflex-start(поэтому все элементы выровнены по левому краю). если мы дадим.actionsнастройки элементаjustify-content: space-between, они будут равномерно распределяться по ряду, например:

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

На этот раз мы даем каждому элементу списка установить отступ с правой стороны, поместив их отдельно. Но также ко всей сборке твитов устанавливается граница, чтобы мы могли визуально измерить эффект. использовать1px solid #cccСплошная серая линия границы шириной 1 пиксель.

.tweet {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
}
.actions li {
  list-style: none;
  margin-right: 30px;
}

Сейчас эффект такой:

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

.tweet {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
  padding: 10px;
}

Теперь у компонента твита есть отступы, но в некоторых местах он по-прежнему пуст. Если мы используем инструменты отладки браузера, чтобы выделить элемент, мы обнаружим, чтоpа такжеulЭлементы имеют верхние и нижние поля верхних и нижних (в отладчике Chrome, поля отображаются в апельсине, а прокладки показаны зеленым):

Есть еще одна интересная деталь;между строкВерхнее и нижнее поля равноудалены — двойной интервал не накладывается! Поскольку CSS имеет вертикальноеколлапс маржиФеномен. Когда верхнее и нижнее поля идут рука об руку, большее поле «съедает» меньшее. Подробнее см.CSS-трюк: схлопывание полей.

Для этого примера макета я бы вручную отрегулировал.author-meta,pа такжеulправое поле. Если вы хотите разработать веб-сайт в реальной жизни, я предлагаю вам рассмотреть возможность использованияCSS resetВ качестве основы для разработки он способствует кросс-браузерной совместимости.

p, ul {
  margin: 0;
}
.author-meta, p {
  margin-bottom: 1em;
}

использовать,Разделяя селекторы, вы можете применять стили к нескольким селекторам одновременно. следовательноp , ulозначает "всеpэлементы и всеulэлемент". То есть, комбинация двух.

Здесь мы используем новую единицу измерения,1emсерединаem. один блокemравныйbodyРазмер шрифта в пикселях на этикетке.bodyРазмер шрифта по умолчанию для меток:16px(высотой 16 пикселей), поэтому в этом примере1emэквивалентно16px.emизменяется с размером шрифта, поэтому вы можете использовать1emЧтобы выразить «Я хочу, чтобы поле под текстом было таким же, как высота текста, независимо от высоты текста».

Теперь эффект следующий:

Теперь давайте немного уменьшим изображение и превратим его в круг. Мы устанавливаем его ширину и высоту на 48 пикселей, что точно соответствует ширине и высоте аватара Twitter.

.avatar {
  margin-right: 10px;
  width: 48px;
  border-radius: 50%;
}

мы используемborder-radiusдля установки закругленных углов, существует несколько способов определить значение этого свойства. Если вы хотите получить эффект небольшого закругленного угла, вы можете использовать скотч.px,emили числовое присвоение других имен единиц. Напримерborder-radius: 5pxЭффект:

еслиborder-radiusИ половина ширины установлена ​​высокая (в настоящем примере эквивалентна 24 пикселям), эффект - это круг. Но формулировка удобнееborder-radius:50%, поэтому нам не нужно знать точный размер, CSS вычислит точный результат. Даже если значения ширины и высоты изменятся в будущем, нет необходимости повторно изменять значения атрибута!

прилагать настойчивые усилия

Есть еще места для полировки.

Мы установим шрифт Helvetica (тот, который используется Twitter), уменьшим размер шрифта, выделим имя пользователя полужирным шрифтом и изменим порядок имени пользователя @handle (в HTML-коде), чтобы оно было точно то же, что твиттер. :D

.tweet {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
  padding: 10px;
  /* 
    更改字体和字号。
    在 .tweet 选择器上设置的 CSS 效果，其所有子元素都会继承。
    （除了按钮。按钮不太合群）
  */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.name {
  font-weight: 600;
}

.handle,
.time {
  color: #657786;
}

font-weight: 600;Эффект эквивалентенfont-weight: bold;. Шрифты бывают разных уровней насыщенности, от 100 до 900 (от самого светлого до самого темного).normal(По умолчанию) эквивалентно 400.

Кроме того, комментарии в CSS пишутся не так, как в JavaScript или других языках.//начало. Некоторые браузеры поддерживают//стилизованные комментарии CSS, но не во всех браузерах. в стиле Си/* */Окружите себя аннотацией для душевного спокойствия.

Еще один совет: вы можете использоватьпсевдоэлементДобавьте выпуклость между «ручкой» и «временем». Этот символ выпуклости предназначен исключительно для украшения и не имеет определенной семантики, поэтому его реализация с помощью CSS не загрязнит семантическую структуру HTML.

.handle::after {
  content: " \00b7";
}

::afterСоздал псевдоэлемент, который находится в.handleПоследний внутри элемента ("за" содержимым элемента). вы также можете использовать::beforeСоздание псевдоэлементов. Может датьcontentСвойство назначает любое буквальное содержимое, включая символы Unicode. Вы можете делать все, что хотите, как и любой другой элемент. Псевдоэлементы идеально подходят для реализации значков, напоминаний или других мелких трюков.

кнопка со значком

Осталось сделать еще одну работу — заменить кнопку значком. мы вheadДобавьте к тегу иконочный шрифт Font Awesome:

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>

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

<ul class="actions">
  <li>
    <button>
      <i
        class="fas fa-reply"
        aria-hidden="true"
      ></i>
      <span class="sr-only">Reply</span>
    </button>
  </li>
  <li>
    <button>
      <i
        class="fas fa-retweet"
        aria-hidden="true"
      ></i>
      <span class="sr-only">Retweet</span>
    </button>
  </li>
  <li>
    <button>
      <i
        class="fas fa-heart"
        aria-hidden="true"
      ></i>
      <span class="sr-only">Like</span>
    </button>
  </li>
  <li>
    <button>
      <span aria-hidden="true">...</span>
      <span class="sr-only">More Actions</span>
    </button>
  </li>
</ul>

Font Awesome — это иконочный шрифт, который работает с курсивными тегами.iМогут отображаться значки. Просто потому, что это шрифт, те свойства CSS, которые можно использовать для текста (например,colorа такжеfont-size) Нанесите на значок шрифта.

Мы внесли некоторые изменения, чтобы улучшить доступность кнопок:

• характеристикаaria-hidden="true"Заставьте программы чтения с экрана игнорировать этот значок.
• sr-onlyКлассы встроены в Font Awesome. Это делает элемент невидимым для вас, но может быть прочитан программами чтения с экрана.

Вот курс, который ведет Марси СаттонБесплатный курс Egghead по доступности кнопок со значками.

Теперь мы добавим к кнопке некоторые стили — удалив границу, раскрасив ее и увеличив размер шрифта. также установитьcursor: pointer, превращает курсор мыши в «руку», как гиперссылку. Наконец, используйте.actions button:hoverВыберите кнопки в состоянии наведения и сделайте их синими.

.actions button {
  border: none;
  color: #657786;
  font-size: 16px;
  cursor: pointer;
}
.actions button:hover {
  color: #1da1f2;
}

Вот окончательный эффект излучения компонента Tweet:

Если вы хотите отладить код самостоятельно, перейдите кпесочницаиди сюда.

Как улучшить свой уровень CSS

Лучшее, что вы можете сделать для улучшения CSS, — это попрактиковаться.

Скопируйте свой любимый веб-сайт. Дизайнеры и художники называют это «копированием». я написалИзучите React методом копирования, принципы которого применимы и к CSS.

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

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

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.