Приятного просмотра

Внешний вид списков | Видеоуроки по HTML и CSS

Опубликовано: 3 месяца назад
148 просмотров
👎 1
Скопируйте и вставте на Ваш сайт

Описание

Полный курс по HTML, CSS и вёрстке сайтов с упражнениями: https://srs.myrusakov.ru/makeup2?utm_source=YouTube&utm_campaign=makeup2&utm_content=freemakeup2&utm_term=PlAV2ScL_I4
Отзывы и комментарии оставляйте в моей группе: https://vk.com/rusakovmy
Вопросы задавайте сюда: https://support.myrusakov.ru/ask

Субтитры

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

Допустим вот 1235 очень такой простой список давайте мы с вами сразу же сделаем покрупней шрифт 200 процент давайте вот 20 пикселей зададим 30 вот теперь что мы с вами сделаем вот мы сам видишь но суд имеется маркеры вот это маркер мы имеем полное право менять для этого существует такое.

Свойство list style list style type он может принимать множество самых разных там значений мы с вами рассмотрим вот буквально несколько из них на первых это диск это вот он и есть также там есть у нас circle тогда у нас будет сами это окружить но уже просто пустая вот есть также у нас квадрат вот такой удар элемент в общем весь самые разные на самом деле чаще.

Всего применяется либо но то есть вообще убрать какие-либо маркеры это чаще всего либо иногда просто к кино какую-то иконку заменяется давайте мы с вами сделаем еще один у которого сделаем кроме класс ай кэнт пример и мы соответственно toyota will у которого класс iphone можно писать как так вот такое вот так написать и в данном случае будет.

Одинаково работать вот ну данном случае мне больше хочется именно так написать то есть это именно класс для элемента will если вы какой-нибудь другой айкон тут эти вот свойств которым сейчас напишем они сразу срабатывать и других элементов даже с класса майкл не будут вот-вот более такой точный вариант list style.

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

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

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

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

Будут давайте мы с вами теперь сделаем ссылки для этого обратимся main menu кстати говоря о меню лучше конечно же указывать в навигации пдф так вот закрываем его давайте в навигации мы к ко всем элементам а сделаем следующее первых уберем черту подчёркивание также мы с вами поменяем цвет нити в принципе ладно оставим вот а поменяем с вами цвет когда будем наводить на него.

Курсор мыши например сделаем его красным все вот так вот сделаем также давайте мы сами уберем вот этот отступ для этого мы у элемента will вот у этого то есть давайте так на fo.ru берем сначала поля а потом уберем все отступы то есть полями джин уступы picking вот теперь у нас уступов нету также давайте мы сами сделаем тут чуть-чуть побольше вот этот.

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

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

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

Комментарии

Нет комментариев!