Товаров: 0 (0р.)

Html красивый список: Примеры красивого оформления списков

Содержание

Оформление списков ul li для информационных блоков

.list4a {

    padding:0;

    list-style: none;

    counter-reset: li;

}    

.list4a li {

    position: relative;

    padding:12px 20px 20px 28px;

    margin-left: 40px;

    transition-duration: 0.3s;

}

.list4a li:before {

    border: 6px solid transparent;

    line-height: 30px;

    position: absolute;

    top: 0;

    left:-30px;

    width:42px;

    text-align:center;

    font-size: 13px;

    font-weight: bold;

    color: #77AEDB;

    counter-increment: li;

    content: counter(li);

    transition-duration: 0.3s;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

    }

.list4a li:hover:before {

    color: #337AB7;    

}

.list4a li:after {

    position: absolute;

    top: 0;

    left: -30px;

    width: 42px;

    height: 42px;

    border: 6px solid #3399FF;

    border-radius: 50%;

    content: »;

    opacity: 0.5;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

}

.list4a li:hover:after {

    animation: 500ms ease-in-out 0s bounceIn;

    opacity: 1;

}    

 

@keyframes bounceIn {

    0% {

        opacity: 0;

        transform: scale3d(.3, .3, .3);

    }

    20% {

        transform: scale3d(1.3, 1.3, 1.3);

    }

    40% {

        transform: scale3d(.9, .9, .9);

    }

    60% {

        opacity: 1;

        transform: scale3d(1.03, 1.03, 1.03);

    }

    80% {

        transform: scale3d(.97, .97, .97);

    }

    to {

        opacity: 1;

        transform: scale3d(1, 1, 1);

    }

}

Как сделать красивый нумерованный список HTML?

Приветствую вас, дорогие друзья, на сайте Impuls-Web!

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

Навигация по статье:

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

Код нумерованного списка HTML

Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.

Вот как выглядит код для измененного нумерованного списка HTML:

<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol>

<ol>

<li><span>1.</span>Текст</li>

<li><span>2.</span>Текст</li>

….

</ol>

Вы можете использовать данную заготовку HTML-кода, и css-стили, которые я покажу ниже, и использовать их у себя на сайте.

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

CSS-стили нумерованного списка HTML

Далее нам нужно открыть в текстовом редакторе файл стилей нашего сайта и в самом конце дописать следующие стили:

.num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; } .num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ }

.num-list li {

margin-bottom: 15px;

margin-top: 10px;

list-style: none;

}

 

.num-list li span{

background: #05A4E8; /*фон */

color: #FFF; /* цвет цифр */

margin-right: 10px; /* правый отступ */

padding: 3px 6px; /* внутренние отступы */

font-weight: bold; /*жирность цифр */

font-size:16px; /*размер шрифта */

border-radius:12px; /*скругление углов */

}

В первом фрагменте стилей с селектором .num-list li мы добавляем верхний и нижний отступ для пунктов, и убираем стандартную нумерацию.

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

Вот что у нас получилось:

  1. 1.Пункт 1
  2. 2.Пункт 2
  3. 3.Пункт 3

Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.


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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Создаем стилизованный HTML-список средствами CSS3

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

Идея

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

HTML

Ниже вы можете видель обычный упорядоченный список:

<ol>
 <li><a href=»»>List item</a></li>
 <li><a href=»»>List item</a></li>
 <li><a href=»»>List item</a>
 <ol>
 <li><a href=»»>List sub item</a></li>

 <li><a href=»»>List sub item</a></li>
 <li><a href=»»>List sub item</a></li>
 </ol>
 </li>
 <li><a href=»»>List item</a></li>
 <li><a href=»»>List item</a></li>
</ol>

CSS

Кроме этого, я постараюсь объяснить в нескольких словах, как это работает.

Эта техника использует Автоматические счетчики и нумерацию. В основном тут используются два свойства CSS 2.1: counter-reset (это начало счетчика) и counter-increment (он увеличивает предыдущее значение счетчика). Как вы увидите ниже, counter-increment будет использоваться вместе с CSS псевдо-элементами.

ol{
 counter-reset: li; /* Инициируем счетчик */
 list-style: none; /* Удаляем нумерацию по умолчанию */
 *list-style: decimal; /* Оставляем нумерацию по умолчанию для IE6/7 */
 font: 15px ‘trebuchet MS’, ‘lucida sans’;
 padding: 0;
 margin-bottom: 4em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
 margin: 0 0 0 2em; /* Добавляем левый отступ для вложенных списков */
}  

Округленная форма номеров

.rounded-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em 2em;
 *padding: .4em;
 margin: .5em 0;
 background: #ddd;
 color: #444;
 text-decoration: none;
 border-radius: .3em;
 transition: all .3s ease-out;
}

.rounded-list a:hover{
 background: #eee;
}

.rounded-list a:hover:before{
 transform: rotate(360deg);
}

.rounded-list a:before{
 content: counter(li);
 counter-increment: li;
 position: absolute;
 left: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 background: #87ceeb;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: .3em solid #fff;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all .3s ease-out;
}  

Прямоугольная форма номеров

.rectangle-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em .8em;
 *padding: .4em;
 margin: .5em 0 .5em 2.5em;
 background: #ddd;
 color: #444;
 text-decoration: none;
 transition: all .3s ease-out;
}

.rectangle-list a:hover{
 background: #eee;
}      

.rectangle-list a:before{
 content: counter(li);
 counter-increment: li;
 position: absolute;
 left: -2.5em;
 top: 50%;
 margin-top: -1em;
 background: #fa8072;
 height: 2em;
 width: 2em;
 line-height: 2em;
 text-align: center;
 font-weight: bold;
}

