568 Сегодня мы подготовили вам следующий интересный шаблон. Это шаблон макета в стиле винтаж или, если хотите, в ретро-стиле. В приятных и теплых цветах. Мы уверены, что вам он понравится.
Давайте посмотрим, из чего сделан «Retro shop».
Окончательный вариант
Начнем
Создадим новую папку для проекта и несколько вложенных в нее (для более лучшего структурирования необходимого материала):
- css – для всех таблиц стилей CSS (reset.css, style.css)
- images – для всех используемых изображений
- js – для всех файлов, содержащих JS (html5.js, jquery.js и superfish.js)
Разметка head
Сейчас мы предоставим вам HTML разметку для тега head:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>'Retro shop' single page layout | Script tutorials demo</title> <meta charset="utf-8"> <!-- Link fonth --> <link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <!-- Link styles --> <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 scripts --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/superfish.js"></script> <script> $(window).load(function() { $("ul.sf-menu").superfish({ pathClass: 'current', delay: 2000, animation: {opacity:'show',height:'show'}, speed: 'slow', autoArrows: true, dropShadows: true }); }); WebFontConfig = {google: {families: ['Yellowtail']}}; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <![endif]--> </head> |
Далее — главный тег (body)
Тег состоит из 7 основных разделов: заголовка (содержащим верхнее меню, переключатель валюты, поисковую форму и логотип), меню навигации, небольшой участок для баннеров, основная часть с основным текстом (популярные продукты), второй части (две колонки для облака тегов на левой стороне и материала по другой продукции на правой колонке), небольшой раздел с горизонтальной полосой и нижний колонтитул (несколько ссылок и авторские права). Все это выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<body> <header><!-- Define the header section of the page --> <div class="head_menus"> <div class="menu"><!-- Define the topest menu --> <ul> <li><a href="#">Home</a></li> ........ </ul> </div> <div class="box_currencies"><!-- Define currency switcher --> <select class="select" name="currency"> <option value="USD">US dollar</option> <option value="EUR">Euro</option> </select> </div> <div class="search"><!-- Define the search element --> <form method="get" action="#"> <input type="text" onfocus="if(this.value =='Search' ) this.value=''" onblur="if(this.value=='') this.value='Search'" maxlength="300" size="10" value="Search" name="s"> <input type="image" alt="" src="images/search_btn.gif"> </form> </div> </div> <div class="logo"><!-- Define the logo element --> <a href="http://www.script-tutorials.com/"> <h1>My Retro Shop</h1> <h3>Choose your favorite</h3> </a> </div> </header> <nav><!-- Define the navigation menu --> <div> <ul class="sf-menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> ........ </ul> </div> </nav> <section id="banners"><!-- Banners section --> <ul> <li><a href="#"><img alt="" src="images/b1.png"></a></li> ........ </ul> </section> <section id="content"><!-- Define the content section --> <div class="dbox"> <div class="head">Popular products</div> <div class="list"> <ul> <li> <a href="#"> <img src="images/coin.png" /> <span class="title">Item title</span> <span class="price"><p>$10.00</p></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> <li class="vsep"></li> ........ </ul> </div> </div> </section> <section id="breadcrumb"><!-- Define the breadcrumb section --> <div class="breadcrumb"> <a class="headerNavigation" href="#">Top</a> » <a class="headerNavigation" href="#">Catalog</a> » <a class="headerNavigation last" href="#">Coins</a> </div> </section> <section id="content"><!-- Define the content #2 section --> <div class="col1"> <div class="dbox"> <div class="head">Tag Cloud</div> <div class="tags"> <ul> <li><a href="#">Tag 1</a></li> ........ </ul> </div> </div> </div> <div class="col2"> <div class="dbox"> <div class="head">Another products</div> <div class="blist"> <ul> ........ </ul> </div> </div> </div> </section> <footer><!-- Define the footer section of the page --> <div> <ul> <li><a href="#">Home</a></li> ........ </ul> <p class="link"><a href="http://www.script-tutorials.com/">Template by Script Tutorials</a></p> </div> </footer> </body> |
Основные стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* base styles */ body { background: none repeat scroll 0 0 #E5DEC2; color: #B38466; font-family: Arial,Helvetica,sans-serif; font-size: 75%; line-height: 1.5em; margin: 0; position: relative; } a { color: #A16641; text-decoration: none; } a:hover,a:active { color: #A16641; text-decoration: underline; } img { border:0 none; margin:0; vertical-align:top; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } a:hover img { opacity:.9; } |
Раздел верхнего колонтитула ( header, навигационное меню и три баннера)
Первые три элемента - область заголовка, меню навигации и баннеры. HTML разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<header><!-- Define the header section of the page --> <div class="head_menus"> <div class="menu"><!-- Define the topest menu --> <ul> <li><a href="#">Home</a></li> <li><a href="#">What's New?</a></li> <li><a href="#">Featured</a></li> <li><a href="#">Top sells</a></li> <li><a href="#">Specials</a></li> <li><a href="#">Extra</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Contacts</a></li> </ul> </div> <div class="box_currencies"><!-- Define currency switcher --> <select class="select" name="currency"> <option value="USD">US dollar</option> <option value="EUR">Euro</option> </select> </div> <div class="search"><!-- Define the search element --> <form method="get" action="#"> <input type="text" onfocus="if(this.value =='Search' ) this.value=''" onblur="if(this.value=='') this.value='Search'" maxlength="300" size="10" value="Search" name="s"> <input type="image" alt="" src="images/search_btn.gif"> </form> </div> </div> <div class="logo"><!-- Define the logo element --> <a href="http://www.script-tutorials.com/"> <h1>My Retro Shop</h1> <h3>Choose your favorite</h3> </a> </div> </header> <nav><!-- Define the navigation menu --> <div> <ul class="sf-menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Submenu 21</a></li> <li><a href="#">Submenu 22</a> <ul> <li><a href="#">Submenu a</a></li> <li><a href="#">Submenu b</a> <ul> <li><a href="#">Submenu e</a></li> <li><a href="#">Submenu f</a></li> <li><a href="#">Submenu g</a></li> <li><a href="#">Submenu h</a></li> </ul> </li> <li><a href="#">Submenu c</a></li> <li><a href="#">Submenu d</a></li> </ul> </li> <li><a href="#">Submenu 23</a></li> <li><a href="#">Submenu 24</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Submenu 31</a></li> <li><a href="#">Submenu 32</a></li> <li><a href="#">Submenu 33</a></li> <li><a href="#">Submenu 34</a></li> </ul> </li> <li><a href="#">Menu 4</a> <ul> <li><a href="#">Submenu 41</a></li> <li><a href="#">Submenu 42</a></li> <li><a href="#">Submenu 43</a></li> <li><a href="#">Submenu 44</a></li> </ul> </li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Menu 7</a></li> <li><a href="#">Menu 8</a></li> <li><a href="#">Menu 9</a></li> </ul> </div> </nav> <section id="banners"><!-- Banners section --> <ul> <li><a href="#"><img alt="" src="images/b1.png"></a></li> <li><a href="#"><img alt="" src="images/b2.png"></a></li> <li><a href="#"><img alt="" src="images/b3.png"></a></li> </ul> </section> |
стили CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 |
/* header section */ header { background: url("../images/head.gif") repeat-x scroll 0 0 transparent; position:relative; } .logo { margin: 30px auto; position: relative; text-align: center; width: 940px; } .logo a { text-decoration: none; } .logo h1 { color: #B53D25; font-family: 'Oswald',bold; font-size: 44px; height: 44px; line-height: 44px; margin-bottom: 10px; } .logo h3 { color: #7D4022; font-family: 'Yellowtail',cursive; font-size: 38px; height: 38px; line-height: 38px; } #search { position: absolute; right: 40px; top: 40px; } #search form input[type="text"] { border: 1px solid #e3e3e3; color: #343434; padding: 7px 30px 6px 10px; width: 222px; } #search form input[type="submit"] { background: url(../images/search_btn.png) no-repeat 0 0; border: none; cursor: pointer; height: 13px; margin: 0; padding-left: 0; padding-right: 0; position: absolute; right: 10px; top: 8px; width: 13px; } /*head menus*/ .head_menus { margin:0 auto; overflow:hidden; width:940px; } .head_menus .menu { float:left; font-weight:400; } .menu ul { float:left; list-style:none outside none; margin:0; padding:0; } .menu li { float:left; margin:0; padding:0; } .menu li a { border:1px solid transparent; border-width:0 1px; color:#f1eddd; display:inline-block; font-family:'Oswald', sans-serif; font-weight:400; padding:6px 8px 9px; text-decoration:none; } .menu li.act a,.menu li:hover a { background:url('../images/menu_act.gif') 100% 0 repeat-x transparent; border:1px solid #4bb2a8; border-width:0 1px; color:#f1eddd; text-decoration:none; } /* and rest elements */ .box_currencies { float:right; line-height:33px; } .box_currencies select { background:url("../images/cur_arrow.gif") no-repeat scroll right top transparent; border:none; height:20px; width:88px; } .search { float:right; line-height:33px; margin-right:20px; } .search form { display:inline-block; overflow:hidden; vertical-align:middle; } .search input[type=text] { background:url("../images/search_input_bg.gif") no-repeat scroll 0 0 transparent; border:0 none; color:#AC9076; float:left; font-size:1.2em; margin:0; padding:4px; position:relative; width:160px; } .search input[type=image] { border:0; float:left; width:23px; } /*navigation menu*/ nav { background: url("../images/nav.png") no-repeat scroll 50% 0 transparent; } nav > div { margin: 0 auto; min-height: 62px; padding-top: 0; width: 940px; z-index: 999; } .sf-menu,.sf-menu * { list-style:none; margin:0; padding:0; } .sf-menu { line-height:1.0; } .sf-menu ul { background:url('../images/sf-menu.gif') 0 0 repeat transparent; position:absolute; top:-999em; width:11.6338em; } .sf-menu > li ul { padding:1em 1.8181em; } .sf-menu ul ul { margin-top:7px; } .sf-menu ul li { width:100%; } .sf-menu li:hover { visibility:inherit; } .sf-menu li { float:left; position:relative; } .sf-menu a { display:block; position:relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0; top:5.2em; z-index:99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:-999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left:13.4419em; top:0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:-999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left:13.4519em; top:0; } .sf-menu { margin-bottom:0; margin-left:18px; } #header .sf-menu a { color:#FFF; font-weight:700; padding:.80em 2em; text-decoration:none; } .sf-menu > li > a { color:#f1eddd; display:none; font-size:1.7em; font-weight:400; margin:0 6px; padding:16px 13px 20px; text-decoration:none; } .sf-menu > li > a.current,.sf-menu > li > a:hover { color:#f1eddd; text-decoration:none; } .sf-menu .sfHover li a:hover { color:#fefefe; } .sf-menu .sfHover a,.sf-menu a,.sf-menu a:hover,.sf-menu .sfHover li a,.sf-menu > li li > a:hover { color:#fff; text-decoration:none; } .sf-menu > li li > a:hover,.sf-menu > li li:hover > a.current { color:#fefefe; font-weight:400; } .sf-menu .sfHover li a,.sf-menu > li li > a { background:transparent; background-position:1px 4px; color:#c6a37e; font-size:1em; padding:6px 0 7px; } .sf-menu > li li:hover > a.current,.sf-menu > li li > a:hover { background-position:1px -31px; } .sf-menu > li { background:url('../images/sf-menu_divider.png') 0 27px no-repeat transparent; } .sf-menu > li.first { background:none; } .sf-menu > li:hover > a { color:#f7f189; } .sf-menu li li { background:url('../images/sf-menu_li.gif') 0 100% repeat-x transparent; border-bottom:0 solid #242424; } .sf-menu li li.last { background:none; border-bottom:0 solid #2d2d2d; } .sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active { outline:0; } .sf-menu a.sf-with-ul { min-width:1px; padding-right:25px; } .sf-sub-indicator2 { height:10px; width:17px; } .sf-sub-indicator { height:10px; width:10px; } .sf-sub-indicator2,.sf-sub-indicator { background:url('../images/superfish-arrows.png') no-repeat; display:block; overflow:hidden; position:absolute; right:0; text-indent:-999em; top:1.05em; z-index:100; } li > .sf-sub-indicator2 { right:50%; top:53px; } .sf-menu > li a > .sf-sub-indicator { right:5px; top:25px; } .sf-menu > li li a > .sf-sub-indicator { right:-15px; top:7px; } li li a > .sf-sub-indicator { right:5px; top:7px; } a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator { background-position:0px -20px; } a > .sf-sub-indicator { background-position:0px -30px; } .sf-menu ul .sf-sub-indicator { background-position:0 -30px; } .sf-menu ul a > .sf-sub-indicator { background-position:0 0; } .sf-menu ul li:hover > a > .sf-sub-indicator { background-position:0 -10px; } .sf-shadow ul { padding:5px 0 12px; } .sf-shadow ul.sf-shadow-off { background:transparent; } .sf-sub-indicator2 { display:none; } .wf-inactive .sf-menu > li > a { display:none; font-family:serif; font-size:0; } .wf-active .sf-menu > li > a { display:block; font-family:'Yellowtail', cursive; font-size:1.915em; } /* banners section */ section#banners { margin: 0 auto; width: 940px; } section#banners ul { list-style: none outside none; margin: 0; overflow: hidden; padding: 0; } section#banners ul li { display: block; float: left; margin: 0 5px 15px; padding: 0; } |
Главный раздел
Далее — центральный раздел c основным контентом. Это самый большой раздел, который содержит три секции: список продуктов, расположенных слева направо (с небольшим описанием), небольшую цепочку разделов и третий раздел состоит из 2 колонок (в первой колонке мы можем расположить, как пример — блок тегов), на правой стороне мы можем расположить перечень продукции с подробным описанием.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<section id="content"><!-- Define the content section --> <div class="dbox"> <div class="head">Popular products</div> <div class="list"> <ul> <li> <a href="#"> <img src="images/coin.png" /> <span class="title">Item title</span> <span class="price"><p>$10.00</p></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> <li class="vsep"></li> <li> <a href="#"> <img src="images/coin2.png" /> <span class="title">Item title</span> <span class="price"><p>$15.00</p><del>$35.00</del></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> <li class="vsep"></li> <li> <a href="#"> <img src="images/coin.png" /> <span class="title">Item title</span> <span class="price"><p>$20.00</p></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> <li class="vsep"></li> <li> <a href="#"> <img src="images/coin2.png" /> <span class="title">Item title</span> <span class="price"><p>$25.00</p></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> <li class="vsep"></li> <li> <a href="#"> <img src="images/coin.png" /> <span class="title">Item title</span> <span class="price"><p>$30.00</p></span> <div class="but"><p>Add to Cart</p><p></p></div> </a> </li> </ul> </div> </div> </section> <section id="breadcrumb"><!-- Define the breadcrumb section --> <div class="breadcrumb"> <a class="headerNavigation" href="#">Top</a> » <a class="headerNavigation" href="#">Catalog</a> » <a class="headerNavigation last" href="#">Coins</a> </div> </section> <section id="content"><!-- Define the content #2 section --> <div class="col1"> <div class="dbox"> <div class="head">Tag Cloud</div> <div class="tags"> <ul> <li><a href="#">Tag 1</a></li> <li><a href="#">Tag 2</a></li> <li><a href="#">Tag 3</a></li> <li><a href="#">Tag 4</a></li> <li><a href="#">Tag 5</a></li> <li><a href="#">Tag 6</a></li> <li><a href="#">Tag 7</a></li> <li><a href="#">Tag 8</a></li> <li><a href="#">Tag 9</a></li> <li><a href="#">Tag 10</a></li> </ul> </div> </div> </div> <div class="col2"> <div class="dbox"> <div class="head">Another products</div> <div class="blist"> <ul> <li> <div class="img"> <a href="#"> <img src="images/coin3.png" /> </a> </div> <div class="desc"> <div class="d"><span>Date Added:</span> Thursday 27 March, 2012</div> <h2><a href="#">Coin title 1</a></h2> <div class="d">Price: <div class="price">$39.99</div></div> <div class="d">Some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here</div> <div> <div class="but"><p>Details</p><p></p></div> <div class="but"><p>Add to Cart</p><p></p></div> </div> </div> </li> <li class="sep"></li> <li> <div class="img"> <a href="#"> <img src="images/coin4.png" /> </a> </div> <div class="desc"> <div class="d"><span>Date Added:</span> Monday 26 March, 2012</div> <h2><a href="#">Coin title 2</a></h2> <div class="d">Price: <div class="price">$49.99</div></div> <div class="d">Some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here</div> <div> <div class="but"><p>Details</p><p></p></div> <div class="but"><p>Add to Cart</p><p></p></div> </div> </div> </li> </ul> </div> </div> </div> </section> |
стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 |
/* main section */ .col1 { float: left; margin-right: 15px; overflow: hidden; width: 300px; } .col2 { float: left; overflow: hidden; width: 625px; } section#content { margin: 0 auto; overflow: hidden; width: 940px; } .dbox { background: url("../images/box_title.jpg") repeat-y scroll 0 0 transparent; border: 1px solid #F1EDDD; box-shadow: 0 0 3px #B2AC9C; overflow: hidden; } .dbox .head { color: #7D4022; font-family: 'Yellowtail',cursive; font-size: 2.09em; padding: 15px 10px 12px 13px; } .dbox .list, .dbox .blist { background: url("../images/box_bg.jpg") repeat-x scroll 0 0 #F1EDDD; } .dbox .list ul, .dbox .blist ul { list-style: none outside none; margin: 0; overflow: hidden; padding: 0; } /* list type 1 */ .dbox .list ul li { float: left; height: 285px; margin: 7px; width: 150px; } .dbox .list ul li:first-child { margin-left: 15px; } .dbox .list ul li span { display: block; text-align: center; text-decoration: none; } .dbox .list ul li a:hover { text-decoration: none; } .dbox .list ul li span p { display: inline-block; float:left; font-size: 2.9em; } .dbox .list ul li span.price { color: #B53D25; font-family: 'Yellowtail',cursive; height: 28px; line-height: 28px; overflow: hidden; padding: 0 8px; } .dbox .list ul li span del { color: #4FA99B; display: inline-block; float:right; font-size: 1.9em; } .dbox .list ul li div.but { overflow: hidden; padding: 7px; } .dbox .list ul li div.but p { background: url("../images/buttons.gif") no-repeat scroll 100% 0 transparent; float: left; height: 35px; width: 16px; } .dbox .list ul li div.but p:first-child { background: url("../images/buttons.gif") no-repeat scroll 0 0 transparent; color: #F1EDDD; cursor: pointer; display: inline-block; float: left; font-family: 'Oswald',sans-serif; font-size: 1.35em; font-weight: normal; height: 25px; line-height: 1em; padding: 5px 10px; position: relative; text-align: center; text-decoration: none; white-space: nowrap; width: auto; } .dbox .list ul li .but:hover p { background-position: 100% 100%; } .dbox .list ul li .but:hover p:first-child { background-position: 0 100%; } .dbox .list ul li.vsep { background: url("../images/vsep.gif") repeat-y scroll 50% 0 transparent; display: inline-block; float: left; min-height: 285px; position: relative; width: 10px; } /* list type 2 */ .dbox .blist ul li { margin: 10px; overflow: hidden; } .dbox .blist ul li .img { float: left; height: 200px; width: 200px; } .dbox .blist ul li img { height: 200px; width: 200px; } .dbox .blist ul li .desc { float: left; margin-left: 15px; width: 385px; } .dbox .blist ul li .desc .d { border-bottom: 1px solid #B99A83; padding: 7px 0 11px; text-align: left; } .dbox .blist ul li .desc span { color: #7D4022; font-weight: bold; } .dbox .blist ul li .desc h2 { font-size: 18px; line-height: 1.3em; padding: 11px 0 10px; text-align: left; } .dbox .blist ul li .desc .d .price { color: #B53D25; display: inline-block; font-family: 'Yellowtail',cursive; font-size: 2.9em; height: 35px; line-height: 35px; margin-left: 10px; } .dbox .blist ul li div.but { float: left; overflow: hidden; padding: 7px; } .dbox .blist ul li div.but p { background: url("../images/buttons.gif") no-repeat scroll 100% 0 transparent; float: left; height: 35px; width: 16px; } .dbox .blist ul li div.but p:first-child { background: url("../images/buttons.gif") no-repeat scroll 0 0 transparent; color: #F1EDDD; cursor: pointer; display: inline-block; float: left; font-family: 'Oswald',sans-serif; font-size: 1.35em; font-weight: normal; height: 25px; line-height: 1em; padding: 5px 10px; position: relative; text-align: center; text-decoration: none; white-space: nowrap; width: auto; } .dbox .blist ul li .but:hover p { background-position: 100% 100%; } .dbox .blist ul li .but:hover p:first-child { background-position: 0 100%; } .dbox .blist ul li.vsep { background: url("../images/vsep.gif") repeat-y scroll 50% 0 transparent; display: inline-block; float: left; min-height: 285px; position: relative; width: 10px; } .dbox .blist ul li.sep { background: url("../images/hsep.gif") repeat-x scroll 0 50% transparent; height: 10px; } /* tags */ .dbox .tags { background: url("../images/box_bg.jpg") repeat-x scroll 0 0 #F1EDDD; } .dbox .tags ul { list-style: none outside none; margin: 0; overflow: hidden; padding: 0; } .dbox .tags ul li { border: 1px solid #A8998C; border-radius: 5px 5px 5px 5px; display: inline-block; float: left; font-family: 'Oswald',sans-serif; margin: 5px; padding: 3px 10px; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; } .dbox .tags ul li:hover { background-color: #e9e5d5; text-decoration: none; } .dbox .tags ul li a:hover { text-decoration: none; } /* breadcrumb section */ section#breadcrumb { margin: 0 auto; width: 940px; } .breadcrumb { font-size: 1.3em; padding: 16px 0; } |
Раздел нижнего колонтитула
И наконец - область нижнего колонтитула:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<footer><!-- Define the footer section of the page --> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">What's New?</a></li> <li><a href="#">Featured</a></li> <li><a href="#">Top sells</a></li> <li><a href="#">Specials</a></li> <li><a href="#">Extra</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Contacts</a></li> </ul> <p class="link"><a href="http://www.script-tutorials.com/">Template by Script Tutorials</a></p> </div> </footer> |
стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* footer section */ footer > div { border-top: 1px solid #D7C6A8; margin: 20px auto 0; padding: 15px 0 0; position: relative; width: 940px; } footer ul { list-style: none outside none; overflow: hidden; } footer ul li { float: left; } footer ul li a { display: inline-block; margin: 0 20px 10px 0; } footer ul li a { color: #A16641; font-weight: normal; text-decoration: none; } footer .link { text-align: right; } |
JS для шаблона
Все библиотеки содержатся в данном архиве
Выводы
Поздравляем, новый шаблон «Retro shop» готов! Вы можете использовать его, как есть, но, пожалуйста, оставьте обратную ссылку на источник без изменений. И, пожалуйста, не забудьте поблагодарить разработчиков за этот прекрасный шаблон.
Ну, а получив такой прекрасный сайт, можно и его продвижение заказать, например в компании http://1pos.ru/
