New HTML5&CSS3 single page layout – Fashion Our today’s template is very light, clean and friendly. Maybe someone will think that this is something very light and easy, but possible that someone have been looking for such styles for a long time. Anyway I sure that you will like it. I would like to introduce a new great masterpiece – ‘Fashion’ template. This is the nice HTML5/CSS3 template with nice light (with a little of red) colors.
新HTML5＆CSS3单页布局–时尚我们今天的模板非常轻巧，干净且友好。 也许有人会认为这是一件轻而易举的事，但很可能有人一直在寻找这种风格。 无论如何，我确定您会喜欢的。 我想介绍一个新的伟大杰作-“时尚”模板。 这是一个漂亮HTML5 / CSS3模板，带有漂亮的浅色(略带红色)。
最后结果 (Final Result)
现场演示
下载结果
开始吧 (Get started)
As usual – lets create a new project folder and several folders inside (to keep anything well structured):
和往常一样–让我们创建一个新的项目文件夹，并在其中创建几个文件夹(以保持结构良好)：
- css – for all CSS stylesheets (nivo-slider.css, reset.css and style.css) css –适用于所有CSS样式表(nivo-slider.css，reset.css和style.css)
- images – for all used images 图片–用于所有使用过的图片
- js – for all JS files (html5.js, jquery.js and jquery.nivo.slider.pack.js) js –适用于所有JS文件(html5.js，jquery.js和jquery.nivo.slider.pack.js)
头部标记 (Head section markup)
Now I am going to give you the HTML markup of our header:
现在，我将为您提供标头HTML标记：
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>'Fashion' single page layout | Script tutorials demo</title>
<meta charset="utf-8">
<!-- 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 rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
<!-- Link scripts -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
boxCols:8,
boxRows:8,
animSpeed:500,
pauseTime:4000,
directionNav:false,
directionNavHide:false,
controlNav:true,
captionOpacity:0.9
});
});
</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>'Fashion' single page layout | Script tutorials demo</title>
<meta charset="utf-8">
<!-- 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 rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
<!-- Link scripts -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
boxCols:8,
boxRows:8,
animSpeed:500,
pauseTime:4000,
directionNav:false,
directionNavHide:false,
controlNav:true,
captionOpacity:0.9
});
});
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
前进–主要布局(正文) (Moving forward – Main layout (body))
Whole layout consists of 6 main sections: header (with the logo and search form), navigation menu, promo slider (nivo jquery plugin), main section (3 feature elements), second content section (two column layout for all your rest content – list of posts with thumbs at left side, archives and recent posts at right side) and footer (social icons and copyrights). It looks like:
整个布局包括6个主要部分：标题(带有徽标和搜索表单)，导航菜单，促销滑块(nivo jquery插件)，主要部分(3个要素元素)，第二个内容部分(所有其余内容的两列布局–列表的左侧为大拇指，右侧为存档和最近的帖子)和页脚(社交图标和版权)。 看起来像：
<body>
<div class="container">
<header><!-- Define the header section of the page -->
<div class="logo"><!-- Define the logo element -->
........
</div>
<section id="search"><!-- Search form -->
........
</section>
</header>
<nav><!-- Define the navigation menu -->
........
</nav>
<section id="slider-wrapper"><!-- Nivo promo slider -->
........
</section>
<div id="main"><!-- Define the main content section -->
<section id="promo"><!-- Define the promo section -->
........
</section>
<section id="content"><!-- Define the featured content section -->
........
</section>
</div>
<div id="submain"><!-- Define submain content section -->
<section id="subcontent"><!-- Define the content section #2 -->
<div id="left">
........
</div>
<div id="right">
<div class="block"><!-- Archives block -->
........
</div>
<div class="block"><!-- Recent posts block -->
........
</div>
</div>
</section>
</div>
<footer><!-- Define the footer section of the page -->
<ul id="social"><!-- Social network links -->
........
</ul>
<div id="privacy">
Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>
</div>
</footer>
</div>
</body>
<body>
<div class="container">
<header><!-- Define the header section of the page -->
<div class="logo"><!-- Define the logo element -->
........
</div>
<section id="search"><!-- Search form -->
........
</section>
</header>
<nav><!-- Define the navigation menu -->
........
</nav>
<section id="slider-wrapper"><!-- Nivo promo slider -->
........
</section>
<div id="main"><!-- Define the main content section -->
<section id="promo"><!-- Define the promo section -->
........
</section>
<section id="content"><!-- Define the featured content section -->
........
</section>
</div>
<div id="submain"><!-- Define submain content section -->
<section id="subcontent"><!-- Define the content section #2 -->
<div id="left">
........
</div>
<div id="right">
<div class="block"><!-- Archives block -->
........
</div>
<div class="block"><!-- Recent posts block -->
........
</div>
</div>
</section>
</div>
<footer><!-- Define the footer section of the page -->
<ul id="social"><!-- Social network links -->
........
</ul>
<div id="privacy">
Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>
</div>
</footer>
</div>
</body>
基本CSS样式 (Base CSS styles)
/* base styles */
body {
background:#efefef;
color:#828282;
font:100%/1.125em Arial, Helvetica, sans-serif;
margin:0;
position:relative;
}
a {
color:#c24050;
outline:none;
text-decoration:underline;
}
a:hover,a:active {
outline:0;
text-decoration:none;
}
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:.8;
}
h1,h2,h3,h4 {
color:#262626;
font-family:cursive;
font-weight:400;
padding:0;
}
h1 {
font-size:3.2em;
line-height:1.2em;
margin:0 0 0.75em;
}
h2 {
font-size:3em;
line-height:1.2em;
margin:0 0 .7em;
}
h3 {
font-size:2.4em;
line-height:1.2em;
margin:0 0 1em;
}
h4 {
font-size:1em;
margin:0 0 1.5em;
}
p {
margin:0 0 1.5em;
padding:0;
}
input,select,textarea {
border:1px solid #dbdbdb;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:400;
outline:none;
vertical-align:middle;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul li {
padding:0;
vertical-align:top;
}
ul li time {
color:#C24050;
display:block;
margin:0 0 0.5em;
}
.block {
margin:0 0 3em;
}
.container {
background:#fff;
border-left:1px solid #e1e1e1;
border-right:1px solid #e1e1e1;
font-size:.75em;
margin:0 auto;
width:949px;
}
.more {
background:#efefef;
color:#262626;
display:inline-block;
line-height:28px;
padding:0 10px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
.more:hover {
background:#c24050;
color:#fff;
}
/* base styles */
body {
background:#efefef;
color:#828282;
font:100%/1.125em Arial, Helvetica, sans-serif;
margin:0;
position:relative;
}
a {
color:#c24050;
outline:none;
text-decoration:underline;
}
a:hover,a:active {
outline:0;
text-decoration:none;
}
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:.8;
}
h1,h2,h3,h4 {
color:#262626;
font-family:cursive;
font-weight:400;
padding:0;
}
h1 {
font-size:3.2em;
line-height:1.2em;
margin:0 0 0.75em;
}
h2 {
font-size:3em;
line-height:1.2em;
margin:0 0 .7em;
}
h3 {
font-size:2.4em;
line-height:1.2em;
margin:0 0 1em;
}
h4 {
font-size:1em;
margin:0 0 1.5em;
}
p {
margin:0 0 1.5em;
padding:0;
}
input,select,textarea {
border:1px solid #dbdbdb;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:400;
outline:none;
vertical-align:middle;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul li {
padding:0;
vertical-align:top;
}
ul li time {
color:#C24050;
display:block;
margin:0 0 0.5em;
}
.block {
margin:0 0 3em;
}
.container {
background:#fff;
border-left:1px solid #e1e1e1;
border-right:1px solid #e1e1e1;
font-size:.75em;
margin:0 auto;
width:949px;
}
.more {
background:#efefef;
color:#262626;
display:inline-block;
line-height:28px;
padding:0 10px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
.more:hover {
background:#c24050;
color:#fff;
}
标题部分(带有徽标和搜索)和导航菜单 (Header section (with logo and search) and navigation menu)
First two elements – header area and navigation menu. Html markup:
前两个元素–标头区域和导航菜单。 HTML标记：
<header><!-- Define the header section of the page -->
<div class="logo"><!-- Define the logo element -->
<a href="https://www.script-tutorials.com/">
<img src="images/logo.png" title="Fashion template" alt="Fashion 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="">
</form>
</section>
</header>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="https://www.script-tutorials.com/new-html5css3-single-page-layout-fashion/">To Tutorial</a></li>
</ul>
</nav>
<header><!-- Define the header section of the page -->
<div class="logo"><!-- Define the logo element -->
<a href="https://www.script-tutorials.com/">
<img src="images/logo.png" title="Fashion template" alt="Fashion 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="">
</form>
</section>
</header>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="https://www.script-tutorials.com/new-html5css3-single-page-layout-fashion/">To Tutorial</a></li>
</ul>
</nav>
CSS样式： (CSS styles:)
/* header section */
header {
height:113px;
position:relative;
z-index:99;
}
.logo {
left:44px;
position:absolute;
top:41px;
}
.logo img {
margin:0 auto 3px;
}
#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;
}
/*navigation menu*/
nav {
background:#fcfcfc;
border-bottom:1px solid #e7e7e7;
border-top:1px solid #e7e7e7;
display:block;
margin-bottom:34px;
overflow:hidden;
padding:13px 0 14px;
position:relative;
z-index:99;
}
nav ul {
float:left;
line-height:1;
max-width:710px;
padding:0 28px;
}
nav ul li {
float:left;
list-style-type:none;
margin-left:12px;
padding:0;
position:relative;
vertical-align:top;
}
nav ul li:first-child {
margin-left:0;
}
nav ul li a {
color:#343434;
display:block;
padding:8px 12px;
position:relative;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
nav ul li a:hover,nav ul li.active a {
background-color:#C24050;
color:#FFF;
}
/* header section */
header {
height:113px;
position:relative;
z-index:99;
}
.logo {
left:44px;
position:absolute;
top:41px;
}
.logo img {
margin:0 auto 3px;
}
#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;
}
/*navigation menu*/
nav {
background:#fcfcfc;
border-bottom:1px solid #e7e7e7;
border-top:1px solid #e7e7e7;
display:block;
margin-bottom:34px;
overflow:hidden;
padding:13px 0 14px;
position:relative;
z-index:99;
}
nav ul {
float:left;
line-height:1;
max-width:710px;
padding:0 28px;
}
nav ul li {
float:left;
list-style-type:none;
margin-left:12px;
padding:0;
position:relative;
vertical-align:top;
}
nav ul li:first-child {
margin-left:0;
}
nav ul li a {
color:#343434;
display:block;
padding:8px 12px;
position:relative;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
nav ul li a:hover,nav ul li.active a {
background-color:#C24050;
color:#FFF;
}
滑块部分 (Slider section)
I have selected nivoSlider to use in our template:
我已选择nivoSlider在我们的模板中使用：
<section id="slider-wrapper"><!-- Nivo promo slider -->
<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">Your promo text 1</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">Your promo text 1</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-2" class="nivo-html-caption">
<h5 class="p2">Your promo text 2</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-3" class="nivo-html-caption">
<h5 class="p2">Your promo text 3</h5>
<p>Promo text description here</p>
</div>
</section>
<section id="slider-wrapper"><!-- Nivo promo slider -->
<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">Your promo text 1</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-1" class="nivo-html-caption">
<h5 class="p2">Your promo text 1</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-2" class="nivo-html-caption">
<h5 class="p2">Your promo text 2</h5>
<p>Promo text description here</p>
</div>
<div id="htmlcaption-3" class="nivo-html-caption">
<h5 class="p2">Your promo text 3</h5>
<p>Promo text description here</p>
</div>
</section>
主要内容部分 (Main content section)
After our slider – the big main content area (generally – it consists of two parts).
在我们的滑块之后–大的主要内容区域(通常-它由两部分组成)。
<div id="main"><!-- Define the main content section -->
<section id="promo"><!-- Define the promo section -->
<img alt="" src="images/prm.png" /> <h2>Welcome to test our 'Fashion' templates. We are making best templates for you.</h2>
</section>
<section id="content"><!-- Define the featured content section -->
<ul>
<li>
<h1>Clean</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<h1>Light</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<h1>Friendly</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
</ul>
</section>
</div>
<div id="submain"><!-- Define submain content section -->
<section id="subcontent"><!-- Define the content section #2 -->
<div id="left">
<ul>
<li>
<h3>'Mono' HTML5 CSS3 Single Page Layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I want to introduce new great masterpiece – new template with codename: 'Mono'. This will nice HTML5/CSS3 template with nice light brown colors. Hope that you will like new styles and you will learn some new design methods.</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Read more</a>
</li>
<li>
<h3>Art theme - HTML5/CSS3 single page layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Read more</a>
</li>
<li>
<h3>Attractive HTML CSS Anime Theme Website Layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Read more</a>
</li>
</ul>
</div>
<div id="right">
<div class="block"><!-- Archives block -->
<h3>Archives</h3>
<ul class="archives">
<li><a title="February 2012" href="#">February 2012</a></li>
<li><a title="January 2012" href="#">January 2012</a></li>
<li><a title="December 2011" href="#">December 2011</a></li>
<li><a title="November 2011" href="#">November 2011</a></li>
<li><a title="October 2011" href="#">October 2011</a></li>
<li><a title="September 2011" href="#">September 2011</a></li>
</ul>
</div>
<div class="block"><!-- Recent posts block -->
<h3>Recent posts</h3>
<ul class="recent">
<li>
<time datetime="2012-02-08T20:20">08-02-2012</time>
<p>Recnt post #1 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:30">08-02-2012</time>
<p>Recnt post #2 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:40">08-02-2012</time>
<p>Recnt post #3 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:50">08-02-2012</time>
<p>Recnt post #4 - short description</p>
<a class="more" href="#">Read more</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<div id="main"><!-- Define the main content section -->
<section id="promo"><!-- Define the promo section -->
<img alt="" src="images/prm.png" /> <h2>Welcome to test our 'Fashion' templates. We are making best templates for you.</h2>
</section>
<section id="content"><!-- Define the featured content section -->
<ul>
<li>
<h1>Clean</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<h1>Light</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<h1>Friendly</h1>
<p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
<a class="more" href="#">Read more</a>
</li>
</ul>
</section>
</div>
<div id="submain"><!-- Define submain content section -->
<section id="subcontent"><!-- Define the content section #2 -->
<div id="left">
<ul>
<li>
<h3>'Mono' HTML5 CSS3 Single Page Layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I want to introduce new great masterpiece – new template with codename: 'Mono'. This will nice HTML5/CSS3 template with nice light brown colors. Hope that you will like new styles and you will learn some new design methods.</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Read more</a>
</li>
<li>
<h3>Art theme - HTML5/CSS3 single page layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Read more</a>
</li>
<li>
<h3>Attractive HTML CSS Anime Theme Website Layout</h3>
<a href="#"><img alt="" src="images/post.png" /></a>
<p>Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).</p>
<a class="more" href="https://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Read more</a>
</li>
</ul>
</div>
<div id="right">
<div class="block"><!-- Archives block -->
<h3>Archives</h3>
<ul class="archives">
<li><a title="February 2012" href="#">February 2012</a></li>
<li><a title="January 2012" href="#">January 2012</a></li>
<li><a title="December 2011" href="#">December 2011</a></li>
<li><a title="November 2011" href="#">November 2011</a></li>
<li><a title="October 2011" href="#">October 2011</a></li>
<li><a title="September 2011" href="#">September 2011</a></li>
</ul>
</div>
<div class="block"><!-- Recent posts block -->
<h3>Recent posts</h3>
<ul class="recent">
<li>
<time datetime="2012-02-08T20:20">08-02-2012</time>
<p>Recnt post #1 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:30">08-02-2012</time>
<p>Recnt post #2 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:40">08-02-2012</time>
<p>Recnt post #3 - short description</p>
<a class="more" href="#">Read more</a>
</li>
<li>
<time datetime="2012-02-08T20:50">08-02-2012</time>
<p>Recnt post #4 - short description</p>
<a class="more" href="#">Read more</a>
</li>
</ul>
</div>
</div>
</section>
</div>
CSS样式 (CSS styles)
/* main section */
#main {
padding:0 20px;
}
#promo {
border-bottom:1px solid #E7E7E7;
overflow:hidden;
padding:20px 0;
position:relative;
}
#promo img {
float:left;
margin-right:20px;
}
#content {
border-bottom:1px solid #E7E7E7;
overflow:hidden;
padding:20px 0;
}
#content ul li {
float:left;
margin:0 0 0 22px;
width:288px;
}
#content ul li:first-child {
margin:0;
}
/* submain section */
#submain {
padding:0 20px;
}
#subcontent {
overflow:hidden;
padding:20px 0;
}
#subcontent #left {
float:left;
width:69%;
}
#subcontent #right {
float:left;
margin-left:2%;
width:29%;
}
#subcontent ul li {
margin-bottom:15px;
overflow:hidden;
}
#subcontent ul li img {
float:left;
height:128px;
margin:5px 20px 5px 0;
width:128px;
}
#subcontent .archives li {
border-bottom:1px solid #E7E7E7;
margin:0;
padding:0;
}
#subcontent .archives li a {
display:block;
padding:7px 0;
text-decoration:none;
}
#subcontent .archives li a:hover {
background-color:#fafafa;
}
/* main section */
#main {
padding:0 20px;
}
#promo {
border-bottom:1px solid #E7E7E7;
overflow:hidden;
padding:20px 0;
position:relative;
}
#promo img {
float:left;
margin-right:20px;
}
#content {
border-bottom:1px solid #E7E7E7;
overflow:hidden;
padding:20px 0;
}
#content ul li {
float:left;
margin:0 0 0 22px;
width:288px;
}
#content ul li:first-child {
margin:0;
}
/* submain section */
#submain {
padding:0 20px;
}
#subcontent {
overflow:hidden;
padding:20px 0;
}
#subcontent #left {
float:left;
width:69%;
}
#subcontent #right {
float:left;
margin-left:2%;
width:29%;
}
#subcontent ul li {
margin-bottom:15px;
overflow:hidden;
}
#subcontent ul li img {
float:left;
height:128px;
margin:5px 20px 5px 0;
width:128px;
}
#subcontent .archives li {
border-bottom:1px solid #E7E7E7;
margin:0;
padding:0;
}
#subcontent .archives li a {
display:block;
padding:7px 0;
text-decoration:none;
}
#subcontent .archives li a:hover {
background-color:#fafafa;
}
页脚部分 (Footer section)
Finally – our footer area
最后–我们的页脚区域
<footer><!-- Define the footer section of the page -->
<ul id="social"><!-- Social network links -->
<li><a href="#" title="facebook"><img alt="" src="images/facebook.png" /></a></li>
<li><a href="#" title="twitter"><img alt="" src="images/twitter.png" /></a></li>
<li><a href="#" title="linkedin"><img alt="" src="images/linkedin.png" /></a></li>
<li><a href="#" title="rss"><img alt="" src="images/rss.png" /></a></li>
</ul>
<div id="privacy">
Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>
</div>
</footer>
<footer><!-- Define the footer section of the page -->
<ul id="social"><!-- Social network links -->
<li><a href="#" title="facebook"><img alt="" src="images/facebook.png" /></a></li>
<li><a href="#" title="twitter"><img alt="" src="images/twitter.png" /></a></li>
<li><a href="#" title="linkedin"><img alt="" src="images/linkedin.png" /></a></li>
<li><a href="#" title="rss"><img alt="" src="images/rss.png" /></a></li>
</ul>
<div id="privacy">
Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
<a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>
</div>
</footer>
CSS样式 (CSS styles)
/* footer section */
footer {
background-color:#fafafa;
border-top:1px solid #E7E7E7;
font-size:12px;
margin:0 auto;
overflow:hidden;
padding:40px;
position:relative;
z-index:3;
}
footer a{
color:#5E5956;
text-decoration:none;
}
#social {
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
#social li {
float:left;
padding:0 0 0 3px;
}
#social li a:hover img {
margin-top:1px;
}
footer #privacy {
float:right;
}
/* footer section */
footer {
background-color:#fafafa;
border-top:1px solid #E7E7E7;
font-size:12px;
margin:0 auto;
overflow:hidden;
padding:40px;
position:relative;
z-index:3;
}
footer a{
color:#5E5956;
text-decoration:none;
}
#social {
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
#social li {
float:left;
padding:0 0 0 3px;
}
#social li a:hover img {
margin-top:1px;
}
footer #privacy {
float:right;
}
JS为我们的模板 (JS for our template)
Here are all necessary javascripts:
这是所有必需的javascript：
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 are in our package
所有这些库都在我们的软件包中
现场演示
下载结果
结论 (Conclusion)
Congrats, our new template ‘Fashion’ 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/new-html5css3-single-page-layout-fashion/
3256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