.rectangle-list a:after{
 position: absolute;
 content: »;
 border: .5em solid transparent;
 left: -1em;
 top: 50%;

 margin-top: -.5em;
 transition: all .3s ease-out;
}

.rectangle-list a:hover:after{
 left: -.5em;
 border-left-color: #fa8072;
}  

Небольшой бонус

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

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

Демонстрация


Вот и все!

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

Перевод статьи с red-team-design.com


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

Как в HTML создать маркированный список без маркеров (убрать точки у li)

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

Пример HTML

Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Пример HTML с CSS

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

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

<style type="text/css">
  ul {
    list-style-type: none;
  }
</style>

Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS:

<style type="text/css">
  .nobull {
    list-style-type: none;
  }
</style>

В приведенном выше коде CSS создается новый класс «nobull». Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Подсказка: Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.

Вывод примера

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

Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

Данная публикация является переводом статьи «How to create a bullet list with no bullets in HTML» , подготовленная редакцией проекта.

Как стилизовать список UL в одну строку



Я хочу отобразить этот список в одной строке.

  • Список элемент1
  • Список место № 2

Должно быть показано как

*List *List место № 2 место № 2

Какой стиль CSS использовать?

css
Поделиться Источник R.D     10 июня 2009 в 17:01

5 ответов


  • Как стилизовать wp_list_page в wordpress?

    Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS, но я не работаю. Есть идеи, как это сделать? Спасибо

  • Невозможно стилизовать UL, содержащий DIV

    Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У кого-нибудь есть идеи, как я могу это исправить? HTML / PHP: <div class=container-app…


Поделиться rz.     10 июня 2009 в 17:02



29

В современных браузерах вы можете сделать следующее (CSS3 совместимо)

ul
{
  display:flex;  
  list-style:none;
}
<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Поделиться davidlbaileysr     14 января 2015 в 03:32



15

HTML код:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS код:

ul.list li{
  width: auto;
  float: left;
}

Поделиться adel aaji     20 января 2010 в 14:26


  • Dojo dgrid: как стилизовать одну строку?

    Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.

  • Как стилизовать выпадающий список UL/LI

    У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не сделало со стилем: .dk_options ul li a { margin: 0; padding: 0; list-style-type: none; }…



11

Попробуйте также поэкспериментировать с чем-то подобным:

HTML

 <ul>
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Я сделал кодовый код, чтобы проиллюстрировать: http://codepen.io/agm1984/pen/mOxaEM

Поделиться agm1984     06 декабря 2016 в 09:28


Поделиться Matee Gojra     18 февраля 2020 в 05:48


Похожие вопросы:


Список строк в одну строку

Я пытаюсь сделать это упражнение в книге, Определение функции: onSeperateLines :: [String] -> String который принимает список строк и возвращает одну строку, которая при печати показывает строки…


Невозможно стилизовать ul вложенный в другой ul

Несмотря на то, что это простая проблема, я не могу понять, почему я не могу стилизовать вложенный ul. HTML: <div class=footer-left> <ul> <li><a…


Как стилизовать фон маркированных точек в <ul> ?

У меня есть такой список: <ul> <li class=list-item> <span>Label</span> <div class=multi-line-content> multi-<br /> line<br /> content </div>…


Как стилизовать wp_list_page в wordpress?

Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS,…


Невозможно стилизовать UL, содержащий DIV

Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У…


Dojo dgrid: как стилизовать одну строку?

Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.


Как стилизовать выпадающий список UL/LI

У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не…


Android — > ListView-как стилизовать 2 вида текста в одну строку?

у меня есть элемент списка, и я хотел бы стилизовать 2 (или более) текстовых представления в одну строку. ———————————————— | | | TEXT_VIEW_1: FOO TEXT_VIEW_2: BAR | |…


Как сделать список в одну строку в css

Я вставляю в тему пользовательский виджет, и мне нужно сделать список в одну строку, как я могу это сделать? Я все перепробовал


Как стилизовать два разных тега <ul> в HTML и CSS?

