Создание списков или элементов страниц, похожих на списки, с помощью CSS всегда было темой дискуссий. Сегодня мы изучим часто используемый список в блогах. Мы узнали много способов создания списков. Вот примеры, к которым вы можете обратиться:
Рендеринг этого примера:
Сначала взгляните на его структуру. Установите дату временного слоя слева, заголовок статьи h2, мета-описание слоя статьи и предметное содержание статьи p.
Пример исходного кода
[www.downcodes.com] Поместите все элементы в слой с оберткой по идентификатору,
Приступим к написанию HTML-кода подробно:
Пример исходного кода
[www.downcodes.com] 03 сентября
От: www.downcodes.com | Редактор: downcodes.com | Нет ответа?
Новая вкладка: всякий раз, когда вы открываете новую вкладку, вы интуитивно видите наиболее посещаемые веб-сайты, наиболее часто используемые поисковые системы, недавно добавленные в закладки страницы, недавно закрытые вкладки и т. д. .
Ярлыки приложений: включайте веб-приложения, не открывая браузер. Ярлыки приложений напрямую загружают часто используемые онлайн-приложения.
26 августа
От: www.downcodes.com | Редактор: downcodes.com | Нет ответа?
Новая вкладка: всякий раз, когда вы открываете новую вкладку, вы интуитивно видите наиболее посещаемые веб-сайты, наиболее часто используемые поисковые системы, недавно добавленные в закладки страницы, недавно закрытые вкладки и т. д. .
Ярлыки приложений: включайте веб-приложения, не открывая браузер. Ярлыки приложений напрямую загружают часто используемые онлайн-приложения.
22 августа
От: www.downcodes.com | Редактор: downcodes.com | Нет ответа?
Новая вкладка: всякий раз, когда вы открываете новую вкладку, вы интуитивно видите наиболее посещаемые веб-сайты, наиболее часто используемые поисковые системы, недавно добавленные в закладки страницы, недавно закрытые вкладки и т. д. .
Ярлыки приложений: включайте веб-приложения, не открывая браузер. Ярлыки приложений напрямую загружают часто используемые онлайн-приложения.
Используя приведенную выше основу, начните следующее кодирование CSS:
Общее заявление:
Пример исходного кода
[www.downcodes.com] * { маржа: 0; заполнение: 0; размер шрифта: 12 пикселей; цвет: # 666; семейство шрифтов: Arial, Helvetica, без засечек;}
тело {фон:#ebead1;}
а {цвет:#514f42;текст-декорация:нет;}
а: наведите {цвет: #669900;}
Установите для стиля переноса всего слоя ширину 650 пикселей; верхнее и нижнее поля составляют 30 пикселей, а ширина списков выравнивания по левому и правому и центру установлена на 650 пикселей для каждого слоя списка;
Пример исходного кода
[www.downcodes.com] #wrap {ширина: 650 пикселей; поле: 30 пикселей авто; переполнение: скрыто;}
.list{ ширина:650 пикселей; отступ: 0 0 20 пикселей 0; поле: 0 0 20 пикселей 0; граница внизу: 1 пиксель пунктирный #666633;}
Установите время для плавания слева, ширину 76 пикселей; text-transform: верхний регистр (строчные буквы преобразуются в верхний регистр);
Пример исходного кода
[www.downcodes.com] .list .date{ float:left;width:76px; height:58px; поля:0 20px 0 0; дополнение:2px 0 0; text-transform: верхний регистр;text-align: center;font-size :10px;font-weight: полужирный; цвет:#FFF;}
.list b {display:block; размер шрифта: 40 пикселей; цвет: # FFF;
Установите мета-слой описания заголовка; установите его нижнее поле на 25 пикселей, чтобы основной контент можно было выровнять по левому краю без переноса.
Пример исходного кода
[www.downcodes.com] .list .meta{margin:0 0 25px 0; цвет: #979680;}
.list h2 a {размер шрифта: 1.8em };
.list p{ display:block; line-height:18px;}
