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

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

Задание 1

В блоке сайдбар создайте выпадающий список используя свойства display,position, Псевдоклассы :first-child  :last-child, псевдоэлементы ::before  и ::after. Пример страницы урок 10

Код html

<div class="sidebar">
    <ul class="ms">
      <li class="mslist"><a href="">Заголовок</a>
        <ul class="msdrop">
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
        </ul>
      
      </li>
      <li><a href="">Заголовок</a></li>
      <li class="mslist"><a href="">Заголовок</a>
        <ul class="msdrop">
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
        </ul>
      </li>
      <li><a href="">Заголовок</a></li>
      <li class="mslist"><a href="">Заголовок</a>
        <ul class="msdrop">
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
          <li><a href="">Подзаголовок</a></li>
        </ul>
      </li>
    </ul>
  
  </div>

CSS код

.ms li{
   list-style:none;
 }
.ms a{
   padding:10px;
   color:#fff;
   background:#555;
   display:block;
   text-decoration:none;
   transition:0.5s;
   border-top:1px #999 solid;
   border-bottom:1px #999 solid;
   
 }
.ms a:hover{
  background:#888;
  padding:10px 0 10px 20px;
} 

.mslist{
  position:relative;
  transition:0.5s;
}
.mslist::after{
  content:"";
  position:absolute;
  border-left:8px #fff solid;
  border-bottom:4px transparent solid;
  border-top:4px transparent solid;
  right:10px;
  top:17px;
  transition:0.5s;
}
.mslist:hover::after{
  transform:rotate(180deg);
}
.msdrop{
  position:absolute;
  left:100%;
  top:0;
  width:100%;
  display:none;
}
.mslist:hover .msdrop{
  display:block;
}

Задание 2

1. создать на странице istoriya.html вертикальное меню .
2. заменить первый параграф на список
3. Скрыть часть параграфов используя свойства display:none и visibility:hidden

1. Создадим блок для меню:

<div id="menu">

            <a href="gorodmoy.html">Главная</a>
            <a href="galereya.html">Галерея</a>
            <a href="gerb.html">Герб</a>

</div>

Укажем стиль для него и ссылок:

#menu{

                width:200px;
                background:#F7FFFF;
                margin-left: 200px;
                float:left;

            }

#menu a{

                color:#2b3845;
                text-decoration:none;
                display:block;

            }

Результат:

2. Код:

<ul class="pleft">
   <h6>Страна Казахстан </h6> 
   <h6>Статус областной центр </h6> 
   <h6>Область Карагандинская область </h6> 
   <h6>Координаты Координаты: 49°48′00″ с. ш. 73°07′00″ в. д. </h6> 
   <h6>Аким (чин) Серик Ахметов </h6> 
   <h6>Основан 1931 </h6>
   <h6>Город с 1934 </h6>
   <h6>Площадь 550 км² </h6>
   <h6>Высота центра 553 м </h6> 
   <h6>Тип климата резко-континентальный </h6>
   <h6>Население 457,800 тыс. человек (2010) </h6> 
   <h6>Плотность 846 чел./км² </h6> 
   <h6>Национальный состав казахи, русские, узбеки, украинцы </h6> 
   <h6>Конфессиональный состав мусульмане, христиане и др. </h6> 
   <h6>Часовой пояс UTC+6 </h6> 
   <h6>Телефонный код +7 7212 </h6> 
   <h6>Почтовый индекс 100000 (старый 470000) </h6> 
   <h6>10 февраля 1934 года Караганда получила статус города.
</ul>

Результат:

3. Скроем 3-ий и 4-ый параграфы:

.pright {
   text-align: right;
   line-height: 25px;
   display:none;
}
.pcenter {
   text-align: center;
   line-height: 10px;
   visibility:hidden;
}

В результате третий параграф не отображается, а вместо четвертого пустое пространство: