Уроки верстки

Урок 3 — Изучаем глубже CSS

• 14-06-2018 •

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

Сделаем шапку чучуть красивее


<img src="http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png" alt="image-name">

Чтобы не заморачиваться с лого, я просто взял первую попавшуюся картинку с гугл, скопировал ссылку и вставил в наш код.

Картинка слишком большая для нашего дизайна, по этому я задал ей максимальную ширину


header .logo img{
  max-width: 150px;
}

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

Добавим наш выпадающий список в html


<nav> 
 <ul> 
  <li><a href="">Home</a></li> 
  <li><a href="">About us</a>
   <ul class="sub-menu"> 
    <li><a href="">About 1</a></li> 
    <li><a href="">About 2</a></li> 
    <li><a href="">About 3</a></li> 
   </ul> 
  </li>  
  <li><a href="">Contacts</a></li> 
 </ul> 
</nav>

Мы добавили под под ссылку About us, еще один список. Для начало сделаем его невидимым


header .sub-menu{
  display: none;
}

Сделаем текст в меню черного цвета, поставим отступы, чтобы все было по центру и добавим анимацию при наведении


header nav li a{
    padding: 14px 5px;
    display: block;
    color: #000;
    text-decoration: none;
    transition: 0.3s;
}

header nav li a:hover{
  background-color: #f3f3f3;
}

Новые для вас стили это text-decoration:none; , что означает, убрать нижнее подчеркивание у ссылок

transition: 0.3s; — Если у этого блока будет значение :hover (наведение курсора) и предположим при наведении мы меняем цвет, то цвет будет менятся не мгновенно, а в течении 0.3с, т.е. плавно

header nav li a:hover — если курсор неведен на этот блок


header{
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
header:after{
  content: '';
  overflow: hidden;
  display: block;
  width: 100%;
}
header .sub-menu{
  display: none;
  padding: 0;
  left: 0;
  top: 46px;
  background-color: #f3f3f3;
  position: absolute;
}
header .sub-menu li{
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding: 0;
}
header nav li{
  display: inline-block;
  padding-right: 10px;
  position: relative;
}
header nav li:hover .sub-menu{
  display: block;
}

Мы добавили достаточно много стилей, для того чтобы работал наш выпадающий список

Первое, что мы сделали, это убрали overflow:hidden; с header, т.к. выпадающий список будет выходить за границы нашего блока

header:after — Позволяет добавлять контент, после (after) или до (before). Я его добавил для того, чтобы не расплывали блоки, которые идут после header и добавил overflow:hidden уже в него и растянул на всю ширину


header:after{
  content: '';
  overflow: hidden;
  display: block;
  width: 100%;
}

header .sub-menu — Я выставил выпадающий список в определенное место следующим способом:

  • position: absolute; — Этот блок будет как бы болтаться внутри блока, у которого есть стиль position: relative; .Таким блокам можно задавать позицию стилями left, right, top, bottom
  • left: 0 — блок прижмется к левому краю родителя
  • top: 46px — отодвинем блок сверху от родителя на 46px

header .sub-menu{
  display: none;
  padding: 0;
  left: 0;
  top: 46px;
  background-color: #f3f3f3;
  position: absolute;
}

Дальше список мы рястягиваем на всю ширину и под каждой строчкой ставим подчеркивание


header .sub-menu li{
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding: 0;
}

Задали родительскому списку position: relative;


header nav li{
  position: relative;
}

И последнее, что надо сделать, это сделать выпадающий список видимым при наведении курсора


header nav li:hover .sub-menu{
  display: block;
}

Добавим конент на страницу


<section> 
 <h3>Hello world</h3>  
 <img src="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg" alt="my-photo"> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu dignissim eros. Proin mollis suscipit tortor faucibus commodo. Aenean convallis diam in nisi elementum consectetur. Sed nisi leo, mollis quis nisi nec, consectetur molestie risus. Fusce mauris nunc, dapibus a dui in, commodo rhoncus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis mollis nisl condimentum tellus iaculis, eu bibendum ex fringilla. Duis nunc sapien, hendrerit quis imperdiet a, mattis in elit. Curabitur sit amet neque a nibh elementum hendrerit eu quis est. Duis ut luctus velit.</p> 
</section>

Добавили картинку и увеличили объем текста. Осталось добавить чучуть стилей


section h3{
  font-size: 35px;
  text-align: center;
  text-transform: uppercase;
}

section p {
  font-size: 20px;
}

section img{
  max-width: 100%;
}

Поставили заголовок по центру и все буквы заглавные.

Если размер картинки больше, чем ширина сайта, то она будет вылезать за края, чтобы этого не произошло, нужно задать стиль max-width: 100%;

В итоге должно получиться следующее:

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

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

Весь код можно посмотреть вот ТУТ

Надеюсь урок был полезен!

Добавить комментарий