Translate

Поиск по этому блогу

четверг, 30 июня 2016 г.

Как правильно задать путь к файлу

Абсолютные и относительные ссылки. Как указать путь к файлу правильно Абсолютные ссылки всегда начинаются с имени протокола. Например http:// и содержат имя файла.

Относительные - ведут отсчет от корня сайта или текущего документа.

При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл - index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.

Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде, то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.

Вариант 1 Фалы располагаются в одной папке?

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

<a htrf="Ссылаемый_документ.html'>Текст ссылки </a>


Вариант 2. Исходный в папке, а ссылаемый в корне


<a htrf="../Ссылаемый_документ.html'>Текст ссылки </a>


../ мы говорим, что нужно выйти из текущей папки на уровень выше. Много папок, значит и ../ ../ ../ - много. Столько сколько папок (уровней)

Вариант 3. Исходный в корне сайта, ссылаемый в папке
То есть зеркальный вариант от предыдущего.

Здесь путь такой

<a htrf="Папка/Ссылаемый_документ.html'>Текст ссылки </a>


Если много папок, то

<a htrf="Папка1/Папка2/Папка3/Ссылаемый_документ.html'>Текст ссылки </a>


Вариант 4.Файлы в разных папках

Здесь нужно выйти - ../ из одной и второй ../ папки и там уже найти файл

<a href="../../Ссылаемый_документ.html">Ссылка </a>


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

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

Зато на компьютере вообще все проще простого.

Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.



Вариант первый.
  1. Выбираете нужный вам файл
  2. Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
  3. В открывшемся меню выбираете копировать путь к файлу.
  4. Вставляете сразу после = без кавычек. Они подставятся автоматически.


Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..

Вариант второй.
  1. Открываете командную строку
  2. Просто перетаскиваете туда нужный файл
  3. Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!


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



Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.


Удачного кодирования!                                                                                                                                                              

понедельник, 27 июня 2016 г.

Установка cms Joomla на локальный сервер - Denwer

Прежде чем мы начнём установку Joomla 2.5 на Денвер, нам нужно создать папку для нашего сайта. Для этого есть два варианта:
Первый вариант - это создать папку в каталоге локального сервера.
C:\WebServers\home
Затем в папке \home нужно создать папку нашего сайта, например 'joomla' >> далее в папке 'joomla' нужно создать папку 'www', в этой папке будут находится файлы сайта. Тем самым, адрес, который мы будем набирать в браузере для доступа к сайту, будет:
http://joomla
Второй вариант - это создать папку в каталоге локального сервера.
C:\WebServers\home\localhost\www

Для этого в папке 'www' нужно создать папку для сайта, например 'joomla' >> и в эту папку нужно будет распаковать архив с Joomla
При этом адрес который мы будем набирать в браузере будет:
http://localhost/joomla

Лично мне больше нравится второй вариант, но вы можете использовать любой из них, разницы особо нет никакой, это только для удобства.
Итак, давайте создадим папку 'joomla' в каталоге:
C:\WebServers\home\localhost\www
и у нас получится
C:\WebServers\home\localhost\www\joomla
Теперь нужно распаковать в эту папку ('joomla') архив с Joomla, для этого скачайте Joomla и распакуйте скачанный архив в папку 'jooma'.

Примечание:
Для удобства Вы можете заходить в папку Вашего сайта через виртуальный диск (Z), который создался при установке Денвера. Более короткий путь в ту же самую папку будет:
Z:\home\localhost\www\joomla

'joomla' >> Папка файлов сайта (сюда распаковать архив с Joomla ).

Теперь нужно запустить Denwer (если он не запущен), затем набрать в браузере:
http://localhost/joomla и нажать кнопку 'Enter'.
В окне браузера откроется страница установки Joomla

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

На втором шаге установки Joomla проходит проверка на совместимость с сервером, в нашем случае это локальный сервер (Denwer).

Как видно на рисунке проверка прошла успешно и сервер полностью соответствует нашей версии Joomla, поэтому переходим к третьему шагу установки Джумла на локальный сервер, и нажимаем кнопку 'Далее'.

На третьем шаге нам предлагается согласиться с лицензией GNU/GPL.

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

Тип базы данных: 'MySQL'.
Имя сервера базы данных: 'localhost'.
Имя пользователя: 'root' - по умолчанию в конфигурации Денвера уже создан привилегированный пользователь 'root' для которого не задан пароль.
Пароль: оставляем это поле пустым.
Имя базы данных: 'my_site' можно ввести любое имя базы данных и она будет создана автоматически.
Префикс таблиц: оставляем это поле как есть.

