Пример руководства по DivCSS: CSS-список смешанной графики и текста с верхней и нижней структурой

Сегодня мы вместе научимся составлять часто используемый «список CSS со смешанной графикой и текстом». Сначала проанализируйте характеристики этого списка, затем напишите HTML-код и, наконец, примените стили CSS для достижения конечного эффекта.

Эффект этого примера:


Автор этой статьи: 52CSS.com Ли Сян. Если вы хотите перепечатать статью, создайте ссылку на этот сайт (http://www.52css.com/), и вам не разрешается изменять содержание статьи по своему желанию. и сохраните текст данного заявления об авторских правах!
Вверху находится название столбца, который мне нравится, 52css и более, а затем низ разделен на два блока: в одном отображаются миниатюры изображений, а в другом — текстовые ссылки, оба из которых могут быть достигнуты с помощью ul+li. Используя приведенный выше анализ, запустите следующую кодировку HTML:


Поместите все элементы в слой с обёрткой по идентификатору и установите цвет границы #e5f2f8. Это должно выглядеть так, как будто у него есть эффект тени.
Затем создайте внутри него список слоев, а внутри списка создайте три слоя, а именно:


Приступим к написанию HTML-кода подробно:


Переместите h3 влево в слое list_title, чтобы создать заголовок, переместите вправо, чтобы создать больше связей, и создайте изображения ul+li, оставленные плавающими в слое list_pic;
Создайте ul+li в слое list_text, чтобы создать список новостей;
В самом низу поместите слой с классом Clear, чтобы очистить поплавки.

Используя приведенную выше основу, начните следующее кодирование CSS:
Общее заявление:

Установите стиль обтекания всего слоя, ширина — 450 пикселей, верхнее и нижнее поля — 30 пикселей, левая и правая стороны выровнены по горизонтали, а граница установлена ​​на синий цвет (здесь для увеличения эффекта тени).


Определение стиля части заголовка list_title:
Установите ширину 426 пикселей, верхнее и нижнее отступы — 0, а левое и правое поля — 10 пикселей.
Элемент h3 с именем столбца перемещается влево; ширина составляет 300 пикселей;
Установите элемент диапазона плавающим вправо с шириной 60 пикселей, выровняйте текст по правому краю и установите ссылку;


Определение стиля слоя изображения list_pic:
Сначала используйте список ul и установите ширину 433 пикселя;
Что требует внимания, так это настройка отступов: padding:15px 0 0 15px;
(Причина, по которой правое внутреннее поле установлено на 0, заключается в проблеме с пробелами в li, что улучшает производительность страницы. Вы также можете установить его на: дополнение: 15px 15px 0 15px; эффект контраста)
li устанавливает размер блока изображения 94 пикселя и отступ: 0 14 пикселей 0 0;
Цвет рамки изображения меняется с синего на серый при наведении курсора мыши;

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


Определение стиля текстового слоя list_text:
Определите список новостей через ul+li. Следует отметить, что временной интервал перемещается вправо, а текст пишется на верхней границе синей пунктирной линией справа, а верхнее поле установлено на 10 пикселей;


Наконец, очистите число с плавающей запятой: .clear{clear:both;}