СКРИПТЫ
ТЕГИ:
php (322)
js (242)
html (146)
css (128)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
fonts (30)
form html (30)
online (27)
Показать еще :
link (26)
ruweb.net (25)
foto (22)
atom (20)
php file (20)
forum (19)
svg (18)
hosting (18)
input (18)
php date (17)
php time (16)
html book (16)
board (16)
color (15)
js url (14)
img (14)
js time (14)
js events (14)
osclass (13)
info (13)
select (13)
htaccess (13)
notepad (13)
знак (12)
table (12)
dw block (12)
download (12)
php img (12)
php path (12)
keyboard (12)
icon (11)
jsphp (11)
form (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
browser (7)
comment (7)
php url (7)
cookie (7)
list (6)
iframe (6)
php get (6)
click (6)
canvas (6)
mysql (6)
reg.ru (5)
value (5)
heading (5)
mb (5)
js math (5)
adminka (5)
tag a (5)
chart (5)
year (5)
search (5)
ftp (5)
js id (5)
ssl (4)
base64 (4)
day (4)
week (4)
php var (4)
bbcode (4)
нок (4)
scandir (4)
xml (4)
month (4)
submit (4)
symbols (4)
task (4)
pages (4)
vk (4)
console (4)
js form (4)
https (3)
numbers (3)
js post (3)
js hash (3)
vs code (3)
domen (3)
js img (3)
ucoz (3)
padding (3)
куб (3)
money (3)
line (3)
captcha (3)
height (2)
seo (2)
js vars (2)
video (2)
youtube (2)
tag hr (2)
details (2)
typeof (2)
рся (2)
sitemap (2)
counter (2)
arrows (2)
prompt (2)
qr kod (2)
google (2)
game (1)
cursor (1)
scroll (1)
rutube (1)
нод (1)
smile (1)
jino (1)
header (1)
speed (1)
windows (1)
archive (1)

Сделать вложенный список html

12.05.2022 Марат 785 0 list | css | html |
"Вложенный список html". Как сделать вложенный список html.
Вложенный список может быть и .

Подробно и вложенных списка

  1. Два уровня вложенного списка
  2. Три уровня вложенного списка

  1. Два уровня вложенного списка

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

    Общий, начальный контейнер элемент - это может быть "ul","ol" поскольку... на странице они уже активно используются, то начальный тег путь будет "div".

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

    Для контейнера используем class

    Нарисуем html каркас для вложенного списка:

    <div class="nested">

      <p>Первая строка...первого уровня</p>

      <p>Вторая строка...первого уровня</p>

        <div class="nested">

          <p>Первая строка... вложенного списка второго уровня</p>

          <p>Первая строка... вложенного списка второго уровня</p>

        </div>

      <p>Третья строка первого уровня</p>

    </div>

    CSS

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

    <style>

    .nested{

    padding: 1px 0 1px 40px;

    }

    /* 1 уровень */

    div.nested{

    counter-reset: num_1;

    }

    div.nested> p {

    counter-increment: num_1;

    margin-bottom: unset;

    margin-top: unset;

    }

    div.nested> p::before {

    content: counter(num_1);

    color: #f00;

    text-align: center;

    border-right: 1px solid #ff0000;

    padding-right: 16px;

    width: 40px;

    margin: 6px 10px 0 -64px;

    display: inline-block;

    font-size: 13px;

    }

    /* 2 уровень*/

    div.nested div.nested{

    counter-reset: num_2;

    }

    div.nested div.nested > p {

    counter-increment: num_2;

    }

    div.nested div.nested> p::before {

    content: counter(num_1) '.' counter(num_2);

    margin: 6px 9px 0 -84px;

    color: #bb00a2;

    border-right: 1px solid #bb00a2;

    padding-right: 10px;

    }

    </style>

    Пример вложенного списка двух уровней:

    Далее выведем приведенный код прямо здесь:

    Первая строка...первого уровня

    Вторая строка...первого уровня

    Первая строка... вложенного списка второго уровня

    Вторая строка... вложенного списка второго уровня

    Третья строка первого уровня


  2. Три уровня вложенного списка

    Ну и далее... можно сделать сколько угодно уровней вложенности списка...:

    Html каркас : добавим вложенность списка третьего уровня:

    <div class="nested">

      <p>Первая строка...первого уровня</p>

      <p>Вторая строка...первого уровня</p>

        <div class="nested">

          <p>Первая строка... вложенного списка второго уровня</p>

          <p>Вторая строка... вложенного списка второго уровня</p>

            <div class="nested">

              <p>Первая строка... вложенного списка третьего уровня</p>

              <p>Вторая строка... вложенного списка третьего уровня</p>

            </div>

        </div>

      <p>Третья строка первого уровня</p>

    </div>

    css

    Добавляй счетчик(num_3)

    Три уровня контейнера:

    div.nested div.nested div.nested

    Три уровня вложенного элемента:

    div.nested div.nested div.nested > p

    И добавляем счетчик в before

    content: counter(num_1) '.' counter(num_2) '.' counter(num_3);

    Соберем код стиля третьего уровня вложенного списка

    /* 3-уровень */

    div.nested div.nested div.nested {

    counter-reset: num_3;

    }

    div.nested div.nested div.nested > p {

    counter-increment: num_3;

    }

    div.nested div.nested div.nested > p::before {

    content: counter(num_1) '.' counter(num_2) '.' counter(num_3);

    margin: 6px 11px 0 -113px;

    color: #bb00a2;

    border-right: 1px solid #bb00a2;

    padding-right: 24px;

    }

    Пример вывода вложенного списка третьего уровня.

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

    Первая строка...первого уровня

    Вторая строка...первого уровня

    Первая строка... вложенного списка второго уровня

    Вторая строка... вложенного списка второго уровня

    Первая строка... вложенного списка третьего уровня

    Вторая строка... вложенного списка третьего уровня

    Третья строка первого уровня

Можете не благодарить, лучше помогите!
Теги :
вложенный список html
вложенные нумерованные списки html
как сделать вложенный список +в html
как создать вложенный список +в html
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.018076 секунд. Подробнее