На пятом шаге установки Joomla нам предстоит ввести параметры Конфигурация FTP. Обычно этот пункт всегда пропускается, тем более, что мы устанавливаем Joomla на локальный сервер.
Нажмите на кнопку далее, чтобы пропустить этот шаг.

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

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

Для входа в панель управления наберите в Вашем браузере:

http://localhost/joomla/administrator
Для входа на сайт:

http://localhost/joomla                                                                                                                                                              

CMS сайта. Что это?

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

CMS - это аббревиатура от Content Management System, что в дословном переводе означает "система управления контентом сайта" или просто "система управления сайтом". Иногда CMS называют "движок" сайта.

CMS - это программное обеспечение, которое позволяет разрабатывать и поддерживать динамические информационные web-сайты. Разные cms позволяют проектировать сайты различной сложности, вплоть до интернет-магазинов и информационных порталов.
Есть два основных вида cms:
  1. cms работающие и располагающиеся в Интернете
  2. cms установленные на компьютере и соединенные с сайтом автоматически или через интерфейс обновления файлов.
После интеграции cms с сайтом, сотрудники вашей компании смогут управлять содержанием и структурой сайта, публиковать новости, редактировать тексты и размещать графику, изменять и добавлять продукцию в каталоге, создавать новые страницы, разделы и многое другое. Преимущество динамических сайтов, построенных на основе cms, заключается в отделении дизайна от информационного наполнения, что позволяет автоматизировать документооборот, бизнес процессы, механизмы персонализации.

Цели и задачи cms (Content Management System) - управление, наполнение и редактирование информации и графики клиентом. Проще говоря, это система предоставляющая Вам возможности изменять и дополнять разделы, редактировать содержимое сайта, менять графику и дизайн сайта.

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

Несомненным плюсом системы управления контентом cms является снижение стоимости администрирования и поддержки сайта. Это происходит за счет снижения потерь на зарплату web-мастеру, а также времени на поиски документов, пресечения дублирования и ошибок, увеличения скорости связи с партнерами и клиентами.. . Вам не потребуется нанимать специалиста для поддержки и развития проекта. С помощью CMS Вы сможете снизить зависимость стоимости сайта от объема размещенной на нем информации. Система управления контентом cms позволить вам размещать на сайте любые объемы информации.

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

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

Перед установкой cms на свой сайт, посмотрите пост "Как установить денвер"

                                                                                                                                                             

Установка денвера

Давайте разберемся с вами вначале, что такое Денвер и зачем он нам нужен. Денвер (от сокр. Д. н. w.р — джентльменский набор Web-разработчика [1]) — набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.
Теперь переходим к установке Denwer.

Установка Denwer


Скачиваем Denwer Скачать денвер можно бесплатно с официального сайта: www.denwer.ru. Весит денвер совсем немного (6,2 Мбайта):

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

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

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

1. Первый параметр, который необходимо задать - это директория установки денвера:
Задание директории установки денвера
В рассматриваемом примере я не менял стандартную директорию и поэтому просто нажал Enter.

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

Я решил указать имя виртуального диска L. Для продолжения установки нужно будет нажать Enter:
Продолжение установки Denwer

3. Третий параметр - выбор режима запуска денвера (автоматически при запуске ОС или вручную). Я всегда выбираю 2 пункт, поскольку я пользуюсь денвером не часто:
Выбор режима запуска денвера.

Завершение установки

После завершения установки, у Вас должен открыться браузер и сообщить Вам о том, что "Denwer успешно установлен":
Завершение установки денвера

Использование Denwer



Пользоваться им очень просто

1.Для того, чтобы запустить денвер, достаточно кликнуть два раза на иконку "Start Denwer" на вашем рабочем столе. Там же вы сможете бес труда останвить работу денвера кликнув два раза на иконку "Stop Denwer".

2. Проверка работы денвера

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

Куда заливать файлы сайта в Denwer

Для начала откройте "Мой компьютер", там после запуска денвера там должен появится ещё один виртуальный диск (в моем случае L):

Виртуальный диск

Файлы Вашего сайта должны будут лежать в директории: L:\home\localhost\www:

Файлы сайты должны лежать в home\localhost\www

На скриншоте я специально открыл файл index.php, чтобы Вы увидели редирект, который ведет на http://localhost/denwer/ (страница приветствия денвера), теперь становится понятно почему когда Вы проверяли работу денвера (в 2 пункте), была автоматически открыта страница http://localhost/denwer/. Подведу итог. Денвер установлен, все файлы из директории L:\home\localhost\www удаляйте и заливать сюда свой сайт. Далее Ваш сайт будет доступен в браузере при работающем денвере по адресу http://localhost/.
                                                                                                                                                             

