新HTML5＆CSS3单页布局–时尚
2024-04-30 08:36:46
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="data: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="data: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="data:images/promo1.jpg" alt="" title="#htmlcaption-1"><img style="display: none;" src="data:images/promo2.jpg" alt="" title="#htmlcaption-2"><img style="display: none;" src="data: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="data:images/promo1.jpg" alt="" title="#htmlcaption-1"><img style="display: none;" src="data:images/promo2.jpg" alt="" title="#htmlcaption-2"><img style="display: none;" src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/facebook.png" /></a></li><li><a href="#" title="twitter"><img alt="" src="data:images/twitter.png" /></a></li><li><a href="#" title="linkedin"><img alt="" src="data:images/linkedin.png" /></a></li><li><a href="#" title="rss"><img alt="" src="data: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="data:images/facebook.png" /></a></li><li><a href="#" title="twitter"><img alt="" src="data:images/twitter.png" /></a></li><li><a href="#" title="linkedin"><img alt="" src="data:images/linkedin.png" /></a></li><li><a href="#" title="rss"><img alt="" src="data: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/
新HTML5＆CSS3单页布局–时尚相关推荐
- html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕
#### 移动端单屏布局 > 本篇不属于汇总类的文章,而是把自认为最优的解决方案来进行一些说明. #### 为什么会有单屏布局 作为一个前端开发者,我是实在没有理解单屏布局的优势在哪里,尤其是要 ...
- 企业门户纯静态单页模板_我的门户–您社区的单页布局
企业门户纯静态单页模板 My portal – single page layout for your community. Today I have prepared new great templ ...
- prerender html5,HTML5 VUE单页应用 SEO 优化之 预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"><d ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
- 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- html5+css3响应式布局应该考虑到的屏幕的尺寸
超小屏幕:(手机,小于768px). 小屏幕:(平板,大于等于768px). 中等屏幕:(桌面显示器,大于等于992px). 大屏幕:(大桌面显示器,大于等于1200px).
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
最新文章
- 微软CEO纳德拉对话沈向洋：那些未来可期的计算机视觉研究与应用
- python3 asyncio loop 使用线程池原理
- 原生php开发 url,wordpress运用PHP原生代码获取三级分类及URL
- 趣学python3(42)--将字符串格式日期转换为excel的日期格式
- java mvc 批量插入_请教mysql spring mvc +mybatis中批量插入的问题?
- 几个故事告诉你，火热的区块链究竟是什么？
- python自学行_有编程基础Python自学行吗？
- 针对Mysql数据库服务器的优化
- 华为-2025十大趋势：智能世界，触手可及.pdf（附下载链接）
- Android 10上的F2FS文件系统制作
- Cadence Gerber文件制作过程
- 第一课：ASP.NET Core入门之简单快速搭建ASP.NET Core项目结构
- Apk脱壳圣战之---脱掉 爱加密 的壳
- python中整数类型取值范围有没有限制_python 数据库取值范围内
- HTTP请求数据格式及响应数据格式
- 计算机之网络基础 7层网络模型总结
- Linux组RAID5、RAID6、RAID10
- 计算机的定点运算器原理,计算机组成原理定点运算器的组成和结构.doc
- 给体制内新人的忠告：这10个“潜规则”咬紧牙别吱声，只做不说
- Unity+C#开发笔记（二）| 如何使用Find查找物体 | ╭(●｀∀´●)╯╰(●’◡’●)╮