Часто бывает необходимость создавать списки.
Например, в блогах списки часто используются для создания меню. Для того, чтобы лучше в этом разобраться посмотрите мой пост:
Обычный
список состоит из открывающего и закрывающего тегов ul. содержимого
внутри тегов li.
Пример простого списка:
<ul style="color:red">
<li><a href="https://www.google.ru/">Триccc
российских кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/"
style="color:red">Три российских кризиса - сходства и
различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
</ul>
Красным выделен тег отвечающий за цвет маркера (кружочек в данном случае). Иногда возникает необходимость изменить цвет, шрифт и фон
(background) , да и мало ли чего.
Например, у вас в блоге цвет ссылок задан голубым, а при создании меню вы хотите сделать их черными, а отдельные ссылки зелеными.
Например, у вас в блоге цвет ссылок задан голубым, а при создании меню вы хотите сделать их черными, а отдельные ссылки зелеными.
Для этого мы можем использовать class для <div> и
обернуть в него весь список.
Например:
<div class="eko"
style="border-radius: 40px 10px">
<ul style="color:red">
<li><a href="https://www.google.ru/">Триccc
российских кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/" style="color:red">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
</ul>
</div>
А значение прописать в CSS так:
.eko a {
width: 500px;
background:
#F3F2EE;
padding:
5px;
padding-right: 20px;
border:
solid 7px #94F3E9;
border-radius: 50px
float: left;
}
Вы обратили внимание, что вторую ссылку <li>я прописал красным
непосредственно в html. И для отображения кружков перед списком красным <ul
style=”color:red”>
Получается вот так: см
фото.
Можно сделать весь список в одном фоне. (фото ниже)
css
.eko {
width: 500px;
background:
#F3F2EE;
padding:
5px;
padding-right: 20px;
border:
solid 7px #94F3E9;
border-radius: 50px
float:
left;
}
.eko a {
color:black;
}
Html
<div dir="ltr"
style="text-align: left;" trbidi="on">
<div class="eko"
style="border-radius: 40px 10px">
<ul style="color:red">
<li><a href="https://www.google.ru/">Триccc
российских кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/"
style="color:red">Три российских кризиса - сходства и
различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
<li><a href="https://www.google.ru/">Три российских
кризиса - сходства и различия</a></li>
<br/>
</ul>
</div>
<br /></div>
Отмеченные красным значения отвечают за разный радиус изгиба
ограничительной линии. Вы можете задать её по своему усмотрению. Здесь можно
поэкспериментировать с цветами, шрифтами и их размером.
Можно выделить только одну строку через идентификатор и задать его в CSS
Например: Добавить идентификатор в строку :
<li id="white"><a
href="https://www.google.ru/">Три российских кризиса - сходства и
различия</a></li>
Прописать его в CSS так:
#white a{
color: white;
}
Получите вот так,, Я уже изменил основной текст на
зеленый см.фото
В общем если знать, как и что менять и что куда подставлять, то
простор для творчества неограничен!
Комментариев нет:
Отправить комментарий