Creating new HTML5&CSS3 single page layout – E-Store Today I want to introduce new great masterpiece – new template with codename: ‘E-Store’. This will nice HTML5/CSS3 template with nice light gray colors. This is template for online stores. Hope that you will like new styles and you will learn some new design methods. I going to start step-by-step tutorial for creating html5-css3 layout.
创建新HTML5＆CSS3单页布局– E-Store今天，我想介绍新的伟大杰作–代号为“ E-Store”的新模板。 这将具有漂亮HTML5 / CSS3模板和漂亮的浅灰色。 这是在线商店的模板。 希望您会喜欢新样式，并且您将学习一些新的设计方法。 我将开始创建html5-css3布局的分步教程。
最后结果 (Final Result)
现场演示
[sociallocker]
[社交储物柜]
下载结果
[/sociallocker]
[/ sociallocker]
开始吧 (Get started)
Ok, let`s start. Lets create new folder and several folders inside (to keep all well structured):
好，让我们开始吧。 让我们在其中创建新文件夹和几个文件夹(以保持结构良好)：
- css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css) css –将包含我们CSS样式表(nivo-slider.css，reset.css和style.css)
- images – which will contain all used images 图片–将包含所有使用过的图片
- js – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js) js –将包含JS文件(html5.js，jquery.js，jquery.nivo.slider.pack.js和main.js)
头段代码 (Head section code)
Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.
现在，我将为您提供带有附件CSS / JS的index.html的常规HTML头区域。
<!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">
<!-- Linking 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 rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
<!-- Linking scripts -->
<script src="js/jquery.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/main.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</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">
<!-- Linking 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 rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
<!-- Linking scripts -->
<script src="js/jquery.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/main.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
前进–主要布局(正文) (Moving forward – Main layout (body))
Whole layout consist of 4 main section: header (with navigation menu, logo, search form, social icons, plus submenu with categories), slider section (nivoSlider), main content section (two column layout for all your rest content) and footer (with copyrights). It looks like:
整个布局包括4个主要部分：页眉(带有导航菜单，徽标，搜索表单，社交图标以及带有类别的子菜单)，滑块部分(nivoSlider)，主要内容部分(所有其余内容的两列布局)和页脚(版权)。 看起来像：
<body>
<div class="container">
<header><!-- Defining the header section of the page -->
<nav><!-- Defining the navigation menu -->
<ul>
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Specials</a></li>
.......
</ul>
</nav>
<div class="top_head"><!-- Defining the top head element -->
<div class="logo"><!-- Defining the logo element -->
<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"><!-- Search form -->
<form action="#" onsubmit="return false;" method="get">
.......
</form>
<ul id="social"><!-- Social profiles links -->
.......
</ul>
</section>
</div>
<section id="submenu"><!-- Defining the sub menu -->
<ul>
<li><a href="#">Category #1</a></li>
<li><a href="#">Category #2</a></li>
.......
</ul>
</section>
</header>
<div id="slider"><!-- Defining the main content section -->
<!-- Promo slider -->
<section id="slider-wrapper">
.......
</section>
</div>
<div id="main"><!-- Defining submain content section -->
<section id="content"><!-- Defining the content section #2 -->
<div id="left">
<h3>Last products</h3>
<ul>
............
</ul>
</div>
<div id="right">
<h3>Top sells</h3>
<ul>
............
</ul>
</div>
</section>
</div>
<footer><!-- Defining the footer section of the page -->
<div id="privacy">
</div>
</footer>
</div>
</body>
<body>
<div class="container">
<header><!-- Defining the header section of the page -->
<nav><!-- Defining the navigation menu -->
<ul>
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Specials</a></li>
.......
</ul>
</nav>
<div class="top_head"><!-- Defining the top head element -->
<div class="logo"><!-- Defining the logo element -->
<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"><!-- Search form -->
<form action="#" onsubmit="return false;" method="get">
.......
</form>
<ul id="social"><!-- Social profiles links -->
.......
</ul>
</section>
</div>
<section id="submenu"><!-- Defining the sub menu -->
<ul>
<li><a href="#">Category #1</a></li>
<li><a href="#">Category #2</a></li>
.......
</ul>
</section>
</header>
<div id="slider"><!-- Defining the main content section -->
<!-- Promo slider -->
<section id="slider-wrapper">
.......
</section>
</div>
<div id="main"><!-- Defining submain content section -->
<section id="content"><!-- Defining the content section #2 -->
<div id="left">
<h3>Last products</h3>
<ul>
............
</ul>
</div>
<div id="right">
<h3>Top sells</h3>
<ul>
............
</ul>
</div>
</section>
</div>
<footer><!-- Defining the footer section of the page -->
<div id="privacy">
</div>
</footer>
</div>
</body>
这是您可以看到的基本CSS样式 (here are you can see base CSS styles)
/* base styles */
* {
margin: 0;
padding: 0;
}
body {
background: url("../images/body-bg.jpg") no-repeat fixed center top #FFFFFF;
color: #7F7F7F;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
}
img {
border: 0 none;
}
.container {
margin:30px auto 0;
position:relative;
text-align:left;
width:1000px;
padding-left: 20px;
padding-right: 20px;
}
/* base styles */
* {
margin: 0;
padding: 0;
}
body {
background: url("../images/body-bg.jpg") no-repeat fixed center top #FFFFFF;
color: #7F7F7F;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
}
img {
border: 0 none;
}
.container {
margin:30px auto 0;
position:relative;
text-align:left;
width:1000px;
padding-left: 20px;
padding-right: 20px;
}
带有导航菜单，徽标，搜索栏，子菜单等的标题部分 (Header section with nav menu, logo, search bar, submenu etc)
Here are HTML for this section:
这是此部分HTML：
<header><!-- Defining the header section of the page -->
<nav><!-- Defining the navigation menu -->
<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"><!-- Defining the top head element -->
<div class="logo"><!-- Defining the logo element -->
<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"><!-- Search form -->
<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"><!-- Social profiles links -->
<li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
<li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></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"><!-- Defining the sub menu -->
<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>
<header><!-- Defining the header section of the page -->
<nav><!-- Defining the navigation menu -->
<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"><!-- Defining the top head element -->
<div class="logo"><!-- Defining the logo element -->
<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"><!-- Search form -->
<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"><!-- Social profiles links -->
<li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
<li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></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"><!-- Defining the sub menu -->
<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>
标头部分CSS (CSS for header section)
/* header section */
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 0 0 39px;
}
#search {
float: right;
margin: 21px 41px 0 0;
text-align: right;
}
#search form {
float:right;
}
#search form input[type="text"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E0E0E0;
float: left;
font-family: Arial,Helvetica,sans-serif;
height: 15px;
padding: 5px;
width: 129px;
}
#search form input[type="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: 0;
width: 64px;
}
#social {
float:right;
list-style:none outside none;
margin:0 30px 0 0;
padding:0;
}
#social li {
float:left;
padding:0 0 0 5px;
}
#social li a:hover img {
margin-top:1px;
}
/*navigation menu*/
nav {
background-color:#00942f;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
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 0 0 #353535;
}
#submenu {
background: -moz-linear-gradient(#ffffff, #f6f6f6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #f6f6f6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #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'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6')"; /* IE8+ */
background: linear-gradient(#ffffff, #f6f6f6); /* the standard */
border: 1px solid #E0E0E0;
height: 34px;
margin: 20px 40px;
}
#submenu ul {
margin: 0;
padding: 0;
}
#submenu li {
float: left;
line-height: 1em;
list-style: none outside none;
margin: 0;
position: relative;
}
#submenu li a {
background: url("../images/smenup.png") no-repeat scroll 0 9px transparent;
border-right: 1px solid #E0E0E0;
color: #383838;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 14px;
margin: 0 0 0 19px;
padding: 9px 18px 11px 24px;
text-decoration: none;
text-transform: uppercase;
}
#submenu li a:hover {
background-image: url("../images/smenua.png");
}
/* header section */
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 0 0 39px;
}
#search {
float: right;
margin: 21px 41px 0 0;
text-align: right;
}
#search form {
float:right;
}
#search form input[type="text"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E0E0E0;
float: left;
font-family: Arial,Helvetica,sans-serif;
height: 15px;
padding: 5px;
width: 129px;
}
#search form input[type="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: 0;
width: 64px;
}
#social {
float:right;
list-style:none outside none;
margin:0 30px 0 0;
padding:0;
}
#social li {
float:left;
padding:0 0 0 5px;
}
#social li a:hover img {
margin-top:1px;
}
/*navigation menu*/
nav {
background-color:#00942f;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
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 0 0 #353535;
}
#submenu {
background: -moz-linear-gradient(#ffffff, #f6f6f6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #f6f6f6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #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'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6')"; /* IE8+ */
background: linear-gradient(#ffffff, #f6f6f6); /* the standard */
border: 1px solid #E0E0E0;
height: 34px;
margin: 20px 40px;
}
#submenu ul {
margin: 0;
padding: 0;
}
#submenu li {
float: left;
line-height: 1em;
list-style: none outside none;
margin: 0;
position: relative;
}
#submenu li a {
background: url("../images/smenup.png") no-repeat scroll 0 9px transparent;
border-right: 1px solid #E0E0E0;
color: #383838;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 14px;
margin: 0 0 0 19px;
padding: 9px 18px 11px 24px;
text-decoration: none;
text-transform: uppercase;
}
#submenu li a:hover {
background-image: url("../images/smenua.png");
}
滑块和主要内容部分 (Slider and Main content section)
After our header area – we have next two areas – slider (nivoSlider) and main content area.
在标题区域之后–接下来是两个区域–滑块(nivoSlider)和主要内容区域。
<div id="slider"><!-- Defining the main content section -->
<!-- Promo slider -->
<section id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
<img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
<img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">Welcome to the our E-Shop</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">This is promo area</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-2" class="nivo-html-caption">
<h5 class="p2">Where you can add any feature products</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-3" class="nivo-html-caption">
<h5 class="p2">Or something else</h5>
<p>Put any description here</p>
</div>
</section>
</div>
<div id="main"><!-- Defining submain content section -->
<section id="content"><!-- Defining the content section #2 -->
<div id="left">
<h3>Last products</h3>
<ul>
<li>
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 1</a>
<p>long description here 1</p>
<div class="price">
<span class="st">Our price:</span><strong>$550.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 2</a>
<p>long description here 2</p>
<div class="price">
<span class="st">Our price:</span><strong>$250.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 3</a>
<p>long description here 3</p>
<div class="price">
<span class="st">Our price:</span><strong>$350.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 4</a>
<p>long description here 1</p>
<div class="price">
<span class="st">Our price:</span><strong>$550.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 5</a>
<p>long description here 2</p>
<div class="price">
<span class="st">Our price:</span><strong>$250.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 6</a>
<p>long description here 3</p>
<div class="price">
<span class="st">Our price:</span><strong>$350.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
</ul>
</div>
<div id="right">
<h3>Top sells</h3>
<ul>
<li>
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 7</a>
<div class="price">
<span class="usual">$600.00 </span>
<span class="special">$500.00</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 8</a>
<div class="price">
<span class="usual">$500.00 </span>
<span class="special">$400.00</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 9</a>
<div class="price">
<span class="usual">$700.00 </span>
<span class="special">$600.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 10</a>
<div class="price">
<span class="usual">$805.00 </span>
<span class="special">$714.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 11</a>
<div class="price">
<span class="usual">$1205.00 </span>
<span class="special">$1000.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 12</a>
<div class="price">
<span class="usual">$200.00 </span>
<span class="special">$190.25</span>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
<div id="slider"><!-- Defining the main content section -->
<!-- Promo slider -->
<section id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
<img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
<img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">Welcome to the our E-Shop</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">This is promo area</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-2" class="nivo-html-caption">
<h5 class="p2">Where you can add any feature products</h5>
<p>Put any description here</p>
</div>
<div id="htmlcaption-3" class="nivo-html-caption">
<h5 class="p2">Or something else</h5>
<p>Put any description here</p>
</div>
</section>
</div>
<div id="main"><!-- Defining submain content section -->
<section id="content"><!-- Defining the content section #2 -->
<div id="left">
<h3>Last products</h3>
<ul>
<li>
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 1</a>
<p>long description here 1</p>
<div class="price">
<span class="st">Our price:</span><strong>$550.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 2</a>
<p>long description here 2</p>
<div class="price">
<span class="st">Our price:</span><strong>$250.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 3</a>
<p>long description here 3</p>
<div class="price">
<span class="st">Our price:</span><strong>$350.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 4</a>
<p>long description here 1</p>
<div class="price">
<span class="st">Our price:</span><strong>$550.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 5</a>
<p>long description here 2</p>
<div class="price">
<span class="st">Our price:</span><strong>$250.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 6</a>
<p>long description here 3</p>
<div class="price">
<span class="st">Our price:</span><strong>$350.00</strong>
</div>
<div class="actions">
<a href="#">Details</a>
<a href="#">Add to cart</a>
</div>
</div>
</li>
</ul>
</div>
<div id="right">
<h3>Top sells</h3>
<ul>
<li>
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 7</a>
<div class="price">
<span class="usual">$600.00 </span>
<span class="special">$500.00</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 8</a>
<div class="price">
<span class="usual">$500.00 </span>
<span class="special">$400.00</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 9</a>
<div class="price">
<span class="usual">$700.00 </span>
<span class="special">$600.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 10</a>
<div class="price">
<span class="usual">$805.00 </span>
<span class="special">$714.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 11</a>
<div class="price">
<span class="usual">$1205.00 </span>
<span class="special">$1000.25</span>
</div>
</div>
</li>
<li>
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
<div class="info">
<a class="title" href="#">Product 12</a>
<div class="price">
<span class="usual">$200.00 </span>
<span class="special">$190.25</span>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
主要内容CSS部分 (CSS for Main content section)
/* main section */
#main {
background-color: #fff;
padding:20px 0;
}
#content {
overflow: hidden;
}
#content #left, #content #right {
border: 1px solid #E9E9E9;
float: left;
margin: 0 2%;
width: 63%;
}
#content #right {
margin-left: 0;
width: 30%;
}
#content h3 {
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #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'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
border-bottom: 1px solid #E0E0E0;
color: #3C3C3C;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding: 11px 0 12px 20px;
text-transform: uppercase;
}
#content ul {
list-style:none outside none;
margin:0;
padding:0;
}
#content #left ul li {
float:left;
padding-bottom: 21px;
width: 33%;
}
#content #left ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li {
border-top: 1px solid #E7E7E7;
overflow: hidden;
}
#content #right ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li:first-child {
border-width: none;
}
#content #left ul li .img {
text-align: center;
}
#content #right ul li .img {
background-color: #FFFFFF;
float: left;
height: 94px;
text-align: center;
width: 113px;
}
#content #left ul li .img img {
height:128px;
width:128px;
}
#content #right ul li .img img {
height:70px;
margin-top: 11px;
width:70px;
}
#content #left ul li .info {
padding: 17px 20px 0 19px;
}
#content #right ul li .info {
float: left;
overflow: hidden;
padding: 17px 0 0 21px;
width: 164px;
}
#content ul li .info .title {
color: #4B4B4B;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}
#content ul li .info .title:hover {
color: #049733;
}
#content #left ul li .info p {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
#content #left ul li .info .price {
background: none repeat scroll 0 0 #F7F7F7;
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 17px 0 10px;
padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding-top: 25px;
}
#content #left ul li .info .price .st {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
color: #7F7F7F;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-right: 6px;
text-decoration: line-through;
}
#content #right ul li .info .price .special {
color: #FD7A01;
font-weight: bold;
text-decoration: none;
}
#content #left ul li .info .actions {
overflow:hidden;
}
#content #left ul li .info .actions a {
border: 1px solid #E0E0E0;
color: #fd7a01;
display: block;
float:right;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 5px;
text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
color: #009832;
float:left;
}
/* main section */
#main {
background-color: #fff;
padding:20px 0;
}
#content {
overflow: hidden;
}
#content #left, #content #right {
border: 1px solid #E9E9E9;
float: left;
margin: 0 2%;
width: 63%;
}
#content #right {
margin-left: 0;
width: 30%;
}
#content h3 {
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #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'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
border-bottom: 1px solid #E0E0E0;
color: #3C3C3C;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding: 11px 0 12px 20px;
text-transform: uppercase;
}
#content ul {
list-style:none outside none;
margin:0;
padding:0;
}
#content #left ul li {
float:left;
padding-bottom: 21px;
width: 33%;
}
#content #left ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li {
border-top: 1px solid #E7E7E7;
overflow: hidden;
}
#content #right ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li:first-child {
border-width: none;
}
#content #left ul li .img {
text-align: center;
}
#content #right ul li .img {
background-color: #FFFFFF;
float: left;
height: 94px;
text-align: center;
width: 113px;
}
#content #left ul li .img img {
height:128px;
width:128px;
}
#content #right ul li .img img {
height:70px;
margin-top: 11px;
width:70px;
}
#content #left ul li .info {
padding: 17px 20px 0 19px;
}
#content #right ul li .info {
float: left;
overflow: hidden;
padding: 17px 0 0 21px;
width: 164px;
}
#content ul li .info .title {
color: #4B4B4B;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}
#content ul li .info .title:hover {
color: #049733;
}
#content #left ul li .info p {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
#content #left ul li .info .price {
background: none repeat scroll 0 0 #F7F7F7;
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 17px 0 10px;
padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding-top: 25px;
}
#content #left ul li .info .price .st {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
color: #7F7F7F;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-right: 6px;
text-decoration: line-through;
}
#content #right ul li .info .price .special {
color: #FD7A01;
font-weight: bold;
text-decoration: none;
}
#content #left ul li .info .actions {
overflow:hidden;
}
#content #left ul li .info .actions a {
border: 1px solid #E0E0E0;
color: #fd7a01;
display: block;
float:right;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 5px;
text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
color: #009832;
float:left;
}
Customized styles of our slider (nivoSlider) will in external file
滑块(nivoSlider)的自定义样式将在外部文件中
css / nivo-slider.css (css/nivo-slider.css)
This file always available in our package.
此文件始终在我们的软件包中。
页脚部分 (Footer section)
Finally, here are our footer area
最后，这是我们的页脚区域
<footer><!-- Defining the footer section of the page -->
<div id="privacy">
E-Store template © 2011 <a class="link" href="https://www.script-tutorials.com/">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Template by Script Tutorials</a>
</div>
</footer>
<footer><!-- Defining the footer section of the page -->
<div id="privacy">
E-Store template © 2011 <a class="link" href="https://www.script-tutorials.com/">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Template by Script Tutorials</a>
</div>
</footer>
页脚部分CSS (CSS for footer section)
/* footer section */
footer {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 1px solid #E0E0E0;
margin: 0 0 5px;
padding: 15px 0 15px 20px;
}
footer #privacy {
color: #9B9B9B;
font-size: 12px;
line-height: 20px;
overflow: hidden;
width: 100%;
}
footer a{
color: #9B9B9B;
text-decoration: none;
}
/* footer section */
footer {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 1px solid #E0E0E0;
margin: 0 0 5px;
padding: 15px 0 15px 20px;
}
footer #privacy {
color: #9B9B9B;
font-size: 12px;
line-height: 20px;
overflow: hidden;
width: 100%;
}
footer a{
color: #9B9B9B;
text-decoration: none;
}
JS为我们的模板 (JS for our template)
Here are all necessary JS scripts:
这是所有必需的JS脚本：
js / html5.js，js / jquery.js和js / jquery.nivo.slider.pack.js (js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js)
All these libraries already available in package
所有这些库已在软件包中提供
js / main.js (js/main.js)
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
boxCols:8,
boxRows:8,
animSpeed:500,
pauseTime:4000,
directionNav:false,
directionNavHide:false,
controlNav:false,
captionOpacity:1
});
});
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
boxCols:8,
boxRows:8,
animSpeed:500,
pauseTime:4000,
directionNav:false,
directionNavHide:false,
controlNav:false,
captionOpacity:1
});
});
nivoSlider itself have very easy initialization – so I hope that all easy here too.
nivoSlider本身具有非常容易的初始化-所以我希望这里也很容易。
现场演示
结论 (Conclusion)
Congrats, our new template ‘E-Store’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks :) Good luck!
恭喜，我们新的模板“电子商店”已完成！ 您可以按原样使用它，但请保留与我们的反向链接。 不要忘了说谢谢:)祝你好运！
翻译自: https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