У меня есть тег ‘ul’, который уже стилизует что-то другое. Мне нужно создать еще один тег ‘ul’, чтобы стилизовать что-то еще на моей странице HTML. Это первый стиль ul : ul { list-style: none;…

Как сделать красивый список в powerpoint?

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

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

Сначала, давайте разберемся, как вообще создать маркированный список в PowerPoint?
Для этого выбираем вкладку Главная -> группа Абзац ->Маркеры (или Нумерация). Перечень будет создаваться автоматически, для этого после ввода каждой строки просто нажимайте  клавишу Enter на клавиатуре.

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

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

После применения  эффекта анимации к первой строчке в списке,  выбираем  вторую строку и  повторяем те же шаги. Рядом с каждой строчкой (с левой стороны) будет появляться порядковый номер эффекта.

Вы можете настраивать дополнительные параметры  по своему усмотрению или контролировать порядок анимации в маркированных списках путем изменения настроек на панели анимации.

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

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

Для иллюстрации данного урока использовался шаблон «Одуванчики»

Источник: ProPowerPoint.Ru

Пожалуйста, проголосуйте за статью и поделитесь с друзьями в социальных сетях!

VN:F

Rating: 10.0/ (3 votes cast)

Применение эффектов анимации к маркированным спискам, 10.0 out of 10 based on 3 ratings

Сделать это вы можете следующим образом: откройте документ PowerPoint и убедитесь, что на вкладке «Дизайн» активирована стандартная тема «Office». Обычно она активна по умолчанию, если вы не меняли настройки самостоятельно.

Далее перейдите к слайду, на котором вы хотите разместить список, и добавьте новое текстовое поле. Для этого перейдите на вкладку «Вставка | Текст». Создайте нужного размера текстовое поле, нажав на «Надпись» и затем разместите на странице поле для текста. После этого нажмите на символ маркера списка на главной вкладке в группе «Абзац».

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

Маркеры списка в PowerPoint можно разнообразить как по форме, так и по цвету. Для этого нажмите на текстовое поле, в котором вы создаете список. Рядом с символом маркеров списка на вкладке «Главная» в группе «Абзац» вы можете увидеть стрелочку.

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

Украсьте свой список в презентации PowerPoint. Списки в PowerPoint можно оформлять полностью по своему желанию

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

Если вы хотите загрузить свой символ, нажмите на кнопку «Настроить». Откроется таблица символов, где вы сможете выбрать другой подходящий значок для Вашего списка. вы также можете нажаить на кнопку «Рисунок…» и загрузить свое изображение или логотип, который вы также сможете использовать в качестве маркера списка.

Фото: компания-производитель

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

Для создания маркированных списков многоуровневые в PowerPoint 2010 и 2007 вы можете ввести в текстовых строках , как обычно. Тогда для тех уровня, который вы хотите перейти на новый уровень вы можете поместить курсор в начало строки, а затем нажмите клавишу TAB. Это добавит дополнительный уровень к списку и линия получит дополнительный отступ. В зависимости от шаблона PowerPoint, который вы выбрали, новый уровень отступа получит новую иконку маркера.

Чтобы уменьшить число уровней вы можете нажать клавишу Backspace которая удалит отступы и вернуться к предыдущему уровню.

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

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

Цвета HTML. Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

HTML Имя ЦветаHEXRGB
Красные тона:
IndianRed#CD5C5C205, 92, 92
LightCoral#F08080240, 128, 128
Salmon#FA8072250, 128, 114
DarkSalmon#E9967A233, 150, 122
LightSalmon#FFA07A255, 160, 122
Crimson#DC143C220, 20, 60
Red#FF0000255, 0, 0
FireBrick#B22222178, 34, 34
DarkRed#8B0000139, 0, 0
Розовые тона:
Pink#FFC0CB255, 192, 203
LightPink#FFB6C1255, 182, 193
HotPink#FF69B4255, 105, 180
DeepPink#FF1493255, 20, 147
MediumVioletRed#C71585199, 21, 133
PaleVioletRed#DB7093219, 112, 147
Оранжевые тона:
LightSalmon#FFA07A255, 160, 122
Coral#FF7F50255, 127, 80
Tomato#FF6347255, 99, 71
OrangeRed#FF4500255, 69, 0
DarkOrange#FF8C00255, 140, 0
Orange#FFA500255, 165, 0
Жёлтые тона:
Gold#FFD700255, 215, 0
Yellow#FFFF00255, 255, 0
LightYellow#FFFFE0255, 255, 224
LemonChiffon#FFFACD255, 250, 205
LightGoldenrodYellow#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Moccasin#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
PaleGoldenrod#EEE8AA238, 232, 170
Khaki#F0E68C240, 230, 140
DarkKhaki#BDB76B189, 183, 107
Фиолетовые тона:
Lavender#E6E6FA230, 230, 250
Thistle#D8BFD8216, 191, 216
Plum#DDA0DD221, 160, 221
Violet#EE82EE238, 130, 238
Orchid#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumPurple#9370DB147, 112, 219
BlueViolet#8A2BE2138, 43, 226
DarkViolet#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Purple#800080128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
DarkSlateBlue#483D8B72, 61, 139
Коричневые тона:
Cornsilk#FFF8DC255, 248, 220
BlanchedAlmond#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
NavajoWhite#FFDEAD255, 222, 173
Wheat#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Goldenrod#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Chocolate#D2691E210, 105, 30
SaddleBrown#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brown#A52A2A165, 42, 42
Maroon#800000128, 0, 0
Основные цвета:
Black#0000000, 0, 0
Gray#808080128, 128, 128
Silver#C0C0C0192, 192, 192
White#FFFFFF255, 255, 255
Fuchsia#FF00FF255, 0, 255
Purple#800080128, 0, 128
Red#FF0000255, 0, 0
Maroon#800000128, 0, 0
Yellow#FFFF00255, 255, 0
Olive#808000128, 128, 0
Lime#00FF000, 255, 0
Green#0080000, 128, 0
Aqua#00FFFF0, 255, 255
Teal#0080800, 128, 128
Blue#0000FF0, 0, 255
Navy#0000800, 0, 128
HTML Имя ЦветаHEXRGB
Зелёные тона:
GreenYellow#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
LawnGreen#7CFC00124, 252, 0
Lime#00FF000, 255, 0
LimeGreen#32CD3250, 205, 50
PaleGreen#98FB98152, 251, 152
LightGreen#90EE90144, 238, 144
MediumSpringGreen#00FA9A0, 250, 154
SpringGreen#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
SeaGreen#2E8B5746, 139, 87
ForestGreen#228B2234, 139, 34
Green#0080000, 128, 0
DarkGreen#0064000, 100, 0
YellowGreen#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Olive#808000128, 128, 0
DarkOliveGreen#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
DarkSeaGreen#8FBC8F143, 188, 143
LightSeaGreen#20B2AA32, 178, 170
DarkCyan#008B8B0, 139, 139
Teal#0080800, 128, 128
Синие тона:
Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
LightCyan#E0FFFF224, 255, 255
PaleTurquoise#AFEEEE175, 238, 238
Aquamarine#7FFFD4127, 255, 212
Turquoise#40E0D064, 224, 208
MediumTurquoise#48D1CC72, 209, 204
DarkTurquoise#00CED10, 206, 209
CadetBlue#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
LightSteelBlue#B0C4DE176, 196, 222
PowderBlue#B0E0E6176, 224, 230
LightBlue#ADD8E6173, 216, 230
SkyBlue#87CEEB135, 206, 235
LightSkyBlue#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
CornflowerBlue#6495ED100, 149, 237
MediumSlateBlue#7B68EE123, 104, 238
RoyalBlue#4169E165, 105, 225
Blue#0000FF0, 0, 255
MediumBlue#0000CD0, 0, 205
DarkBlue#00008B0, 0, 139
Navy#0000800, 0, 128
MidnightBlue#19197025, 25, 112
Белые тона:
White#FFFFFF255, 255, 255
Snow#FFFAFA255, 250, 250
Honeydew#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Azure#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
WhiteSmoke#F5F5F5245, 245, 245
Seashell#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
OldLace#FDF5E6253, 245, 230
FloralWhite#FFFAF0255, 250, 240
Ivory#FFFFF0255, 255, 240
AntiqueWhite#FAEBD7250, 235, 215
Linen#FAF0E6250, 240, 230
LavenderBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Серые тона:
Gainsboro#DCDCDC220, 220, 220
LightGrey#D3D3D3211, 211, 211
LightGray#D3D3D3211, 211, 211
Silver#C0C0C0192, 192, 192
DarkGray#A9A9A9169, 169, 169
DarkGrey#A9A9A9169, 169, 169
Gray#808080128, 128, 128
Grey#808080128, 128, 128
DimGray#696969105, 105, 105
DimGrey#696969105, 105, 105
LightSlateGray#778899119, 136, 153
LightSlateGrey#778899119, 136, 153
SlateGray#708090112, 128, 144
SlateGrey#708090112, 128, 144
DarkSlateGray#2F4F4F47, 79, 79
DarkSlateGrey#2F4F4F47, 79, 79
Black#0000000, 0, 0

18 CSS-списков

Коллекция отобранных вручную бесплатных примеров кода HTML и CSS-стилей . Обновление коллекции за март 2020 года. 4 новых примера.

  1. Списки начальной загрузки
  2. Bootstrap To-Do Lists
Автор
  • Дайанна Ченг
О коде

Просто еще один список определений, сетка, Sass, отзывчивый

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Сюзанна Эйчисон
О коде

Список контактов по номеру

Небольшой эксперимент с отображением контактных ссылок.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Марк Эрикссон
О коде

Таблица лидеров Forbes

Краткая таблица лидеров для списка Forbes моложе 40 лет.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Бурманский картофель
О коде

Довольно липкий

Простой пример, показывающий, насколько прекрасной может быть позиция CSS : липкая .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Милан Раринг
О коде

Анимация контрольного списка — только CSS

Простая анимация контрольного списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Габриэле Корти
О коде

Селекторы 12nth

CSS-список с настраиваемым счетчиком и эффектом прокрутки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Эрин Э. Салливан
О коде

Список упорядоченных градиентов

Простой упорядоченный список со стилями с использованием SCSS и HTML5. Градиентный фон переходит от одного к другому и обратно.IE11 дружелюбен.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Простой контрольный список CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Викас Сингх
О коде

Хорошие стили списка

transfrom: skew свойство и красивые стили списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Маттиа Асторино
Сделано с
  • HTML (мопс) / CSS (PostCSS)
О коде

Список счетчиков градиентов CSS

Пример счетчика CSS с фиксированным градиентом фона.

Совместимые браузеры: Chrome, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Сабина Робарт
О коде

Список дел

Анимированный пользовательский интерфейс с галочкой.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Дайан Ассен
О коде

Список дел

Список дел с анимацией пользовательского интерфейса и микровзаимодействиями.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Ахмед Наср
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Список выбора диспетчера файлов

Щелкните элемент списка, чтобы выбрать его.Удерживайте Ctrl , чтобы выделить несколько объектов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Sowmya Seshadri
О коде
Карты

— ListView

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Тони Бэник
Сделано с
  • HTML (тонкий) / CSS (SCSS) / JavaScript
О коде

Записная книжка полного круга

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Коллин Смит
Сделано с
  • HTML (мопс) / CSS (стилус)
О коде

Список UI

Концепция пользовательского интерфейса простого упорядоченного списка.Использование псевдоэлементов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Инес Монтани
О коде

Нумерованные списки только для CSS с формами капли

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Свен Вольферманн
О коде

Упорядоченный список CSS с ведущим нулем

Упорядоченный список CSS с нулем в начале и разным цветом чисел.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

10 фрагментов CSS для творчества в списках HTML

Список HTML — один из тех, кто выжил в однообразном мире веб-дизайна.Тенденции приходят и уходят, но упорядоченные списки

    и неупорядоченные
      по-прежнему полезны, как никогда.

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

      Мы сформировали поисковую группу, чтобы исследовать Интернет в поисках признаков творческих списков HTML.Оказывается, некоторые талантливые дизайнеры действительно выходят за рамки простых пунктов и цифр. Взглянем!

      Цвет и размер

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

      Мобильное решение

      Чем больше мы видим людей, тупо уставившихся в свои телефоны, бесконечно прокручивающих в бездну, тем легче оправдать создание длинных страниц. Но каждый бит прокрутки требует времени. Вот где интересный эксперимент. То, что отображается на больших экранах в виде неупорядоченного списка из нескольких столбцов, на мобильных устройствах превращается в простой абзац, разделенный запятыми. Это экономит время и силы пользователей, которые лучше потратить на что-то другое (например, на прокрутку своей ленты в Facebook).

      Сохраняя простоту

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

      С другой стороны…

      Думайте об этом анимированном трехмерном списке как о полной противоположности приведенному выше. Этот привлекает внимание (в хорошем смысле). Он сочетает в себе SVG и JavaScript, чтобы сделать эту небольшую группу маркеров чем угодно, но только не обычными.Это может быть отличным дополнением к онлайн-презентации или целевой странице.

      Простая временная шкала

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

      Вложенные числа

      Бывают случаи, когда упорядоченный список должен включать несколько вложенных уровней, при этом следуя последовательному числовому шаблону.К счастью, CSS counter-reset позволяет упростить автоматическую нумерацию. В этом примере список состоит из четырех уровней, а нумерация соответствует их примеру.

      Более стильное гнездышко

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

      Качество сетки

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

      Бонус: все списки

      CSS имеет ряд встроенных опций стилей списка — больше, чем вы думаете.Эта ручка предлагает удобное изложение различных стилей, а также примеры использования изображений и значков Font Awesome вместо традиционных маркеров.

      Лучшие Объявления

      Списки

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

      Что ж, когда дело доходит до добавления списков к нашему контенту, они часто оставляют желать лучшего. Однако приведенные выше примеры доказывают, что нам не нужно соглашаться на дефолт.Немного CSS (и даже немного JavaScript) может иметь большое значение для того, чтобы сделать содержимое списка более интересным и более легким для чтения.

      рецептов в стиле списка | CSS-уловки

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

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

      Основы

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

      Прорыв посередине

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

      Вложенные десятичные числа

      Перевернутый список 10 лучших

      Единственный перевернутый атрибут поможет.

      Пули изображений

      Лучше всего использовать фоновое изображение на псевдоэлементе. Вы могли бы подумать, что list-style-image — это то, что вам нужно, но он крайне ограничен. Например, вы не можете расположить его или даже изменить его размер.

      Emoji Bullets

      Собранный «случайным образом» заказ

      Атрибут value устанавливает элемент списка для использования маркера, релевантного для этой позиции.

      Счетчики пользовательского текста

      Может быть выполнено с псевдоэлементами для максимального контроля, но есть также list-style-type: '-';

      Внутри и снаружи

      Вещи лучше сочетаются с позицией стиля списка: снаружи; (значение по умолчанию), но маркеры списка отображаются за пределами поля, поэтому вы должны быть осторожны, чтобы не обрезать их. Они могли свисать с края окна браузера или overflow: hidden; скроет их полностью.В последних двух примерах есть трюк, имитирующий более приятное выравнивание при рендеринге внутри элемента.

      Цветные пули

      Три пути сюда:

      1. :: marker (самый новый и самый простой)
      2. Классический стиль псевдоэлемента
      3. background-image (это URL-адрес данных SVG, поэтому вы можете управлять цветом из CSS)

      Колонный список

      Количество столбцов может быть автоматическим.

      Цветные числа в кружках

      Пользовательские символы списка циклов

      Одноразовые могут быть выполнены с помощью list-style: symbols () и многоразовые наборы могут быть сделаны с @ counter-style , а затем использованы.Обратите внимание, что на момент написания это поддерживается только в Firefox.

      5 простых и практичных стилей списков CSS, которые можно скопировать и вставить

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

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

      HelvetiList

      Для нашего первого списка мы собираемся начать с простого, минималистичного, но очень привлекательного дизайна, который во многом зависит от красоты типографики. Мы воспользуемся тонкими стилями Helvetica и добавим плавную анимацию при наведении курсора.

      Демо: Посмотрите демо и код на CodePen.

      HTML

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

      CSS

      Как мы видели на скриншоте выше, элементы списка используют очень тонкий шрифт, тонкие разделители и состояние наведения, которое увеличивает шрифт.Для начала задайте ширину div и задайте общие стили h3.

      Затем примените тип list-style-type, равный none, чтобы избавиться от маркеров и сбросить любые поля или отступы, которые могут присутствовать. Для фактических элементов списка я применил небольшую нижнюю границу, которая обеспечивает этот маленький разделитель. Я использовал селектор last-child, но в этом нет ничего страшного, если есть браузер, который не распознает это и решает добавить дополнительную границу внизу.

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      000

      000 34

      35

      36

      37

      38

      39

      40

      41

      42

      div {

      width: 200 пикселей;

      }

      h3 {

      шрифт: 400 40 пикселей / 1.5 Helvetica, Verdana, без засечек;

      маржа: 0;

      отступ: 0;

      }

      ul {

      list-style-type: нет;

      маржа: 0;

      отступ: 0;

      }

      li {

      шрифт: 200 20px / 1.5 Helvetica, Verdana, без засечек;

      нижняя граница: сплошной 1px #ccc;

      }

      li: last-child {

      border: нет;

      }

      li a {

      текстовое оформление: отсутствует;

      цвет: # 000;

      дисплей: блок;

      ширина: 200 пикселей;

      -webkit-transition: размер шрифта 0.Легкость 3 с, легкость фонового цвета 0,3 с;

      -moz-transition: размер шрифта 0,3 с, цвет фона 0,3 с;

      -o-transition: размер шрифта 0,3 с, цвет фона 0,3 с;

      -ms-transition: размер шрифта 0,3 с, цвет фона 0,3 с;

      переход: размер шрифта 0,3 с, цвет фона 0,3 с;

      }

      li a: hover {

      font-size: 30px;

      фон: # f6f6f6;

      }

      Список эскизов

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

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

      Демо: Посмотрите демо и код на CodePen.

      HTML

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      • Заголовок

        Lorem ipsum dolor sit amet …

      • < li>

        Заголовок

        Lorem ipsum dolor sit amet …

      • Заголовок

        Lorem ipsum dolor sit amet …

      • < li>

        Заголовок

        Lorem ipsum dolor sit amet …

      CSS

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      000

      000

      * {маржа: 0; padding: 0;}

      div {

      margin: 20px;

      }

      ul {

      list-style-type: нет;

      ширина: 500 пикселей;

      }

      h4 {

      шрифт: полужирный 20 пикселей / 1.5 Helvetica, Verdana, без засечек;

      }

      li img {

      float: left;

      маржа: 0 15px 0 0;

      }

      li p {

      шрифт: 200 12px / 1,5 Georgia, Times New Roman, serif;

      }

      li {

      отступ: 10 пикселей;

      переполнение: авто;

      }

      li: hover {

      background: #eee;

      курсор: указатель;

      }

      Стандартная сетка эскизов

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

      Демо: Посмотрите демо и код на CodePen.

      HTML

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      CSS

      В этом примере основная структура состоит в том, что вы добавляете некоторые поля для каждого элемента списка и перемещаете их влево.Я использовал трюк «overflow: auto», чтобы очистить плавающий объект, установить темный фон и добавить границу к изображениям.

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      000

      000 34

      35

      * {

      маржа: 0;

      отступ: 0;

      }

      body {

      background: # 333;

      }

      div {

      width: 900px;

      маржа: 0 авто;

      переполнение: авто;

      }

      ul {

      list-style-type: нет;

      }

      li img {

      float: left;

      поля: 10 пикселей;

      граница: сплошная 5px #fff;

      -webkit-transition: box-shadow 0.5s легкость;

      -moz-transition: box-shadow 0.5s легкость;

      -o-transition: легкость тени 0,5 с;

      -ms-transition: box-shadow 0.5s замедление;

      переход: легкость 0.5s box-shadow;

      }

      li img: hover {

      -webkit-box-shadow: 0px 0px 7px rgba (255,255,255,0.9);

      box-shadow: 0px 0px 7px rgba (255,255,255,0.9);

      }

      Горизонтальное меню

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

      Демо: Посмотрите демо и код на CodePen.

      HTML

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

      CSS

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      140002

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      000

      000 34

      35

      36

      37

      38

      39

      40

      41

      42

      43

      44

      45

      46

      47

      * {

      маржа: 0;

      отступ: 0;

      }

      nav {

      margin: 50px;

      }

      ul {

      overflow: auto;

      тип-список: нет;

      }

      li {

      высота: 25 пикселей;

      поплавок: левый;

      margin-right: 0px;

      граница справа: сплошной 1 пиксель #aaa;

      отступ: 0 20 пикселей;

      }

      li: last-child {

      border-right: нет;

      }

      li a {

      текстовое оформление: отсутствует;

      цвет: #ccc;

      шрифт: 25px / 1 Helvetica, Verdana, без засечек;

      преобразование текста: прописные буквы;

      -webkit-transition: все 0.5s легкость;

      -моз-переход: легкость всего 0,5 с;

      -o-переход: легкость всего 0,5 с;

      -ms-переход: легкость всего 0,5 с;

      переход: легкость всего 0,5 с;

      }

      li a: hover {

      color: # 666;

      }

      li.active a {

      font-weight: bold;

      цвет: # 333;

      }

      Упорядоченный список больших чисел

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

      Демо: Посмотрите демо и код на CodePen.

      HTML

      Теперь, как я это построил, будет очень спорно. Как видите, на самом деле я ввожу числа вручную, несмотря на то, что HTML на самом деле сделает это за вас автоматически. Но для этого есть веская причина.

      Чтобы начать эту идею, я добавил абзац в элементы списка, а затем закодировал тип li и тип li> p по-разному.Однако пытаться привести все в соответствие с этим методом было полным кошмаром. В конечном итоге, чтобы исправить это, CSS был настолько беспорядочным и неприятным, что я полностью отказался от него в пользу этого более простого метода, который на самом деле позволяет создавать ясный и простой CSS.

      1. 1.

        Lorem ipsum dolor sit amet, conctetur adipiscing elit. Preesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.Нам quis justo в augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere conctetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero элитный аликвет Quis ullamcorper arcu tincidunt. Praesent purus turpis, congue vel, pulvinar и lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

      2. 2.

        Lorem ipsum dolor sit amet, conctetur adipiscing elit. Preesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.Нам quis justo в augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere conctetur.

      3. 3.

        Lorem ipsum dolor sit amet, conctetur adipiscing elit. Preesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Нам quis justo в augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere conctetur.

      CSS

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

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      18

      19

      20

      21

      22

      23

      24

      25

      div {

      width: 500 пикселей;

      маржа: 10px

      }

      ol {

      color: #ccc;

      тип-список: нет;

      }

      ol li {

      позиция: относительная;

      шрифт: полужирный курсив 45 пикселей / 1.5 Helvetica, Verdana, без засечек;

      нижнее поле: 20 пикселей;

      }

      li p {

      шрифт: 12 пикселей / 1,5 Helvetica, без засечек;

      padding-left: 60 пикселей;

      цвет: # 555;

      }

      интервал {

      положение: абсолютное;

      }

      Заключение

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

      Списки W3.CSS


      • ×

        Майк
        Веб-дизайнер

      • ×

        Jill
        Поддержка

      • ×

        Джейн
        Бухгалтер


      Основной список

      Класс w3-ul используется для отображения основного списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Список с полями

      Класс w3-border добавляет рамку вокруг списка:


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Заголовок списка

      Пример того, как добавить элемент заголовка внутри элемента списка:


      Пример


      • Имена


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Список в виде карты

      w3-card- номер классов можно использовать для отображения списка как карточки:


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Центрированный список

      Класс w3-center можно использовать для центрирования элементов списка в списке:


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Цветной список

      Для добавления цвета в список можно использовать классы w3- color :


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Элемент цветного списка

      Для добавления цвета к элементу списка можно использовать классы w3- color :


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Hoverable Список

      Класс w3-hoverable добавляет серый цвет фона к каждому элементу списка при наведении курсора:


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Если вам нужен определенный цвет наведения, добавьте любой из w3-hover- color классов для каждого элемента

    • :

      Пример


      • Джилл

      • Ева

      • Адам

      Попробуй сам »

      Элемент закрываемого списка

      Щелкните «x», чтобы закрыть / скрыть элемент списка:


      Пример

    • Джилл
      > & times;

    • Попробуй сам »

      Совет: HTML & times; объект — предпочтительный значок для кнопок закрытия (а не буква «Х»).


      Список с заполнением

      Классы w3-padding могут использоваться для добавления дополнение к элементам списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Список аватаров

      • ×

        Майк
        Веб-дизайнер

      • ×

        Jill
        Поддержка

      • ×

        Джейн
        Бухгалтер


      Пример


    • > & times;


      Майк

      Интернет Дизайнер


    • Попробуй сам »

      Ширина списка

      Списки по умолчанию имеют ширину 100%. Используйте свойство width, чтобы изменить это.

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      30% ширина:

      50% ширина:

      80% ширина:


      Крошечный список

      Используйте класс w3-tiny для отображения крошечного списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Малый список

      Используйте класс w3-small для отображения небольшого списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Большой список

      Используйте класс w3-large для отображения большого списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Список XLarge

      Используйте класс w3-xlarge для отображения очень большого списка:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      XXLarge Список

      Используйте класс w3-xxlarge для отображения списка XXLarge:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      XXXLarge Список

      Используйте класс w3-xxxlarge для отображения списка XXXLarge:

      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      Jumbo List

      Используйте класс w3-jumbo для отображения огромного «jumbo» список:


      Пример


      • Джилл

      • Ева

      • Адам


      Попробуй сам »

      12+ замечательных примеров стилей списков CSS

      Кто не любит приличный стиль списка? Мы постоянно используем их в нашей разметке для самых разных обстоятельств.По правде говоря, стили списков css чрезвычайно ценны для специалиста по веб-сайтам, поскольку они могут обнаружить стиль изложения тестов, чтобы помочь улучшить пользовательский интерфейс веб-сайта (UI). Говоря о пользовательском интерфейсе, обратите внимание на некоторые компоненты макета пользовательского интерфейса React на нашем сайте. Использование списка HTML в настоящее время является чрезвычайно нормальным. Сегодня мы собираемся выглядеть несколько более далекими, чем создание обычных записей, и продемонстрируем 8 уникальных подходов к восхитительному оформлению ваших HTML-записей с помощью CSS. Мы будем использовать несколько настоящих стратегий CSS, чтобы исчерпывающий список выглядел великолепно (и даже имел некоторую дополнительную полезность).В этой статье мы обсудим некоторые примеры стиля списка с тегами css и html, такими как упорядоченный список (ol), неупорядоченный список (ul), li (элемент списка).

      Списки HTML

      отображаются в виде маркированного списка (маленькие темные кружки). С помощью CSS мы можем сделать их стильными и жизнеспособными. Используя css, мы можем сделать их красивыми и жизнеспособными, мы также можем использовать изображения как маркер списка. Использование стилизации упомянутых записей было для каждой ситуации основным моментом, заслуживающим внимания и разъясняющим читателю.Чтобы стилизовать числа, вам нужно вытеснить стили программы по умолчанию и добавить зацепки к частям сводки, чтобы нацелить их и стиль аналогичным образом.

      Коллекция потрясающих примеров стилей списков CSS с исходным кодом

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

      Связанные

      В этой статье я расскажу, что это за свойства стилей CSS List и что с ними можно делать.

      1. Карты CSS — пример ListView

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

      Так как дизайнер использовал самые последние структуры, вы даже можете улучшить план с помощью собственных пользовательских воздействий и плана затенения. Сделав пару улучшений, вы можете без особых усилий использовать этот код в своем предприятии. Это также один из примеров стиля списка, который использует теги css html, такие как упорядоченный список (ol), неупорядоченный список (ul), li (элемент списка).

      Демо / Код

      2. Список стилей дизайна пользовательского интерфейса с помощью HTML и CSS

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

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

      Демо / Код

      3. Только нумерованные списки CSS с выпадающими формами

      Это статический план, который не требует действий или изменений. Несмотря на то, что без движения, общая идея выглядит чудесно. Список напоминает каплю воды, и оттенок списка также выглядит привлекательно.Чтобы сделать этот отличный радиоприемник, разработчик использовал код HTML и CSS. Поскольку инженер использовал самые последние системы, вы можете ожидать плавного воздействия на это содержимое кода.

      Демо / Код

      4. Преобразовать свойство перекоса в красивые стили списка

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

      Как бы то ни было, если у вас есть собственный набор символов, вы можете использовать его в этом плане. Это один из примеров стиля списка, в котором используются теги css и html, такие как упорядоченный список (ol), неупорядоченный список (ul), li (элемент списка). Поскольку он использует самую последнюю структуру, он поддерживает все популярные планы затенения.

      Демо / Код

      5. Стиль CSS списка меню Flexbox

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

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

      Демо / Код

      6. Список счетчиков градиентов CSS

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

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

      Демо / Код

      7. Пользовательские точки списка с помощью HTML и CSS

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

      Используя самое последнее содержимое CSS (SCSS), дизайнер придумал, как передать вам привлекательный план в облегченном содержимом кода. Это один из примеров стиля списка, в котором используются теги css и html, такие как упорядоченный список (ol), неупорядоченный список (ul), li (элемент списка).

      Демо / Код

      8. Список встроенных стилей

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

      Демо / Код

      9. Упорядоченный список со счетчиками CSS

      Это то же самое, что мы обсуждали в номере 7. Хотя здесь нет анимации, концепция очень похожа. Вместо стрелок список заменяется числами внутри круга.Клиент будет более вовлечен в это воздействие. Чтобы сделать это воздействие более гладким, инженер использовал только CSS. Использование дополнительной структуры кажется достойным решением при наблюдении за конечным продуктом.

      Демо / Код

      10. Пользовательские стили неупорядоченных списков

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

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

      Демо / Код

      11. Пользовательские номера списков

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

      Это один из примеров стиля списка, в котором используются теги css и html, такие как упорядоченный список (ol), неупорядоченный список (ul), li (элемент списка).

      Демо / Код

      12. Примеры CSS для списка дел

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

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

      Демо / Код

      13. Анимированный список CSS Tick

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

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

      Демо / Код

      14. Список выбора файлового менеджера (CSS и JavaScript)

      В этой структуре разработчик также дал нам подходящее представление о стиле списка.Список активируется при щелчке по списку. Также привлекательно выглядит красный фон с рыбками. Воздействие мягкое и чистое, что также делает его идеальным для широкого спектра объектов и приложений. Как и большинство других структур списков, эта дополнительно создается с использованием содержимого SCSS и JS.

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

      Демо / Код

      15. Ведение заметок по кругу (CSS и JavaScript)

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

      Демо / Код

      Заключение

      Давайте посмотрим правде в глаза, сайт выглядит скучно, и посетители не будут обращать внимания на то, есть ли у вас большее количество дизайнов, чем у других. Так что в основном взгляните на все эти дизайны списков и не бойтесь присоединиться к ним на своем сайте. Это также можно реализовать с помощью html5, css3, jquery, bootstrap и некоторых других.

      Базовый HTML: списки в HTML

      / en / basic-html / text-elements-in-html / content /

      Добавление списков в HTML

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

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

      Неупорядоченные списки

      Элемент неупорядоченного списка выглядит так:

       

      Однако, в отличие от того, что вы видели до сих пор, эти теги сами по себе ничего не делают. Для отображения содержимого в виде списка вам нужно , два HTML-элемента, работающих вместе : сам список, такой как элемент

        выше, и элемент списка , который находится внутри:

         
        • Это элемент списка.
        • Это второй элемент списка.
        • Здесь три пункта списка.

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

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

        Заказные списки

        Элемент упорядоченного списка выглядит так:

         

        Структура элемента упорядоченного списка в основном такая же , что и структура неупорядоченного списка: элемент

          является корнем, и любое количество элементов
        1. входит в него:

           
          1. Это элемент списка.
          2. Это второй элемент списка.
          3. Здесь три пункта списка.

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

          Попробуй!

          Попробуйте добавить каждый из этих примеров списков во входные данные ниже.

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

          Сделай сам!

          Откройте файл index.htm l вашего проекта GCF Programming Tutorials в текстовом редакторе, и давайте добавим список. Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его.

          1. Для начала найдите второй элемент

            , который вы добавили:

             

            От режиссера Вики Флеминг рассказывается трогательная история о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер ( озвучивает Бринсон Ламблбрунт).Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но в этом моменте есть одна особенность: Ровер играет в баскетбол, и у него это хорошо получается.

          2. Чуть ниже этого элемента давайте добавим небольшое введение для списка:
             

            В этом фильме есть все, о чем вы могли бы мечтать:

          3. Под введением добавьте неупорядоченный список . Обязательно сохраняйте элементы
          4. с отступом внутри элемента
              для удобства чтения:
               
              • Баскетбольный мяч
              • Собака
              • Ожидание грызть ногти

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

           
            
               

          Обзоры фильмов о классике кино

          Обзор: Basketball Dog (2018)

          4 из 5 звезд

          Режиссер Вики Флеминг представляет трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер (озвучивает Бринсон Ламблбрант).Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но в этом моменте есть одна важная особенность: Ровер играет в баскетбол, и он чертовски хорош в этом.

          В этом фильме есть все, о чем вы можете мечтать:

          • Баскетбол
          • Собака
          • Ожидание грызть ногти

          Хотя, возможно, не было необходимости включать все 150 минут чемпионата Rover в реальном времени, Basketball Dog сохранит ваш интерес на протяжении всего своего 4-часового воспроизведения, и в конце концов любой любитель собак будет плакать.Если вы любите баскетбол или домашних животных, этот фильм для вас.

          Полный список актеров можно найти на сайте Basketball Dog.

          Откройте File Explorer или Finder и перейдите к своему проекту GCF Programming Tutorials , затем дважды щелкните файл index.html. Ваша веб-страница должна открыться в браузере по умолчанию, и вы должны это увидеть.

alexxlab

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *