HTML5页面模板的优势HTML5是一种标记语言,用于构建和设计网站和应用程序的界面。它与CSS和JavaScript一起使用,以提供丰富和交互式的用户界面。使用HTML5页面模板对于开发人员和设计师来说有很多优势。
这里分享100套html5网页静态模板,也有个人主页网站html模板,它是Bootstrap扁平化网站源码。分有不同行业。已打包了,自取,要是对你有帮助留言点赞!
html5网页静态模板合集
模板源码 密码:A688
下面的部分预览图及源码:
![](https://img-blog.csdnimg.cn/direct/61c365c91e3c4cac95b6619c54115749.png)
index源代码:
Magnum
jQuery(document).ready(function(){
//Menu
jQuery("ul.sf-menu").supersubs({
minWidth : 12, // requires em unit.
maxWidth : 27, // requires em unit.
extraWidth : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
// due to slight rounding differences and font-family
}).superfish(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
jQuery(document).ready(function() {
jQuery(".box_skitter_large").skitter({
animation: "random",
interval: 3000,
numbers: false,
numbers_align: "right",
hideTools: true,
controls: false,
focus: false,
focus_position: true,
width_label:'340px',
enable_navigation_keys: true,
progressbar: false
});
});
});
首页
About
Elements
Product Details
Blog Details
Products
Services
Portfolio
Portfolio One Column
Portfolio Two Column
Portfolio Three Column
Portfolio Four Column
Blog
Contact
We are Magnum
Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.
We make a great themes
Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.
Lorem ipsum dolor sit.
Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.
Hello! WE are Magnum and we make a great Website Themes.Let’s Take a Tour and You’ll Love This tHeme.
Flexible Templates
Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl.
Clean and Simple
Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl.
Great Support
Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl.
From The Blog
10/01/12 - No Comment
Proin tempus imperdiet.
Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...
10/01/12 - No Comment
Proin tempus imperdiet.
Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...
10/01/12 - No Comment
Proin tempus imperdiet.
Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...
10/01/12 - No Comment
Proin tempus imperdiet.
Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...
Buy Now !
Started Using the Magnum Theme for Your Next Project ? Available.
Latest Articles
Hello World!!
Lorem ipsum dolor sit amet...
Hello World!!
Lorem ipsum dolor sit amet...
Blogroll
Vivamus hendrerit venenatis quam
Aenean congue nisl in nibh
Proin tempus tempus orci eu imperdiet
Mauris interdum
Donec id turpis at risus
Gallery
About Magnum
Nulla interdum, enim eu dictum pellentesque, ipsum elit varius purus, et imperdiet odio magna lobortis purus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed mauris at eros mollis ultricies vitae porta dui.
Copyright ©2012 Magnum. All Rights Reserved.
style源代码:
/*
Magnum - CSS File
*/
/* Generated by Font Squirrel (http://www.fontsquirrel.com)*/
@font-face {
font-family: 'Ubuntu';
src: url('../fonts/Ubuntu-R-webfont.eot');
src: url('../fonts/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Ubuntu-R-webfont.woff') format('woff'),
url('../fonts/Ubuntu-R-webfont.ttf') format('truetype'),
url('../fonts/Ubuntu-R-webfont.svg#Ubuntu-R-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBold';
src: url('../fonts/Ubuntu-B-webfont.eot');
src: url('../fonts/Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Ubuntu-B-webfont.woff') format('woff'),
url('../fonts/Ubuntu-B-webfont.ttf') format('truetype'),
url('../fonts/Ubuntu-B-webfont.svg#Ubuntu-B-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
/*** GLOBAL ***/
body {
font-family:Arial;
font-size:12px;
margin:0 auto;
padding:0;
color:#555555;
line-height:20px;
background:#f7f7f7 url(../images/bgbody.gif) repeat;
background-attachment:fixed;
}
* {
margin:0;
padding:0;
}
*:focus {
outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
if you want to keep it! */
}
form{margin:0; padding:0;}
hr {
border-width:0;
height:1px;
line-height:0;
margin:30px 0px;
page-break-after:always;
text-align:center;
width:100%;
clear:both;
color:#d9d9d9;
background-color:#d9d9d9;
background-repeat:repeat-x
}
/* #Clearing
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/*** END OF GLOBAL ***/
/*** DEFAULT ELEMENT STYLES ***/
/* heading */
h1, h2, h3{margin-bottom:20px;}
h4, h5, h6{margin-bottom:10px;}
h1 {font-size:22px; line-height:24px;}
h2 {font-size:18px; line-height:20px;}
h3 {font-size:16px; line-height:18px;}
h4 {font-size:15px; line-height:18px;}
h5{font-size:14px; line-height:16px;}
h6 {font-size:13px; line-height:15px;}
h1, h2, h3, h4, h5, h6{ font-weight:normal; font-family:'Ubuntu', Arial; color:#555 }
.valignmiddle{line-height:45px; margin-bottom:18px}
.uppercase{text-transform:uppercase;}
.title_pattern{ background:url(../images/pattern_title.gif) repeat-x left center; font-size:16px; text-align:center}
.title_pattern span{ background:#fff; padding:0 20px}
.pagetitle{font-size:20px; color:#f6f6f6; margin:0; text-transform:uppercase}
/* links */
a, a:visited {text-decoration:none; font-weight:normal; color:#dc6a4d }
a:hover{text-decoration:underline;}
a img{border:none}
/* float align */
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 15px;
margin-top: 3px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 15px;
margin-top: 5px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.alignnone,
img.alignnone {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:3px;
}
img.alignleft,
img.alignright,
img.aligncenter,
img.alignnone {
margin-bottom: 12px;
}
/* lists, blockquotes and paragraphs */
p, ul, ol, blockquote {
margin-bottom:20px;
}
ul, ol {
margin:10px 0 20px 20px;
list-style-position:inside
}
li ol,
li ul
{
list-style:square;
margin-bottom:0;
margin-top:0;
}
li ol {list-style:decimal;}
blockquote {
/*font-style:italic;*/
margin:0px 0 20px 0px;
padding:0px 10px 0px 50px;
background-image:url(../images/quote.png);
background-repeat:no-repeat;
background-position:0px 0px;
clear:both;
font-size:16px;
line-height:25px;
font-family:'Ubuntu', Georgia, Arial;
font-style:italic
}
blockquote.left, blockquote.right {
float:right;
letter-spacing:0px;
margin-bottom:20px;
margin-left:20px;
margin-top:0px;
padding:0px 20px 10px 60px;
width:43%;
background-position:0px 0px;
}
blockquote.left{
float:left;
margin-left:0px;
margin-right:20px;}
blockquote p{margin-bottom:0px; font-size:16px; line-height:20px}
/* code */
code {
font-family:Arial;
letter-spacing:1px;
margin:25px 0 25px 0px;
display:block;
font-size:0.9em;
border-left:4px solid #cfcfcf;
padding:15px 10px;
}
/*** END OF DEFAULT ELEMENT STYLES ***/
/*** CONTAINER ***/
#outer-container{}
#container{
width:1020px;
margin:20px auto;
background:#fff; /* must use for IE */
-webkit-box-shadow: 0px 0px 6px #757575;
-moz-box-shadow: 0px 0px 6px #757575;
box-shadow: 0px 0px 6px #757575;
-moz-border-radius: 2px; /* Firefox */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* CSS3 */
}
/*** TOP ***/
#top{height:109px;}
#logo{float:left}
/*** TOP MENU ***/
#nav{position:relative; z-index:9000; float:right; margin:50px 28px 0 0}
#topnav{
margin:0;
padding:0;
list-style-type:none;
overflow:visible;
position:relative;
float:left;
font-size:14px;
font-family:'Ubuntu', Arial;
}
.sf-menu a {
text-decoration:none!important;
display: block;
position: relative;
padding: 0 12px 0 12px !important;
text-decoration:none;
font-weight:normal;
text-transform:uppercase;
color:#4d4d4d;
}
.sf-menu a:visited{color:#4d4d4d;}
.sf-menu a:hover, .sf-menu li a.current{color:#dc6a4d;}
.sf-menu li.sfHover a:hover{color:#dc6a4d;}
/* Drop down menu */
.sf-menu ul a:hover {}
.sf-menu li li {
text-align:left;
line-height:20px;
margin:0;
}
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
font-size:13px;
}
.sf-menu {
line-height:100%;
position:absolute;
right:0;
bottom:0;
float:left;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 27em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
margin:0;
}
.sf-menu li li{margin:0px 0px;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: -2px;
top: 2.6em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: -1px;
margin-left: 0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: -1px;
}
.sf-menu ul li a{
padding:8px 0px 8px 20px!important;
text-transform:capitalize;
}
.sf-menu ul li a:hover{}
.sf-menu li ul {
padding:0px;
}
.sf-menu a.sf-with-ul {
padding-right: 0px;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: 10px;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
}
.sf-menu li li, .sf-menu li li:hover, .sf-menu li li.sfHover{background:#fff; text-transform:capitalize}
.sf-menu li li:hover{background:#f3f3f3}
li.sfHover ul li:first-child a{background-image:url(../images/arrow_menu.gif); background-repeat:no-repeat; background-position:30px 0px; margin-top:-8px; padding-top:16px !important}
.sf-menu ul{border:solid 1px #e1e1e1;}
.sf-with-ul{}
.sf-menu li li {border-bottom:solid 1px #e1e1e1;}
.sf-menu li li:last-child{ border-bottom:0}
/*** HEADER ***/
#header{height:450px;}
#header.innerpage{height:auto; background:url(../images/pattern_header_inner.gif) repeat; clear:both; padding:30px 0; position:relative}
#header.innerpage .shadow{background:url(../images/glow-header-inner.png) repeat-x; width:100%; height:5px; position:absolute; top:0;}
#header.innerpage .pagetitle{float:left;}
#header.innerpage .pagedesc{font-size:14px; color:#dedede; font-family:"Ubuntu", Arial; float:right; margin-right:60px; padding:2px 0 0 0}
#slider-container{position:relative; clear:both}
#shadow-img-slider{height:5px; width:100%; position:absolute; top:0; left:0; background:url(../images/shadow-img-slider.png) repeat-x; z-index:30;}
.box_skitter_large {width:1020px; height:450px; background:#000}
.label_skitter{bottom:35px !important; left:40px !important; padding:20px; background:url(../images/opacity-slider-text.png) repeat;}
.label_skitter h3{margin-bottom:10px;}
/*** AFTER HEADER ***/
#after-header{padding:40px 0}
#after-header h1{font-size:20px; line-height:26px; text-transform:uppercase; text-align:center; color:#999; margin:0;}
/*** BEFORE CONTENT ***/
#before-content{position:relative; margin-bottom:20px}
#before-content .shadow{background:url(../images/glow.png) repeat-x; width:100%; height:12px; position:absolute; top:0;}
/*** CONTENT ***/
#content{}
#content.withsidebar{background:url(../images/bg-content-inner.gif) repeat-y;}
#main{padding:40px;}
#maincontent{float:left; width:610px; padding-right:25px;}
/*** CONTENT EMEMENT ***/
.container940{width:940px; margin:0 auto;}
.colortext, .colortext a, .colortext a:visited{color:#dc6a4d !important;}
.patternbox{background:url(../images/pattern_box.gif) repeat; border:solid 1px #dcdcdc; border-width:1px 0; padding:20px 0}
/* Separator */
.separator{clear:both; display:block; height:30px; padding:10px 0}
.separator.small{clear:both; display:block; height:10px; padding:0 0}
.separator.line{clear:both; display:block; height:30px; padding:10px 0; margin-bottom:20px; background:url(../images/hr.gif) repeat-x left center}
/* Custom List */
.customlist{list-style-type:none; margin:0; padding:0;}
.customlist li{width:280px; float:left; padding:10px 19px 10px 0; margin:0 30px 0 0; border-right:solid 1px #dcd}
.customlist li.last{border:0; margin:0; padding:10px 0}
.customlist2{list-style-type:none; margin:0; padding:0}
.customlist2 li{width:220px; float:left; margin-right:20px;}
.customlist2 li.last{margin:0;}
#recentpost{list-style-type:none; margin:0; padding:0}
#recentpost li{width:220px; float:left; margin-right:20px;}
#recentpost li.last{margin:0;}
#recentpost .entry-date{border:solid 1px #ececec; border-width:1px 0; padding:4px 0; color:#909090; margin-bottom:15px}
#recentpost .entry-date a, #recentpost .entry-date a:visited{color:#909090;}
.outside{list-style-type:none; margin:0; padding:0;}
.outside li{background:url(../images/list1.gif) no-repeat 0px 10px; padding:3px 0 3px 20px}
/* Frame Image */
.frame{padding:4px; border:solid 1px #ececec; display:block}
/* Shadow Image */
.shadowimg70{background:url(../images/shadowimg70.gif) no-repeat; display:block; height:12px;}
.shadowimg220{background:url(../images/shadowimg220.gif) no-repeat; display:block; height:20px;}
.shadowimg300{background:url(../images/shadowimg300.gif) no-repeat; display:block; height:24px;}
.shadowimg610{background:url(../images/shadowimg610.gif) no-repeat; display:block; height:22px;}
.shadowimg540{background:url(../images/shadowimg540.gif) no-repeat; display:block; height:29px;}
.shadowimg460{background:url(../images/shadowimg460.gif) no-repeat; display:block; height:27px;}
/* Button */
input[type="text"],
textarea{
border:solid 1px #ececec;
font-size:11px;
padding:8px 5px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
select {
font-size:11px;
padding:4px 5px;
}
.button,
.button:visited,
input[type="submit"],
input[type="reset"],
button,
.meta-nav{
color:#555555;
outline:0px;
font-size:12px;
font-family:"Ubuntu", Arial;
text-transform:capitalize;
display:block;
display:inline-block;
border:solid 1px #eaeaea;
border-bottom:solid 1px #bfbfbf;
border-right:solid 1px #bfbfbf;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
height:30px;
line-height:30px;
padding:0 15px;
background:url(../images/bg-button.png) repeat-x left top;
}
input[type="submit"],
input[type="reset"],
button{
height:32px;
}
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover{text-decoration:none; color:#dc6a4d; cursor:pointer}
.button.large{
font-size:18px;
text-transform:uppercase;
height:40px;
line-height:40px;
text-decoration:none;
background:url(../images/bg-buttonlarge.png) repeat-x left top;
}
.button.large:hover{background-position:0 0;}
/* Tabs */
.tabcontainer{margin:0; border:solid 1px #ebebeb; border-width:0 0 0 1px;}
ul.tabs {
margin: 0;
padding: 0 0 1px 0;
list-style: none;
height: 41px;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0 0;
padding: 0 15px;
line-height:41px;
height:41px;
overflow: hidden;
position: relative;
font-size:14px;
font-family:"Ubuntu", Arial;
border:solid 1px #ebebeb;
border-width:1px 1px 0 0;
background:url(../images/navtab.gif) repeat-x;
}
ul.tabs li a {
text-decoration: none;
display: block;
padding: 0 0px;
outline: none;
color:#555;
}
.tab-content {padding: 20px 0; }
ul.tabs li:hover{}
ul.tabs li.active{background:transparent}
html ul.tabs li.active a{ color:#dc6a4d; }
#tab-body{padding:0 20px; border:solid 1px #ebebeb; border-width:1px 1px 1px 0;}
/* jQuery Toggle */
#toggle{border: 1px solid #ebebeb; border-width:1px 1px 0 1px;}
h2.trigger {
padding: 16px 20px 16px 20px;
margin: 0 0 0 0;
font-size:14px;
font-weight: normal;
background:url(../images/bg-toggle.gif) repeat-x;
border-bottom: 1px solid #ebebeb;
}
h2.trigger span {
text-decoration: none;
display: block;
color:#555;
height:9px;
background: url(../images/left.gif) no-repeat;
padding-left:20px;
cursor:pointer;
line-height:12px;
}
h2.active span{ background:url(../images/down.gif) no-repeat 0 1px; color:#dc6a4d}
h2.trigger a:hover {
color: #454545;
}
h2.active { background:transparent;}
.toggle_container {
margin: 0 0 0 0;
padding: 20px 25px;
overflow: hidden;
clear: both;
border: 1px solid #ebebeb;
border-width:0 0px 1px 0px;
}
.toggle_container .block {
padding: 0px;
}
.toggle_container .block p {
padding: 5px 0;
margin: 5px 0;
}
/* Dropcaps */
.dropcap1{
text-shadow:1px 1px 0 #666;
display:block;
float:left;
font-size:35px;
line-height:35px;
margin:2px 8px 0 0;
}
/* Pullquotes */
.pullquote-right,.pullquote-left{
padding:0px 10px 0px 50px;
background-image:url(../images/quote.png);
background-repeat:no-repeat;
background-position:0px 0px;
float:right;
font-family:'Ubuntu', Georgia, Arial;
font-style:italic;
font-size:16px;
letter-spacing:0px;
line-height:22px;
margin:0px 2px 20px 20px;
width:50%;
}
.pullquote-left{float:left;margin-left:2px;margin-right:20px;}
/* Highlight */
.highlight1{padding:2px 5px; background-color:#f7f7f7; border:solid 1px #ebebeb}
.highlight2{padding:2px 5px; background-color:#ebebeb; border:solid 1px #f7f7f7}
/* Tables */
table {border-collapse:separate;border-spacing:0;width:100%; margin-bottom:18px;}
table,td,th { text-align:center;}
th{padding:10px;text-transform:uppercase; background:#f7f7f7; border-bottom: 1px solid #ebebeb;}
td{padding:10px;}
tfoot td{border:0px;}
th,tr:hover{}
table {
border: 1px solid #ebebeb;
border-bottom:0;
text-align: left;
margin: 0 -1px 24px 0;
width: 100%;
}
tr th,
thead th {
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
tr td {
border-bottom: 1px solid #ebebeb;
padding: 6px 24px;
}
tr.odd td {
background: #F2F7FC;
}
/* Column */
.one_half, .one_third, .two_third,
.three_fourth, .one_fourth, .one_fifth,
.two_fifth, .three_fifth, .four_fifth,
.one_sixth, .five_sixth {margin-right: 4%; margin-left:0; position:relative; float:left;}
.one_half { width:48%; }
.one_third { width:30.6666%;}
.one_fourth { width:22%; }
.one_fifth { width: 16.8%;}
.one_sixth { width: 13.3333%;}
.two_third { width: 65.3332%;}
.two_fourth { width: 48%;}
.two_fifth { width: 37.6%;}
.two_sixth { width: 30.6666%;}
.three_fourth { width:74%;}
.three_fifth { width: 58.4%;}
.three_sixth { width: 47.9998%;}
.four_fifth { width: 79.2%;}
.four_sixth { width: 65.3332%;}
.five_sixth { width: 82.6665%;}
.firstcols { margin-left:0px !important; }
.last, .lastcols { margin-right:0px !important; clear:right; }
/*** AFTER CONTENT ***/
#after-content{position:relative; margin:20px 0 60px 0; clear:both}
#after-content h2{font-size:20px; margin:10px 0 0 20px; float:left}
#after-content.patternbox{padding:20px 0;}
#after-content .button{float:right; margin-right:60px}
/*** SIDEBAR ***/
#sidebar{float:left; width:270px; padding-left:35px}
#sidebar ul{list-style-type:none; padding:0; margin:0;}
#sidebar ul li.widget-container{margin:0 0 40px 0 !important; clear:both}
#sidebar .widget-title{ font-size:16px; text-transform:uppercase; margin-bottom:20px}
#sidebar ul li a, #sidebar ul li a:visited{color:#555;}
#sidebar ul li a:hover{color:#dc6a4d; text-decoration:none}
#sidebar li li{
list-style-type:none;
margin:0 0 8px 0;
padding:0 0 8px 15px;
background: url(../images/double_line.gif) repeat-x left bottom ,
url(../images/arrow.gif) 0px 7px no-repeat;
}
#sidebar li li:hover{
background: url(../images/double_line.gif) repeat-x left bottom ,
url(../images/arrow2.gif) 0px 7px no-repeat;
}
/* list second level */
#sidebar ul.sub-menu, #sidebar ul ul ul{margin:5px 0 0 0; }
#sidebar ul.sub-menu li, #sidebar ul ul ul li{margin-bottom:0px; background:url(../images/arrow.gif) 0px 7px no-repeat; padding-bottom:5px}
#sidebar ul.sub-menu li:hover, #sidebar ul ul ul li:hover{background:url(../images/arrow2.gif) 0px 7px no-repeat;}
#sidebar ul.sub-menu li:last-child, #sidebar ul ul ul li:last-child{padding-bottom:0px; margin-bottom:0;}
/* tags widget */
.tag{margin:0 10px 10px 0;}
.tag, .tag span{display:block; float:left; height:27px; line-height:25px}
.tag .left{background:url(../images/tag-left.gif) no-repeat; width:17px;}
.tag .middle{background:url(../images/tag-middle.gif) repeat-x; padding:0 10px 0 8px}
.tag .right{background:url(../images/tag-right.gif) no-repeat; width:12px;}
/* recent comment widget */
#recentcommentwidget{}
#recentcommentwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
#recentcommentwidget .colortext{display:block; padding-bottom:5px;}
#recentcommentwidget li a:hover{color:#555 !important;}
/* recent project widget */
#recentprojectwidget{}
#recentprojectwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
#recentprojectwidget .date{color:#909090;}
/* shopping cart widget */
#shoppingcartwidget{}
#shoppingcartwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
.totalprice{font-weight:bold;display:block; margin-bottom:15px}
.shopping_textwidget{background: url(../images/double_line.gif) repeat-x left bottom; padding-bottom:30px}
.shopping_textwidget .button{margin-right:8px;}
/* recent product widget */
#recentproductwidget{}
#recentproductwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
/* login widget */
#login{}
#login label{width:70px; float:left; padding:5px 0 0 0}
#login input[type="text"]{ width:180px}
#login .lost{float:right; width:50%; text-align:right}
/*** FOOTER ***/
#footer{border-top:solid 10px #303030; background:#1f1f1f url(../images/bg-footer.png) repeat-x; color:#aaa}
#footer-pattern{ background:url(../images/bg-footer-pattern.gif) repeat; }
#footcol1, #footcol2, #footcol3, #footcol4{width:220px; float:left; padding:40px 0 20px 0; margin-right:20px;}
#footcol4{margin:0;}
#footer ul{list-style-type:none; margin:0; padding:0;}
#footer ul li.widget-container{margin-bottom:40px;}
#footer ul li.widget-container:last-child{margin-bottom:0px;}
#footer .widget-title{color:#fafafa; text-transform:uppercase; margin-bottom:25px; font-size:14px}
#footer ul li a, #footer ul li a:visited{color:#aaa}
#footer ul li a:hover{text-decoration:none; color:#fff}
#footer ul li li{border-bottom:solid 1px #4a4a4a; padding:0 0 6px 0; margin:0 0 6px 0;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6{color:#fafafa}
#footer .frame{padding:4px; border:solid 1px #424242; background:url(../images/opacity-img.png) repeat}
#recentpostwidget h5{font-size:12px; font-family:Arial; margin-bottom:5px}
#footer #recentpostwidget li h5 a, #footer #recentpostwidget li h5 a:visited{color:#fafafa}
#recentpostwidget li{clear:both; margin:0 0 30px 0 !important; border:0px !important; padding:0 !important; background:transparent !important}
#flickr li{border:0px !important; float:left; margin-right:14px !important;}
#flickr li.nomargin{margin-right:0px !important;}
/*** AFTER FOOTER ***/
#after-footer{background:url(../images/bg-afterfooter.png) no-repeat; height:80px;}
#footertext{padding:30px 0 0 0;color:#aaaaaa}
#sn{float:right; padding:25px 0 0 0}
#sn ul{margin:0; padding:0; list-style-type:none;}
#sn ul li{float:left; margin-left:8px;}
其它模板预览图:
![](https://img-blog.csdnimg.cn/direct/664726d4c674486896c0fdeb84265bb8.png)
![](https://img-blog.csdnimg.cn/direct/2217c2e7544a4d47a2b9dcf3c7735b5d.png)
![](https://img-blog.csdnimg.cn/direct/ae30233a567d48f3971e3104bde98965.png)
![](https://img-blog.csdnimg.cn/direct/adb34d9fda6b4417805c599a5b85e877.png)
![](https://img-blog.csdnimg.cn/direct/206a873c622d4fc6b033a504f73a4c9f.png)
由于篇节限制,只展示部分,更多自己去测试!已打包了,自取,要是对你有帮助留言点赞!
|