Веб-мастерская Ларисы ВоронинойВкладки CSS.
WEB-мастерская Ларисы Ворониной logo

Вкладки CSS. Мар 3 2017


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

Рассмотрим простой пример создания вкладок для сайта  с помощью HTML и CSS.

Разметка index.html.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Вкладки CSS</title>
     </head>
     <body>
          <div class="wrapper">
               <h1>Простой пример создания вкладок с помощью HTML и CSS</h1>
               <hr>
               <span><em>Этот код можно использовать для создания одностраничного сайта.</em></span>
               <ul class="pages">
                    <li>
                         <input type="radio" name="tabs" id="page1" checked>
                         <label for="page1">Меню1</label>
                         <div class="content">
                              <h2>Заголовок Меню1 </h2>
                              <img src="images/img1.jpg">
                              <p>Здесь располагается текст контента Меню1</p>
                         </div>
                    </li>
                    <li>
                         <input type="radio" name="tabs" id="page2">
                         <label for="page2">Меню2</label>
                         <div class="content">
                              <h2>Заголовок Меню2 </h2>
                              <img src="images/img2.jpg">
                              <p>Здесь располагается текст контента Меню2</p>
                         </div>
                    </li>
                    <li>
                         <input type="radio" name="tabs" id="page3">
                         <label for="page3">Меню3</label>
                         <div class="content">
                              <h2>Заголовок Меню3 </h2>
                              <img src="images/img3.jpg">
                              <p>Здесь располагается текст контента Меню3</p>
                         </div>
                    </li>
               </ul>
          </div>
     </body>
</html>

Файл стилей style.css.

html, body {
height: 100%;
background: #000 url(images/fon.jpg) fixed;
}
.wrapper {
margin: 0 auto;
width: 900px;
height: 100%;
bottom: 0px;
overflow: hidden;
background: rgba(165,165,185,0.8);
}
h1 {
margin: 20px 50px;
font-size: 36px;
text-align: center;
}
span {
margin: 50px;
font-size: 24px;
}
label {
font-size: 18px;
}
p {
float: right;
padding: 20px;
}
.pages {
list-style: none;
position: relative;
}
.pages:after {
content: "";
clear: both;
display: block;
}
.pages li {
float: left;
background: #fff000;
}
.pages li > input {
display: none;
}
.pages li > label {
display: inline-block;
height: 30px;
width: 70px;
border-left: 5px solid #a5a5b9;
padding: 5px 20px;
cursor: pointer;
}
.pages li:first-child > label {
border-left: none;
}
.pages .content {
display: none;
position: absolute;
left: 0;
padding: 20px;
background: #ccc;
margin: 20px 40px;
width: 750px;
height: 350px;
}
.pages li > input:checked + label {
background: #4d20cd;
}
.pages li > input:checked ~ .content {
display: block;
}

Скачать исходники.


Рейтинг@Mail.ru