]]>eTXT]]>

Сервис анализа и проверки траста xt сайтов в Яндексе

]]>Анализ сайта:]]> Проверка Траста

]]>]]>

Как сделать вкладки в html

В прошлых статьях вы научились делать вкладки для сайта на wordpress и drupal. И разобрались, как во вкладках разместить виджеты социальных сетей.

Но порой требуется сделать самую простую вкладку с помощью связки html и css и разместить ее в любом месте страницы сайта независимо от того, какую cms используете.

В такой вкладке можно разместить любой контент или код. И для этого не придется подключать никаких дополнительных библиотек и скриптов – голые Html и css.

Пример html css вкладки на странице:

Новая вкладка html

Создание вкладки html

1 шаг. Для табов пишем простой код:

 


        
        
Содержимое вкладки 1
Содержимое вкладки 2
Содержимое вкладки 3
Содержимое вкладки 4

 

 

Создание css для новой html вкладки

2 шаг. Пишем стили для внешнего оформления.

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

 /* CSS Document */
.tabs {
    opacity: 0;  
    visibility: hidden; 
}
.tab{
    position:absolute; 
    visibility: hidden;    
    z-index: 10;  
    color:#000;
    font: bold 9pt arial;
}
.tabs:target+.tab {
    opacity: 1; 
    visibility: visible; }
.tabsLink a{
    background-color:#F06406; 
    padding:2px; 
    font: bold 10pt arial;    
    color:#fff; 
    text-decoration:none; 
    
    /* Начало закругленные табы */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Конец закругленные табы */
}

Как видите, вариантов создания обычных вкладок для скрытия контента в неактивных табах много. И это самый простой, делается за 5 минут.

Все для сайтов: 

Комментарии

1

По css+html очень понравились уроки

Обновления SEO-руководств "SEO Винчестер" и "SEO Коллайдер" на момент июня 2018 года с учетом всех последних изменений алгоритмов ПС.

Предлагаю для своих читателей  50% скидку на любую книгу без ограничения по времени!

Для получения скидки и обеих книг пишите напрямую Михаилу Шакину на globatorseo@gmail.com С КОДОМ master-live.ru  

Обе книги по 80 страниц каждая практики. Всего 160 страниц. 

Винчестер - это эффективные методы оптимизации коммерческих сайтов. 

Коллайдер - 20 методов продвижения, которые использует на практике Михаил Шакин. Очень подробно про ссылочное. При этом о многих наработках он нигде не писал для открытого доступа.

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





* Нажимая на кнопку "Отправить" я соглашаюсь с политикой конфиденциальности