вторник, 21 июня 2016 г.

Как увеличить шрифт на странице.

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

Этот метод подходит для пользователей, но не для владельцев блога. сайта, когда мы хотим, чтобы наш сайт выглядел красиво и был удобным для посетителя. В блогспоте это можно сделать зайдя в Шаблон - Настроить - Дополнительное - Текст страницы. Здесь вы можете выбрать подходящий шрифт, его Цвет и Размер. Я на этом останавливаться не буду. Если есть желание вспомнить, то посмотрите мой пост-"Как изменить текст в сайдбаре"

Многие пользователи используют шрифты из различных сервисов, например Google Fonts . Здесь тоже, нет ничего сложного. Достаточно выбрать нужный шрифт из понравившегося. Прописать его в CSS и задать необходимый размер.

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

Сейчас давайте разберем самый простой способ, который позволит пользователю увеличить шрифт на вашей странице сайта по своему вкусу. Для этого, мы идем в Дизайн нашего блога и в уже знакомой графе "Добавить гаджеты", выбираем "Добавить HTML/JavaScript". Лучше всего разместить это блог в верхней части вашего сайта на видном месте.

Увеличение шрифта на сайте

Добавляем в него следующий код:

Изменить размер текста 
<a href="javascript:void(0);"
onclick="javascript:body.style.fontSize='.5em'">
<span style="font-size: xx-small;">+</span>
</a> <a href="javascript:void(0);"
onclick="javascript:body.style.fontSize='1em'">
<span style="font-size: x-small;">+</span>
</a> <a href="javascript:void(0);"
onclick="javascript:body.style.fontSize='1.5em'">
<span style="font-size: small;">+</span></a>
<a href="javascript:void(0);"
onclick="javascript:body.style.fontSize='2em'">
<span style="font-size: large;">+</span></a>
<a href="javascript:void(0);"
onclick="javascript:body.style.fontSize='2.5em'">
<span style="font-size: x-large;">+</span></a>

Сохраняем и проверяем. Должно получиться точно так, как у меня на сайте Training
В этом блоге я решил не ставить этот гаджет, потому что вы,я уверен, можете без труда не только увеличить шрифт на странице, но и поставить свой и шрифт, и размер.
Экспериментируйте, пробуйте и делитесь своими результатами. Присоединяйтесь к сообществу в Google+ Business and IT technology (Бизнес и IT-технологии) и Facebook. Задавайте вопросы, делитесь своими успехами.                                                                                                                                                              

воскресенье, 19 июня 2016 г.

38 клавиатурных сокращений, которые работают в любом браузере

Работа с вкладками :
  • Ctrl+1-8 – Переключение на вкладку, положение которой на панели вкладок соответствует нажатой вами цифре.
  • Ctrl+9 – Переключение на последнюю вкладку независимо от ее номера.
  • Ctrl+Tab – Переключение на следующую вкладку, то есть на одну вправо.
  • Ctrl+Shift+Tab – Переключение на предыдущую вкладку, то есть на одну влево.
  • Ctrl+W, Ctrl+F4 – Закрыть текущую вкладку.
  • Ctrl+Shift+T – Открыть повторно последнюю закрытую вкладку.
  • Ctrl+T – Открыть новую вкладку.
  • Ctrl+N – Открыть новое окно браузера.

Навигация:
  • Alt+Стрелка Влево, Backspace – Назад.
  • Alt+Стрелка Вправо, Shift+Backspace – Вперед.
  • F5 – Обновить.
  • Ctrl+F5 – Обновить с игнорированием кэша, то есть загрузить страницу по новой.
  • Escape – Остановить загрузку.
  • Alt+Home – Открыть домашнюю страницу.

Масштабирование:
  • Ctrl+»+», Ctrl+Колесо мышки вверх – Увеличить.
  • Ctrl+»-», Ctrl+Колесо мышки вниз — Zoom out.
  • Ctrl+0 – Вернуть исходный масштаб.
  • F11 – Полноэкранный режим.

Скроллинг:
  • Space, Page Down – На один экран вниз.
  • Shift+Space, Page Up – На один экран вверх.
  • Home – В начало страницы.
  • End – В конец страницы.

Адресная строка:
  • Ctrl+L, Alt+D, F6 – Выделить текст в адресной строке.
  • Ctrl+Enter – Автоматически добавит www. в начало и .com в конце введенного вами слова и откроет эту страницу.
  • Alt+Enter – Откроет набранный адрес в новой вкладке.

