Блог

Главная - Вопросы по программированию - Назначить разный дизайн для каждого ul

Назначить разный дизайн для каждого ul

#html #css #html-lists

#HTML #css #html-списки

Вопрос:

У меня есть следующая веб-страница :

введите описание изображения здесь

У меня проблема с настроенным ul, я не могу найти способ назначить для каждого ul указанный дизайн, как указано выше (круг, значок, / */, квадрат)

Это мой html-код :

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style7.css" />
</head>
<body>

<h2>Plan d'études du semestre 1 en TC</h2>

<ol type="I"  >

  <li>Mathématiques appliquées 1
  <ul class="a"> Mathématiques appliquée 1
  <ul>
  <li> Cours:2h </li>
  <li> TD: 1h </li>
  </ul>
  </ul>
  
   
  <ul class="a"> Atelier Mathématiques appliquées1
  <ul>
  <li> TP: 1.5h </li> 
  </ul>
  </ul>
  </li>

<li>Algorithmique et structures de données
  <ul class="a"> Algorithmique et structure de données 1
  </ul>
  </li>



<li>Programmation structurée
  <ul class="a"> Langage de programmation
  </ul>
  <ul class="a"> Atelier programmation structurée
  </ul>
  </li>




<li>Architecture et système 1
  <ul class="a"> Architecture des ordinateurs
  </ul>
  <ul class="a"> Systèmes logiques
  </ul>
   <ul class="a"> Atelier Architecture et Systèmes 1
  </ul>
 </li>






  <li>Développement Web et multimédia 1
  <ul class="a"> Programmation Web1
  <ul>
  <li> Cours:1h </li>
  <li> TD:0.5h </li>
  </ul>
  </ul>
  </li>
   
  <ul class="a"> Atelier développement web et multimédia 1
  </ul>
  


<li>Culture et langues
  <ul> <u>Anglais technique 1</u>
  </ul>
  <ul class="b">C2i-l
  </ul>
  <ul> <u>Français1</u>
  </ul>
  <ul class="b"> Droit de l'homme
  </ul>
 </li>

</ol>


</body>
</html>

и это мой код CSS :

 .a {
  font-style: italic;
 
 list-style-type: circle;
 
}

.b {
  font-style: initial;
 
}


ol > li {
color: red;
font-style:initial;
}

ol li ul{
   color: black;
  
   font-style: italic;
   
 
}

ul li {
   color: blue;
   list-style-type: disc;
   font-style:initial;
}

Это то, что я получаю :

введите описание изображения здесь

Комментарии:

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

Ответ №1:

Для выбора каждого стиля списка вы должны использовать псевдоэлемент : nth-child . Для изменения фактического значка вы можете использовать list-style-type: для обычных символов, таких как квадрат, диск и т. Д. Однако для пользовательских значков, которые недоступны, вы можете использовать list-style-image: url(); Для примеров ознакомьтесь с этим руководством w3schools . Надеюсь, это помогло!

Ответ №2:

Вы можете добиться этого, если используете ‘list-style-image’ для тега UL. Пожалуйста, обратитесь к приведенному ниже образцу.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-image

Метки: