Бесплатные адаптивные html5 css3 шаблоны сайтов и интернет-магазинов
Содержание:
Код раздела head
Теперь рассмотрим код HTML раздела head:
<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>E-Store single page layout | Script Tutorials</title> <meta charset="utf-8"> <!-- Подключаем таблицы стилей --> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"> <!-- Подключаем скрипты --> <script src="js/jquery.js"></script> <script src="js/jquery.nivo.slider.pack.js"></script> <script src="js/main.js"></script> <!--> <script type="text/javascript" src="js/html5.js"></script> <!endif--> </head>
Всплывающие кнопки
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом , скрыта с помощью и немного сдвинута вниз за счет . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер абсолютно позиционирован в блоке и равен родителю по ширине и высоте.
Далее мы стилизуем псевдоэлемент таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.
Теперь можно добавить собственно контент — кнопки, размещенные в блоке .
Благодаря правилу у псевдоэлемента , кнопки расположены ниже основного контента, и блок занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо.
Адаптивная сетка
Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
И зададим стили карточек товаров.
Из-за того, что карточки имеют равный , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения у родителя.
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.
Стили CSS:
/* раздел шапки */
header {
background: url("../images/header-bg.png") repeat scroll left top #fff;
border-bottom:2px solid #e0e0e0;
position: relative;
z-index: 10;
}
.top_head {
overflow: hidden;
position: relative;
}
.logo {
float: left;
padding: 37px 39px;
}
#search {
float: right;
margin: 21px 41px ;
text-align: right;
}
#search form {
float:right;
}
#search form inputtype="text" {
background: none repeat scroll #FFFFFF;
border: 1px solid #E0E0E0;
float: left;
font-family: Arial,Helvetica,sans-serif;
height: 15px;
padding: 5px;
width: 129px;
}
#search form inputtype="submit" {
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
border-left-width:0px;
color: #383838;
cursor:pointer;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: ;
width: 64px;
}
#social {
float:right;
list-style:none outside none;
margin: 30px ;
padding:;
}
#social li {
float:left;
padding: 5px;
}
#social li a:hover img {
margin-top:1px;
}
/* основное меню */
nav {
background-color:#00942f;
overflow: hidden;
}
nav ul {
margin: ;
padding: ;
}
nav ul li {
float: left;
}
nav ul li a {
color: #FFFFFF;
display: block;
font-size: 11px;
font-weight: bold;
height: 20px;
line-height: 20px;
padding: 4px 10px 4px 11px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover, nav ul li.selected a {
background: none repeat scroll #353535;
}
#submenu {
background: -moz-linear-gradient(#ffffff, #f6f6f6); /* Для браузера Firefox от версии 3.6 */
background: -ms-linear-gradient(#ffffff, #f6f6f6); /* Для браузера Internet Explorer версии 10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(%, #ffffff), color-stop(100%, #f6f6f6)); /* Для браузеров Safari от версии 4 и Chrome от версии 2 */
background: -webkit-linear-gradient(#ffffff, #f6f6f6); /* Для браузеров Safari от версии 5.1 и Chrome от версии 10 */
background: -o-linear-gradient(#ffffff, #f6f6f6); /* Для браузера Opera версии 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* Для браузеров Internet Explorer версий 6 и 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6')"; /* Для браузера Internet Explorer версии 8 */
background: linear-gradient(#ffffff, #f6f6f6); /* стандартное свойство */
border: 1px solid #E0E0E0;
height: 34px;
margin: 20px 40px;
}
#submenu ul {
margin: ;
padding: ;
}
#submenu li {
float: left;
line-height: 1em;
list-style: none outside none;
margin: ;
position: relative;
}
#submenu li a {
background: url("../images/smenup.png") no-repeat scroll 9px transparent;
border-right: 1px solid #E0E0E0;
color: #383838;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 14px;
margin: 19px;
padding: 9px 18px 11px 24px;
text-decoration: none;
text-transform: uppercase;
}
#submenu li a:hover {
background-image: url("../images/smenua.png");
}
Раздел шапки с основным меню, логотипом, формой поиска, дополнительным меню и т.д.
Вот разметка HTML для этого раздела:
<header><!-- Раздел шапки страницы --> <nav><!-- Основное меню --> <ul> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Specials</a></li> <li><a href="#">All Products</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">About</a></li> <li><a href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Back To Tutorial</a></li> </ul> </nav> <div class="top_head"><!-- Элемент верха шапки страницы --> <div class="logo"><!-- Логотип --> <a href="https://www.script-tutorials.com/"> <img src="images/logo.jpg" title="E-Store template" alt="E-Store template" /> </a> </div> <section id="search"><!-- Форма поиска --> <form action="#" onsubmit="return false;" method="get"> <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q"> <input type="submit" value="Search"> </form> <ul id="social"><!-- Значки социальных сетей --> <li><a href="#" title= rel="external nofollow"><img alt="" src=></a></li> <li><a href="#" title= rel="external nofollow"><img alt="" src=></a></li> <li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li> <li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li> </ul> </section> </div> <section id="submenu"><!-- Дополнительное меню --> <ul> <li><a href="#">Category #1</a></li> <li><a href="#">Category #2</a></li> <li><a href="#">Category #3</a></li> <li><a href="#">Category #4</a></li> <li><a href="#">Category #5</a></li> <li><a href="#">Category #6</a></li> </ul> </section> </header>
Идем дальше — раздел body, основная верстка
Вся верстка состоит из четырех основных разделов: шапка сайта с основным меню, логотипом, формой поиска, значками социальных сетей и дополнительным меню с категориями, раздел с прокручивающейся галереей изображений nivoSlider, основной раздел содержимого, состоящий из двух столбцов для всего остального содержимого, и подвал сайта, в котором расположены авторские права. Целиком верстка выглядит так:
<body> <div> <header><!-- Раздел шапки страницы --> <nav><!-- Основное меню --> <ul> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Specials</a></li> ....... </ul> </nav> <div class="top_head"><!-- Элемент верха шапки страницы --> <div class="logo"><!-- Логотип --> <a href="https://www.script-tutorials.com/"> <img src="images/logo.jpg" title="E-Store template" alt="E-Store template" /> </a> </div> <section id="search"><!-- Форма поиска --> <form action="#" onsubmit="return false;" method="get"> ....... </form> <ul id="social"><!-- Значки социальных сетей --> ....... </ul> </section> </div> <section id="submenu"><!-- Дополнительное меню --> <ul> <li><a href="#">Category #1</a></li> <li><a href="#">Category #2</a></li> ....... </ul> </section> </header> <div id="slider"><!-- Прокручивающаяся галерея рекламных изображений --> <section id="slider-wrapper"> ....... </section> </div> <div id="main"><!-- Основной раздел содержимого --> <section id="content"><!-- Основной подраздел содержимого --> <div id="left"> <h3>Last products</h3> <ul> ............ </ul> </div> <div id="right"> <h3>Top sells</h3> <ul> ............ </ul> </div> </section> </div> <footer><!-- Подвал сайта --> <div id="privacy"> </div> </footer> </div> </body>
Переключение вида карточек товаров
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс .
Таким образом, прописав стили для карточек-дочерних элементов блока , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.
Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.