Поиск:
  • Ctrl+K, Ctrl+E – Фокусировка на встроенном в браузер поле поиска для ввода запроса.
  • Alt+Enter – Открыть результаты поиска в новой кладке.
  • Ctrl+F, F3 – Открыть инструмент поиска по текущей странице.
  • Ctrl+G, F3 – Найти следующее значение при поиске по странице.
  • Ctrl+Shift+G, Shift+F3 – Найти предыдущее значение при поиске по странице.

История & закладки:
  • Ctrl+H – Открыть просмотр истории.
  • Ctrl+J – Открыть загрузки.
  • Ctrl+D – Сохранить закладку на текущий сайт
  • Ctrl+Shift+Del – Открыть инструмент очистки истории, кэша, загрузок и т.д.

Другие функции:
  • Ctrl+P – Печать текущей страницы.
  • Ctrl+S – Сохранить страницу на жесткий диск.
  • Ctrl+O – Открыть файл.
  • Ctrl+U – Посмотреть код текущей страницы. (Кроме IE).

                                                                                                                                                             

среда, 15 июня 2016 г.

Как добавить картинку вместо маркеров в списке.

Мы с вами уже изменяли, некоторым образом, оформление наших списков. Про это я рассказывал в прошлом посте: «Как изменить оформление списка»


Иногда бывают ситуации,  когда нам нужно изменить не просто стиль и цвет маркера, но и вообще сам маркер. Например, поставить вместо него какую - либо картинку.

Для этого нам понадобится сама картинка. Я рекомендую использовать небольшие изображения, примерно 16х16 рх . Следует помнить, что сам сюжет на картинке, если там таковой имеется, лучше расположить ближе к левому краю. Так  у вас будет лучше смотреться вся конструкция.

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

Теперь, когда у нас есть готовая картинка, нам нужно загрузить ее в интернет и получить ссылку. Это я подробно рассказывал в посте«Как загрузить картинку в интернет и получить ссылку»
Теперь остается перейти к самому главному – редактированию нашего кода. Как вы помните из поста «списки» состоят из li ( открывающего и закрывающего) внутри  ul

<ul>
<li><a href=”Адрес”></a></li>
<li><a href=” Адрес”></a></li>
<li><a href=” Адрес”></a></li>
</ul>

Теперь, для того, чтобы поставить вместе маркера картинку, в наши список, нам остается прописать только  CSS код :

ul {
    list-style-image: url(images/book.png); /* Путь к изображению маркера */
   }
  
Все готово. Осталось только напомнить, что CSS код вставляется в блоге в разделе Шаблон – Настроить – Дополнительные – Добавить  СSS.

От себя добавлю, что код , который вы добавляете, лучше всего комментировать текстом (что это и для чего добавлено). Для добавления комментария в  
CSS используйте /*---Здесь комментарий---*/ ,а в HTML <!--<комментарий>- ->
 
Сейчас рассмотрим случай, когда вам нужно изменить только один список, а не все списки в блоге.
Для этого, нам нужно присвоить списку какой либо класс. Например, вот так:

<ul class="news">
<li><a href=” Адрес”></a></li>
<li><a href=” Адрес”></a></li>
<li><a href=” Адрес”></a></li>
</ul>

А уже в  CSS написать :

.news li{
list-style-image: url(https://sites.google.com/site/youmorestop/home/arrow_1.png);
}
.news a:hover{
color:red;



Если перевести все это на нормальный язык, то получится приблизительно так:
маркером перед всеми тегами li , которые расположены внутри класса news, будет картинка, которая находится по этому адресу: https://sites.google.com/site/youmorestop/home/arrow_1.png
При наведении курсора (a:hover) на ссылку «а», которая находится внутри класса  
news , цвет ссылки меняется на красный.

Результат можете посмотреть в блоге «Трейдер», раздел «Новости».Я сделал, таким образом, там страницу.
 

Вы можете использовать любые свои значения или такие де как у меня.
Бывают случаи, когда в списке нужен:
 
Нужен квадратный маркер:
list-style-type: square;

Если нам не нужен вообще маркер, то ставим:
list-style-type: none;
 
Если хотим символ вместо маркера, то например так:

li {
    list-style-type: none; /* Убираем маркеры у списка */
   }
   li:before {
    content: "ƥ "; /* Добавляем в качестве маркера символ */
   }

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

понедельник, 13 июня 2016 г.

Как изменить оформление списка

     

Часто бывает необходимость создавать списки.
Например, в блогах списки часто используются для создания меню. Для того, чтобы лучше в этом разобраться посмотрите мой пост:
 
Обычный список состоит из открывающего и закрывающего тегов  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;
}

Получите вот так,, Я уже изменил основной текст на зеленый см.фото

               

В общем если знать,  как и что менять и что куда подставлять, то простор для творчества неограничен!
                                                                                                                                       


Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com