devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

100套html5网页静态模板 /个人主页网站html模板/Bootstrap扁平化网站源码（公开分享）_网页设计模板html代码

作者：煮酒与君饮 | 2024-08-15 10:55:10

赞

踩

网页设计模板html代码

HTML5页面模板的优势HTML5是一种标记语言，用于构建和设计网站和应用程序的界面。它与CSS和JavaScript一起使用，以提供丰富和交互式的用户界面。使用HTML5页面模板对于开发人员和设计师来说有很多优势。 

这里分享100套html5网页静态模板，也有个人主页网站html模板，它是Bootstrap扁平化网站源码。分有不同行业。已打包了，自取，要是对你有帮助留言点赞！

html5网页静态模板合集

模板源码  密码：A688

下面的部分预览图及源码：

index源代码：

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <link rel="shortcut icon" href="images/favicon.ico" />
  6. <meta charset="UTF-8" />
  7. <meta name="robots" content="index, follow" />
  8. <meta name="keywords" content="" />
  9. <meta name="description" content="" />
  10. <title>Magnum</title>
  11. <!-- // -->
  12. <!-- //      Start Stylesheets       // -->
  13. <!-- // -->
  14. <link href="styles/style.css" rel="stylesheet" type="text/css" />
  15. <link type="text/css" href="styles/skitter.styles.css" media="all" rel="stylesheet" />
  16. <!--[if lt IE 9]>
  17. <link href="styles/ie8.css" rel="stylesheet" type="text/css" />
  18. <![endif]-->
  19. <!-- // -->
  20. <!-- //      Javascript Files        // -->
  21. <!-- // -->
  22. <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  23. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  24. <script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
  25. <script type="text/javascript" src="js/jquery.skitter.js"></script>
  26. <script type="text/javascript" src="js/hoverIntent.js"></script> 
  27. <script type="text/javascript" src="js/superfish.js"></script> 
  28. <script type="text/javascript" src="js/supersubs.js"></script>
  29. <script type="text/javascript">
  30. jQuery(document).ready(function(){
  31. 	//Menu
  32. 	jQuery("ul.sf-menu").supersubs({ 
  33. 	minWidth		: 12,		// requires em unit.
  34. 	maxWidth		: 27,		// requires em unit.
  35. 	extraWidth		: 3	// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
  36. 						   // due to slight rounding differences and font-family 
  37. 	}).superfish();  // call supersubs first, then superfish, so that subs are 
  38. 					 // not display:none when measuring. Call before initialising 
  39. 					 // containing tabs for same reason.
  40. 					 
  41. 	jQuery(document).ready(function() {
  42. 		jQuery(".box_skitter_large").skitter({
  43. 			animation: "random",
  44. 			interval: 3000,
  45. 			numbers: false, 
  46. 			numbers_align: "right", 
  47.  			hideTools: true,
  48. 			controls: false,
  49. 			focus: false,
  50. 			focus_position: true,
  51. 			width_label:'340px', 
  52. 			enable_navigation_keys: true,   
  53.  			progressbar: false
  54. 		});
  55. 	});				  
  56. 					 
  57. });
  58. </script>
  59. </head>
  60. <body>
  61.  
  62. <div id="outer-container">
  63. 	<div id="container">
  64.     	<div id="top">
  65.         	<div id="logo"><a href="index.html"><img src="images/logo.png" alt=""  /></a></div><!-- end #logo -->
  66.             <div id="nav">
  67.                 <ul id="topnav" class="sf-menu">
  68.                     <li><a href="index.html"  class="current">首页</a></li>
  69.                     <li><a href="about.html">About</a>
  70.                         <ul>
  71.                             <li><a href="elements.html">Elements</a></li>
  72.                             <li><a href="single-product.html">Product Details</a></li>
  73.                             <li><a href="single.html">Blog Details</a></li>
  74.                         </ul>
  75.                     </li>
  76.                     <li><a href="product.html">Products</a></li>
  77.                     <li><a href="services.html">Services</a></li>
  78.                     <li><a href="#">Portfolio</a>
  79.                         <ul>
  80.                             <li><a href="portfolio.html">Portfolio One Column</a></li>
  81.                             <li><a href="portfolio2.html">Portfolio Two Column</a></li>
  82.                             <li><a href="portfolio3.html">Portfolio Three Column</a></li>
  83.                             <li><a href="portfolio4.html">Portfolio Four Column</a></li>
  84.                         </ul>
  85.                     </li>
  86.                     <li><a href="blog.html">Blog</a></li>
  87.                     <li><a href="contact.html">Contact</a></li>
  88.                 </ul><!-- #topnav -->
  89.             </div><!-- #nav -->	
  90.         </div><!-- end #top -->
  91.         
  92.         <div id="header">
  93.         	<div id="slider-container">
  94.             	
  95.                 <div class="box_skitter box_skitter_large">
  96.                     <ul>
  97.                         <li>
  98.                             <a href=""><img src="images/content/slide1.jpg" alt="" /></a>
  99.                             <div class="label_text">
  100.                                 <h3 class="colortext uppercase"> We are Magnum</h3>
  101.                                 <span>Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.</span>
  102.                             </div>
  103.                         </li>
  104.                         <li>
  105.                             <a href=""><img src="images/content/slide2.jpg" alt="" /></a>
  106.                             <div class="label_text">
  107.                                 <h3 class="colortext uppercase">We make a great themes</h3>
  108.                                 <span>Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.</span>
  109.                             </div>
  110.                         </li>
  111.                         <li>
  112.                             <a href=""><img src="images/content/slide3.jpg" alt="" /></a>
  113.                             <div class="label_text">
  114.                                 <h3 class="colortext uppercase">Lorem ipsum dolor sit.</h3>
  115.                                 <span>Morbi porta neque ut neque iaculis ac venenatis sem consequat.Integer vitae diam quam.</span>
  116.                             </div>
  117.                         </li>
  118.                     </ul>
  119.                 </div>
  120.                 <div id="shadow-img-slider"></div>
  121.             </div><!-- end #slider-container -->
  122.         </div><!-- end #header -->
  123.         
  124.         <div id="after-header">
  125.         	<h1>Hello! WE are <span class="colortext">Magnum</span> and we make a great <span class="colortext">Website</span> Themes.<br/>Let’s Take a Tour and You’ll Love This tHeme.</h1>
  126.         </div><!-- end #after-header -->
  127.         
  128.         <div id="before-content" class="patternbox">
  129.         	<div class="shadow"></div>
  130.         	<div class="container940">
  131.             	<ul class="customlist">
  132.                 	<li>
  133.                         <img src="images/icons/icon1.png" alt="" class="alignleft" /><h3 class="valignmiddle">Flexible Templates </h3>
  134.                         <span>Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl. </span>
  135.                     </li>
  136.                 	<li>
  137.                         <img src="images/icons/icon2.png" alt="" class="alignleft" /><h3 class="valignmiddle">Clean and Simple</h3>
  138.                         <span>Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl. </span>
  139.                     </li>
  140.                 	<li class="last">
  141.                         <img src="images/icons/icon3.png" alt="" class="alignleft" /><h3 class="valignmiddle">Great Support</h3>
  142.                         <span>Proin cursus purus vitae quam facilisis ac fermentum enim volutpat. Vestibulum non justo augue, sed mattis nisi. Donec id lectus erat, ac imperdiet nisl. </span>
  143.                     </li>
  144.                 </ul>
  145.                 <div class="clear"></div><!-- clear float -->
  146.             </div><!-- end container940 -->
  147.         </div><!-- end #before-content -->
  148.         
  149. 		<div id="content">
  150.         	<div id="main">
  151.                 <h2 class="title_pattern uppercase"><span>From The Blog</span></h2>
  152.                 <ul id="recentpost">
  153.                     <li>
  154.                         <img src="images/content/pic1.jpg" alt="" class="frame" />
  155.                         <span class="shadowimg220"></span>
  156.                         <div class="entry-date">10/01/12 - <a href="#">No Comment</a></div>
  157.                         <h5 class="colortext"><a href="#">Proin tempus  imperdiet.</a></h5>
  158.                         <span>Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...</span>
  159.                     </li>
  160.                     <li>
  161.                         <img src="images/content/pic2.jpg" alt="" class="frame" />
  162.                         <span class="shadowimg220"></span>
  163.                         <div class="entry-date">10/01/12 - <a href="#">No Comment</a></div>
  164.                         <h5 class="colortext"><a href="#">Proin tempus  imperdiet.</a></h5>
  165.                         <span>Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...</span>
  166.                     </li>
  167.                     <li>
  168.                         <img src="images/content/pic3.jpg" alt="" class="frame" />
  169.                         <span class="shadowimg220"></span>
  170.                         <div class="entry-date">10/01/12 - <a href="#">No Comment</a></div>
  171.                         <h5 class="colortext"><a href="#">Proin tempus  imperdiet.</a></h5>
  172.                         <span>Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...</span>
  173.                     </li>
  174.                     <li class="last">
  175.                         <img src="images/content/pic4.jpg" alt="" class="frame" />
  176.                         <span class="shadowimg220"></span>
  177.                         <div class="entry-date">10/01/12 - <a href="#">No Comment</a></div>
  178.                         <h5 class="colortext"><a href="#">Proin tempus  imperdiet.</a></h5>
  179.                         <span>Cras faucibus ante ut diam laoreet a congue mi aliquam. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec...</span>
  180.                     </li>
  181.                 </ul>
  182.                 <div class="clear"></div><!-- clear float -->
  183.             </div><!-- end #main -->
  184. 		</div><!-- end #content -->
  185.         
  186.         <div id="after-content" class="patternbox">
  187.         	<div class="container940">
  188.             	<a href="#" class="button large">Buy Now !</a>
  189.             	<h2>Started Using the <span class="colortext">Magnum</span> Theme for Your Next <span class="colortext">Project</span> ? Available.</h2>
  190.                 <div class="clear"></div><!-- clear float -->
  191.             </div><!-- end container940 -->
  192.         </div><!-- end #after-content -->
  193.         
  194.         
  195. 		<div id="footer">
  196.         <div id="footer-pattern">
  197.         
  198. 			<div class="container940">
  199.             	<div id="footcol1">
  200.                 	<ul>
  201.                     	<li class="widget-container">
  202.                             <h2 class="widget-title">Latest Articles</h2>
  203.                             <ul id="recentpostwidget">
  204.                                 <li>
  205.                                     <img src="images/content/pic5.jpg" alt="" class="alignleft frame" />
  206.                                     <h5><a href="#">Hello World!!</a></h5>
  207.                                     <span>Lorem ipsum dolor sit amet...</span>
  208.                                 </li>
  209.                                 <li>
  210.                                     <img src="images/content/pic6.jpg" alt="" class="alignleft frame" />
  211.                                     <h5><a href="#">Hello World!!</a></h5>
  212.                                     <span>Lorem ipsum dolor sit amet...</span>
  213.                                 </li>
  214.                             </ul>
  215.                         </li>
  216.                     </ul>
  217.                 </div>
  218.                 <div id="footcol2">
  219.                 	<ul>
  220.                         <li class="widget-container">
  221.                         	<h2 class="widget-title">Blogroll</h2>
  222.                             <ul>
  223.                             	<li><a href="#">Vivamus hendrerit venenatis quam</a></li>
  224.                                 <li><a href="#">Aenean congue nisl in nibh</a></li>
  225.                                 <li><a href="#">Proin tempus tempus orci eu imperdiet</a></li>
  226.                                 <li><a href="#">Mauris interdum</a></li>
  227.                                 <li><a href="#">Donec id turpis at risus</a></li>
  228.                             </ul>
  229.                         </li>
  230.                     </ul>
  231.                 </div>
  232.                 <div id="footcol3">
  233.                 	<ul>
  234.                         <li class="widget-container">
  235.                         	<h2 class="widget-title">Gallery</h2>
  236.                             <ul id="flickr">
  237.                             	<li><a href="#"><img src="images/content/pic7.jpg" alt="" class="frame" /></a></li>
  238.                                 <li><a href="#"><img src="images/content/pic8.jpg" alt="" class="frame" /></a></li>
  239.                                 <li class="nomargin"><a href="#"><img src="images/content/pic9.jpg" alt="" class="frame" /></a></li>
  240.                                 <li><a href="#"><img src="images/content/pic10.jpg" alt="" class="frame" /></a></li>
  241.                                 <li><a href="#"><img src="images/content/pic11.jpg" alt="" class="frame" /></a></li>
  242.                                 <li class="nomargin"><a href="#"><img src="images/content/pic12.jpg" alt="" class="frame" /></a></li>
  243.                             </ul>
  244.                         </li>
  245.                     </ul>
  246.                 </div>
  247.                 <div id="footcol4">
  248.                 	<ul>
  249.                         <li class="widget-container">
  250.                         	<h2 class="widget-title">About Magnum</h2>
  251.                             <div class="textwidget">
  252.                             <p>
  253.                             Nulla interdum, enim eu dictum pellentesque, ipsum elit varius purus, et imperdiet odio magna lobortis purus. 
  254.                             </p>
  255.                             <span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed mauris at eros mollis ultricies vitae porta dui. </span>
  256.                             </div>
  257.                         </li>
  258.                     </ul>
  259.                 </div>
  260.            
  261.             <div class="clear"></div><!-- clear float -->
  262.             </div><!-- end container940 -->
  263.             
  264.         </div><!-- end #footer-pattern -->  
  265. 		</div><!-- end #footer -->
  266.         
  267.         <div id="after-footer">
  268.         	<div class="container940">
  269.                 <div id="sn">
  270.                 	<ul>
  271.                     	<li><a href="#"><img src="images/icons/fb.png" alt="" /></a></li>
  272.                         <li><a href="#"><img src="images/icons/stumbleupon.png" alt="" /></a></li>
  273.                         <li><a href="#"><img src="images/icons/lastfm.png" alt="" /></a></li>
  274.                         <li><a href="#"><img src="images/icons/twitter.png" alt="" /></a></li>
  275.                         <li><a href="#"><img src="images/icons/youtube.png" alt="" /></a></li>
  276.                     </ul>
  277.                 </div>
  278.                 <div id="footertext">
  279.                     Copyright &copy;2012 Magnum.  All Rights Reserved.
  280.                 </div>
  281.                <div class="clear"></div><!-- clear float -->
  282.             </div><!-- end container940 -->
  283.         </div><!-- end #after-footer -->
  284.         
  285. 	</div><!-- end #container -->
  286. </div><!-- end #outer-container -->
  287. 		
  288. </body>
  289. </html>

style源代码：

  1. /* 
  3. Magnum - CSS File
  5. */
  6.  
  7.  
  8. /* Generated by Font Squirrel (http://www.fontsquirrel.com)*/
  9. @font-face {
  10.     font-family: 'Ubuntu';
  11.     src: url('../fonts/Ubuntu-R-webfont.eot');
  12.     src: url('../fonts/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
  13.          url('../fonts/Ubuntu-R-webfont.woff') format('woff'),
  14.          url('../fonts/Ubuntu-R-webfont.ttf') format('truetype'),
  15.          url('../fonts/Ubuntu-R-webfont.svg#Ubuntu-R-webfont') format('svg');
  16.     font-weight: normal;
  17.     font-style: normal;
  18. }
  19.  
  20.  
  21. @font-face {
  22.     font-family: 'UbuntuBold';
  23.     src: url('../fonts/Ubuntu-B-webfont.eot');
  24.     src: url('../fonts/Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
  25.          url('../fonts/Ubuntu-B-webfont.woff') format('woff'),
  26.          url('../fonts/Ubuntu-B-webfont.ttf') format('truetype'),
  27.          url('../fonts/Ubuntu-B-webfont.svg#Ubuntu-B-webfont') format('svg');
  28.     font-weight: normal;
  29.     font-style: normal;
  30. }
  31.  
  32.  
  33.  
  34.  
  35. /*** GLOBAL  ***/
  36. body {
  37. 	font-family:Arial;
  38. 	font-size:12px;
  39. 	margin:0 auto;
  40. 	padding:0;
  41. 	color:#555555;
  42. 	line-height:20px;
  43. 	background:#f7f7f7 url(../images/bgbody.gif) repeat;
  44. 	background-attachment:fixed;
  45. }
  46. * {
  47. 	margin:0;
  48. 	padding:0;
  49. }
  50. *:focus {
  51. 	outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
  52. 					 if you want to keep it! */
  53. }
  54. form{margin:0; padding:0;}
  55. hr {
  56. 	border-width:0;
  57. 	height:1px;
  58. 	line-height:0;
  59. 	margin:30px 0px;
  60. 	page-break-after:always;
  61. 	text-align:center;
  62. 	width:100%;
  63. 	clear:both;
  64. 	color:#d9d9d9;
  65. 	background-color:#d9d9d9;
  66. 	background-repeat:repeat-x
  67. }
  68.  
  69. /* #Clearing
  71. /* Self Clearing Goodness */
  72. .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  73.  
  74. /* Use clearfix class on parent to clear nested columns,
  75. or wrap each row of columns in a <div class="row"> */
  76. .clearfix:before,
  77. .clearfix:after,
  78. .row:before,
  79. .row:after {
  80.   content: '\0020';
  81.   display: block;
  82.   overflow: hidden;
  83.   visibility: hidden;
  84.   width: 0;
  85.   height: 0; }
  86. .row:after,
  87. .clearfix:after {
  88.   clear: both; }
  89. .row,
  90. .clearfix {
  91.   zoom: 1; }
  92.  
  93. /* You can also use a <br class="clear" /> to clear columns */
  94. .clear {
  95.   clear: both;
  96.   display: block;
  97.   overflow: hidden;
  98.   visibility: hidden;
  99.   width: 0;
  100.   height: 0;
  101. }
  102.  
  103. /*** END OF GLOBAL  ***/
  104.  
  105. /*** DEFAULT ELEMENT STYLES ***/
  106. /* heading */
  107. h1, h2, h3{margin-bottom:20px;}
  108. h4, h5, h6{margin-bottom:10px;}
  109. h1 {font-size:22px; line-height:24px;}
  110. h2 {font-size:18px; line-height:20px;}
  111. h3 {font-size:16px; line-height:18px;}
  112. h4 {font-size:15px; line-height:18px;}
  113. h5{font-size:14px; line-height:16px;}
  114. h6 {font-size:13px; line-height:15px;}
  115. h1, h2, h3, h4, h5, h6{ font-weight:normal; font-family:'Ubuntu',  Arial; color:#555 }
  116. .valignmiddle{line-height:45px; margin-bottom:18px}
  117. .uppercase{text-transform:uppercase;}
  118. .title_pattern{ background:url(../images/pattern_title.gif) repeat-x left center; font-size:16px; text-align:center}
  119. .title_pattern span{ background:#fff; padding:0 20px}
  120. .pagetitle{font-size:20px; color:#f6f6f6; margin:0; text-transform:uppercase}
  121.  
  122. /* links */
  123. a, a:visited {text-decoration:none; font-weight:normal; color:#dc6a4d }
  124. a:hover{text-decoration:underline;}
  125. a img{border:none}
  126. /* float align */
  127. .alignleft,
  128. img.alignleft {
  129. 	display: inline;
  130. 	float: left;
  131. 	margin-right: 15px;
  132. 	margin-top: 3px;
  133. }
  134. .alignright,
  135. img.alignright {
  136. 	display: inline;
  137. 	float: right;
  138. 	margin-left: 15px;
  139. 	margin-top: 5px;
  140. }
  141. .aligncenter,
  142. img.aligncenter {
  143. 	clear: both;
  144. 	display: block;
  145. 	margin-left: auto;
  146. 	margin-right: auto;
  147. }
  148.  
  149. .alignnone,
  150. img.alignnone {
  151. 	clear: both;
  152. 	display: block;
  153. 	margin-left: auto;
  154. 	margin-right: auto;
  155. 	margin-top:3px;
  156. }
  157.  
  158.  
  159. img.alignleft, 
  160. img.alignright, 
  161. img.aligncenter,
  162. img.alignnone {
  163. 	margin-bottom: 12px;
  164. }
  165.  
  166.  
  167. /* lists, blockquotes and paragraphs */
  168. p, ul, ol, blockquote {
  169. 	margin-bottom:20px;
  170. }
  171. ul, ol {
  172. 	margin:10px 0 20px 20px;
  173. 	list-style-position:inside
  174. }
  175. li ol,
  176. li ul
  177. {
  178. 	list-style:square;
  179. 	margin-bottom:0;
  180. 	margin-top:0;
  181. }
  182. li ol {list-style:decimal;}
  183. 	
  184. blockquote {
  185. 	/*font-style:italic;*/
  186. 	margin:0px 0 20px 0px;
  187. 	padding:0px 10px 0px 50px;
  188. 	background-image:url(../images/quote.png);
  189. 	background-repeat:no-repeat;
  190. 	background-position:0px 0px;
  191. 	clear:both;
  192. 	font-size:16px;
  193. 	line-height:25px;
  194. 	font-family:'Ubuntu', Georgia, Arial;
  195. 	font-style:italic
  196. 	}
  197. 	
  198. 	
  199. blockquote.left, blockquote.right  {
  200. 	float:right;
  201. 	letter-spacing:0px;
  202. 	margin-bottom:20px;
  203. 	margin-left:20px;
  204. 	margin-top:0px;
  205. 	padding:0px 20px 10px 60px;
  206. 	width:43%;
  207. 	background-position:0px 0px;
  208. 	}
  209. 	
  210. blockquote.left{
  211. 	float:left;
  212. 	margin-left:0px;
  213. 	margin-right:20px;}
  214.  
  215. blockquote p{margin-bottom:0px; font-size:16px; line-height:20px}
  216.  
  217. /* code */
  218. code {
  219. 	font-family:Arial;
  220. 	letter-spacing:1px;
  221. 	margin:25px 0 25px 0px;
  222. 	display:block;
  223. 	font-size:0.9em;
  224. 	border-left:4px solid #cfcfcf;
  225. 	padding:15px 10px;
  226. }
  227.  
  228. /*** END OF DEFAULT ELEMENT STYLES ***/
  229.  
  230. /*** CONTAINER ***/
  231. #outer-container{}
  232. #container{
  233. 	width:1020px;
  234. 	margin:20px auto;
  235. 	background:#fff; /* must use for IE */
  236. 	-webkit-box-shadow: 0px 0px 6px #757575;
  237. 	-moz-box-shadow: 0px 0px 6px #757575;
  238. 	box-shadow: 0px 0px 6px #757575;
  239. 	-moz-border-radius: 2px; /* Firefox */
  240. 	-webkit-border-radius: 2px; /* Safari, Chrome */
  241. 	border-radius: 2px; /* CSS3 */
  242. }
  243.  
  244. /*** TOP ***/
  245. #top{height:109px;}
  246. #logo{float:left}
  247.  
  248.  
  249. /*** TOP MENU ***/
  250. #nav{position:relative;	z-index:9000; float:right; margin:50px 28px 0 0}
  251.  
  252. #topnav{
  253. 	margin:0;
  254. 	padding:0;
  255. 	list-style-type:none;
  256. 	overflow:visible;
  257. 	position:relative;
  258. 	float:left;
  259. 	font-size:14px;
  260. 	font-family:'Ubuntu',  Arial;
  261.   }
  262. .sf-menu a {
  263. 	text-decoration:none!important;
  264. 	display:		block;
  265. 	position:		relative;
  266. 	padding: 		0 12px 0 12px !important;
  267. 	text-decoration:none;
  268. 	font-weight:normal;
  269. 	text-transform:uppercase;
  270. 	color:#4d4d4d;
  271.  
  272. }
  273. .sf-menu a:visited{color:#4d4d4d;}
  274. .sf-menu a:hover, .sf-menu li a.current{color:#dc6a4d;}
  275. .sf-menu li.sfHover a:hover{color:#dc6a4d;}
  276.  
  277.  
  278. /* Drop down menu */
  279. .sf-menu ul a:hover {}
  280. .sf-menu li li {
  281. 	text-align:left;
  282. 	line-height:20px;
  283. 	margin:0;
  284. }
  285. .sf-menu, .sf-menu * {
  286. 	margin:			0;
  287. 	padding:		0;
  288. 	list-style:		none;
  289. 	font-size:13px;
  290. 	
  291. }
  292. .sf-menu {
  293. 	line-height:100%;
  294. 	position:absolute;
  295. 	right:0;
  296. 	bottom:0;
  297. 	float:left;
  298. }
  299. .sf-menu ul {
  300. 	position:		absolute;
  301. 	top:			-999em;
  302. 	width:			27em; /* left offset of submenus need to match (see below) */
  303. }
  304. .sf-menu ul li {
  305. 	width:			100%;
  306. }
  307. .sf-menu li:hover {
  308. 	visibility:		inherit; /* fixes IE7 'sticky bug' */
  309. }
  310. .sf-menu li {
  311. 	float:			left;
  312. 	position:		relative;
  313. 	margin:0;
  314. }
  315.  
  316. .sf-menu li li{margin:0px 0px;}
  317.  
  318.  
  319. .sf-menu li:hover ul,
  320. .sf-menu li.sfHover ul {
  321. 	left:			-2px;
  322. 	top:			2.6em; /* match top ul list item height */
  323. 	z-index:		99;
  324.  
  325. }
  326. ul.sf-menu li:hover li ul,
  327. ul.sf-menu li.sfHover li ul {
  328. 	top:			-999em;
  329. }
  330. ul.sf-menu li li:hover ul,
  331. ul.sf-menu li li.sfHover ul {
  332. 	left:			10em; /* match ul width */
  333. 	top:			-1px;
  334. 	margin-left:	0px;
  335. }
  336. ul.sf-menu li li:hover li ul,
  337. ul.sf-menu li li.sfHover li ul {
  338. 	top:			-999em;
  339. 	
  340. }
  341. ul.sf-menu li li li:hover ul,
  342. ul.sf-menu li li li.sfHover ul {
  343. 	left:			10em; /* match ul width */
  344. 	top:			-1px;
  345. 	
  346. }
  347. .sf-menu ul li a{
  348. 	padding:8px 0px 8px 20px!important;
  349. 	text-transform:capitalize;
  350. }
  351.  
  352. .sf-menu ul li a:hover{}
  353. .sf-menu li ul {
  354. 	padding:0px;
  355. }
  356. .sf-menu a.sf-with-ul {
  357. 	padding-right: 	0px;
  358. 	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
  359. }
  360. .sf-sub-indicator {
  361. 	position:		absolute;
  362. 	display:		block;
  363. 	right:			10px;
  364. 	top:			1.05em; /* IE6 only */
  365. 	width:			10px;
  366. 	height:			10px;
  367. 	text-indent: 	-999em;
  368. 	overflow:		hidden;
  369. }
  370.  
  371. .sf-menu li li, .sf-menu li li:hover, .sf-menu li li.sfHover{background:#fff; text-transform:capitalize}
  372. .sf-menu li li:hover{background:#f3f3f3}
  373. 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}
  374.  
  375. .sf-menu ul{border:solid 1px #e1e1e1;}
  376. .sf-with-ul{}
  377. .sf-menu li li {border-bottom:solid 1px #e1e1e1;}
  378. .sf-menu li li:last-child{ border-bottom:0}
  379.  
  380.  
  381. /*** HEADER ***/
  382. #header{height:450px;}
  383. #header.innerpage{height:auto; background:url(../images/pattern_header_inner.gif) repeat; clear:both; padding:30px 0; position:relative}
  384. #header.innerpage .shadow{background:url(../images/glow-header-inner.png) repeat-x; width:100%; height:5px; position:absolute; top:0;}
  385. #header.innerpage .pagetitle{float:left;}
  386. #header.innerpage .pagedesc{font-size:14px; color:#dedede; font-family:"Ubuntu", Arial; float:right; margin-right:60px; padding:2px 0 0 0}
  387.  
  388. #slider-container{position:relative; clear:both}
  389. #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;}
  390. .box_skitter_large {width:1020px; height:450px; background:#000}
  391. .label_skitter{bottom:35px !important; left:40px !important; padding:20px; background:url(../images/opacity-slider-text.png) repeat;}
  392. .label_skitter h3{margin-bottom:10px;}
  393.  
  394.  
  395.  
  396. /*** AFTER HEADER ***/
  397. #after-header{padding:40px 0}
  398. #after-header h1{font-size:20px; line-height:26px; text-transform:uppercase; text-align:center; color:#999; margin:0;}
  399.  
  400. /*** BEFORE CONTENT ***/
  401. #before-content{position:relative; margin-bottom:20px}
  402. #before-content .shadow{background:url(../images/glow.png) repeat-x; width:100%; height:12px; position:absolute; top:0;}
  403.  
  404. /*** CONTENT ***/
  405. #content{}
  406. #content.withsidebar{background:url(../images/bg-content-inner.gif) repeat-y;}
  407. #main{padding:40px;}
  408. #maincontent{float:left; width:610px; padding-right:25px;}
  409.  
  410. /*** CONTENT EMEMENT ***/
  411. .container940{width:940px; margin:0 auto;}
  412. .colortext, .colortext a, .colortext a:visited{color:#dc6a4d !important;}
  413. .patternbox{background:url(../images/pattern_box.gif) repeat;  border:solid 1px #dcdcdc; border-width:1px 0; padding:20px 0}
  414.  
  415.  
  416. /* Separator */
  417. .separator{clear:both; display:block; height:30px; padding:10px 0}
  418. .separator.small{clear:both; display:block; height:10px; padding:0 0}
  419. .separator.line{clear:both; display:block; height:30px; padding:10px 0; margin-bottom:20px; background:url(../images/hr.gif) repeat-x left center}
  420.  
  421. /* Custom List */
  422. .customlist{list-style-type:none; margin:0; padding:0;}
  423. .customlist li{width:280px; float:left; padding:10px 19px 10px 0; margin:0 30px 0 0; border-right:solid 1px #dcd}
  424. .customlist li.last{border:0; margin:0; padding:10px 0}
  425.  
  426. .customlist2{list-style-type:none; margin:0; padding:0}
  427. .customlist2 li{width:220px; float:left; margin-right:20px;}
  428. .customlist2 li.last{margin:0;}
  429.  
  430. #recentpost{list-style-type:none; margin:0; padding:0}
  431. #recentpost li{width:220px; float:left; margin-right:20px;}
  432. #recentpost li.last{margin:0;}
  433. #recentpost .entry-date{border:solid 1px #ececec; border-width:1px 0; padding:4px 0; color:#909090; margin-bottom:15px}
  434. #recentpost .entry-date a, #recentpost .entry-date a:visited{color:#909090;}
  435.  
  436. .outside{list-style-type:none; margin:0; padding:0;}
  437. .outside li{background:url(../images/list1.gif) no-repeat 0px 10px; padding:3px 0 3px 20px}
  438.  
  439.  
  440.  
  441. /* Frame Image */
  442. .frame{padding:4px; border:solid 1px #ececec; display:block}
  443.  
  444.  
  445. /* Shadow Image */
  446. .shadowimg70{background:url(../images/shadowimg70.gif) no-repeat; display:block; height:12px;}
  447. .shadowimg220{background:url(../images/shadowimg220.gif) no-repeat; display:block; height:20px;}
  448. .shadowimg300{background:url(../images/shadowimg300.gif) no-repeat; display:block; height:24px;}
  449. .shadowimg610{background:url(../images/shadowimg610.gif) no-repeat; display:block; height:22px;}
  450. .shadowimg540{background:url(../images/shadowimg540.gif) no-repeat; display:block; height:29px;}
  451. .shadowimg460{background:url(../images/shadowimg460.gif) no-repeat; display:block; height:27px;}
  452.  
  453.  
  454.  
  455. /* Button */
  456. input[type="text"],
  457. textarea{
  458. 	border:solid 1px #ececec;
  459. 	font-size:11px;
  460. 	padding:8px 5px;
  461. 	border-radius:4px;
  462. 	-moz-border-radius:4px;		
  463. 	-webkit-border-radius:4px;
  464. }
  465.  
  466. select {
  467. 	font-size:11px;
  468. 	padding:4px 5px;
  469. }
  470.  
  471.  
  472. .button,
  473. .button:visited,
  474. input[type="submit"],
  475. input[type="reset"],
  476. button,
  477. .meta-nav{
  478. 	color:#555555;
  479. 	outline:0px;
  480. 	font-size:12px;
  481. 	font-family:"Ubuntu", Arial;
  482. 	text-transform:capitalize;
  483. 	display:block;
  484. 	display:inline-block;
  485. 	border:solid 1px #eaeaea;
  486. 	border-bottom:solid 1px #bfbfbf;
  487. 	border-right:solid 1px #bfbfbf;
  488. 	border-radius:4px;
  489. 	-moz-border-radius:4px;		
  490. 	-webkit-border-radius:4px;
  491. 	height:30px;
  492. 	line-height:30px;
  493. 	padding:0 15px;
  494. 	background:url(../images/bg-button.png) repeat-x left top;
  495. }
  496.  
  497. input[type="submit"],
  498. input[type="reset"],
  499. button{
  500. 	height:32px;
  501. }
  502.  
  503. .button:hover,
  504. input[type="submit"]:hover,
  505. input[type="reset"]:hover,
  506. button:hover{text-decoration:none; color:#dc6a4d; cursor:pointer}
  507.  
  508. .button.large{
  509. 	font-size:18px;
  510. 	text-transform:uppercase;
  511. 	height:40px;
  512. 	line-height:40px;
  513. 	text-decoration:none;
  514. 	background:url(../images/bg-buttonlarge.png) repeat-x left top;
  515. 	
  516. }
  517. .button.large:hover{background-position:0 0;}
  518.  
  519.  
  520. /* Tabs */
  521. .tabcontainer{margin:0; border:solid 1px #ebebeb; border-width:0 0 0 1px;}
  522. ul.tabs {
  523. 	margin: 0;
  524. 	padding: 0 0 1px 0;
  525. 	list-style: none;
  526. 	height: 41px;
  527. 	width: 100%;
  528.  
  529. }
  530. ul.tabs li {
  531. 	float: left;
  532. 	margin: 0 0;
  533. 	padding: 0 15px;
  534. 	line-height:41px;
  535. 	height:41px;
  536. 	overflow: hidden;
  537. 	position: relative;
  538. 	font-size:14px;
  539. 	font-family:"Ubuntu", Arial;
  540. 	border:solid 1px #ebebeb;
  541. 	border-width:1px 1px 0 0;
  542. 	background:url(../images/navtab.gif) repeat-x;
  543. }
  544.  
  545. ul.tabs li a {
  546. 	text-decoration: none;
  547. 	display: block;
  548. 	padding: 0 0px;
  549. 	outline: none;
  550. 	color:#555;
  551. }
  552.  
  553. .tab-content {padding: 20px 0; }
  554. 	
  555. ul.tabs li:hover{}
  556. ul.tabs li.active{background:transparent}
  557. html ul.tabs li.active a{ color:#dc6a4d; }
  558. #tab-body{padding:0 20px; border:solid 1px #ebebeb; border-width:1px 1px 1px 0;}
  559.  
  560. /* jQuery Toggle */
  561. #toggle{border: 1px solid #ebebeb; border-width:1px 1px 0 1px;}
  562. h2.trigger {
  563. 	padding: 16px 20px 16px 20px;
  564. 	margin: 0 0 0 0;
  565. 	font-size:14px;
  566. 	font-weight: normal;
  567. 	background:url(../images/bg-toggle.gif) repeat-x;
  568. 	border-bottom: 1px solid #ebebeb;
  569. }
  570. h2.trigger span {
  571. 	text-decoration: none;
  572. 	display: block;
  573. 	color:#555;
  574. 	height:9px;
  575. 	background: url(../images/left.gif) no-repeat;
  576. 	padding-left:20px;
  577. 	cursor:pointer;
  578. 	line-height:12px;
  579. }
  580. h2.active span{ background:url(../images/down.gif) no-repeat 0 1px; color:#dc6a4d}
  581. h2.trigger a:hover {
  582. 	color: #454545;
  583. }
  584. h2.active { background:transparent;}
  585. .toggle_container {
  586. 	margin: 0 0 0 0;
  587. 	padding: 20px 25px;
  588. 	overflow: hidden;
  589. 	clear: both;
  590. 	border: 1px solid #ebebeb;
  591. 	border-width:0 0px 1px 0px;
  592. }
  593. .toggle_container .block {
  594. 	padding: 0px;
  595. }
  596. .toggle_container .block p {
  597. 	padding: 5px 0;
  598. 	margin: 5px 0;
  599. }
  600.  
  601.  
  602. /* Dropcaps */
  603. .dropcap1{
  604. 	text-shadow:1px 1px 0 #666;
  605. 	display:block;
  606. 	float:left;
  607. 	font-size:35px;
  608. 	line-height:35px;
  609. 	margin:2px 8px 0 0;
  610. }
  611.  
  612. /* Pullquotes */
  613. .pullquote-right,.pullquote-left{
  614. 	padding:0px 10px 0px 50px;
  615. 	background-image:url(../images/quote.png);
  616. 	background-repeat:no-repeat;
  617. 	background-position:0px 0px;
  618. 	float:right;
  619. 	font-family:'Ubuntu', Georgia, Arial;
  620. 	font-style:italic;
  621. 	font-size:16px;
  622. 	letter-spacing:0px;
  623. 	line-height:22px;
  624. 	margin:0px 2px 20px 20px;
  625. 	width:50%;
  626. 	}
  627. .pullquote-left{float:left;margin-left:2px;margin-right:20px;}
  628.  
  629. /* Highlight */
  630. .highlight1{padding:2px 5px; background-color:#f7f7f7; border:solid 1px #ebebeb}	
  631. .highlight2{padding:2px 5px; background-color:#ebebeb;  border:solid 1px #f7f7f7}
  632.  
  633.  
  634. /* Tables */
  635. table {border-collapse:separate;border-spacing:0;width:100%; margin-bottom:18px;}
  636. table,td,th { text-align:center;}
  637. th{padding:10px;text-transform:uppercase; background:#f7f7f7; border-bottom: 1px solid #ebebeb;}
  638. td{padding:10px;}
  639. tfoot td{border:0px;}
  640. th,tr:hover{}
  641. table {
  642. 	border: 1px solid #ebebeb;
  643. 	border-bottom:0;
  644. 	text-align: left;
  645. 	margin: 0 -1px 24px 0;
  646. 	width: 100%;
  647. }
  648. tr th,
  649. thead th {
  650. 	font-size: 12px;
  651. 	font-weight: bold;
  652. 	line-height: 18px;
  653. 	padding: 9px 24px;
  654. }
  655. tr td {
  656. 	border-bottom: 1px solid #ebebeb;
  657. 	padding: 6px 24px;
  658. }
  659. tr.odd td {
  660. 	background: #F2F7FC;
  661. }
  662.  
  663.  
  664. /* Column */
  665. .one_half, .one_third, .two_third, 
  666. .three_fourth, .one_fourth, .one_fifth, 
  667. .two_fifth, .three_fifth, .four_fifth, 
  668. .one_sixth, .five_sixth						{margin-right: 4%; margin-left:0; position:relative; float:left;}
  669.  
  670. .one_half									{ width:48%; }
  671. .one_third									{ width:30.6666%;}
  672. .one_fourth									{ width:22%; }
  673. .one_fifth									{ width: 16.8%;}
  674. .one_sixth 									{ width: 13.3333%;}
  675.  
  676. .two_third									{ width: 65.3332%;}
  677. .two_fourth 								{ width: 48%;}
  678. .two_fifth 									{ width: 37.6%;}
  679. .two_sixth 									{ width: 30.6666%;}
  680.  
  681. .three_fourth								{ width:74%;}
  682. .three_fifth 								{ width: 58.4%;}
  683. .three_sixth 								{ width: 47.9998%;}
  684.  
  685. .four_fifth 								{ width: 79.2%;}
  686. .four_sixth 								{ width: 65.3332%;}
  687.  
  688. .five_sixth 								{ width: 82.6665%;}
  689. .firstcols									{ margin-left:0px !important; }
  690. .last, .lastcols							{ margin-right:0px !important; clear:right; }
  691.  
  692.  
  693. /*** AFTER CONTENT ***/
  694. #after-content{position:relative; margin:20px 0 60px 0; clear:both}
  695. #after-content h2{font-size:20px; margin:10px 0 0 20px; float:left}
  696. #after-content.patternbox{padding:20px 0;}
  697. #after-content .button{float:right; margin-right:60px}
  698.  
  699.  
  700. /*** SIDEBAR ***/
  701. #sidebar{float:left; width:270px; padding-left:35px}
  702. #sidebar ul{list-style-type:none; padding:0; margin:0;}
  703. #sidebar ul li.widget-container{margin:0 0 40px 0 !important; clear:both}
  704. #sidebar .widget-title{ font-size:16px; text-transform:uppercase; margin-bottom:20px}
  705. #sidebar ul li a, #sidebar ul li a:visited{color:#555;}
  706. #sidebar ul li a:hover{color:#dc6a4d; text-decoration:none}
  707. #sidebar li li{
  708. 	list-style-type:none;
  709. 	margin:0 0 8px 0;
  710. 	padding:0 0 8px 15px;
  711. 	background: url(../images/double_line.gif) repeat-x left bottom , 
  712. 				url(../images/arrow.gif)  0px 7px no-repeat;
  713. }
  714. #sidebar li li:hover{
  715. 	background: url(../images/double_line.gif) repeat-x left bottom , 
  716. 				url(../images/arrow2.gif)  0px 7px no-repeat;
  717. }
  718.  
  719. /* list second level */
  720. #sidebar ul.sub-menu, #sidebar ul ul ul{margin:5px 0 0 0; }
  721. #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}
  722. #sidebar ul.sub-menu li:hover, #sidebar ul ul ul li:hover{background:url(../images/arrow2.gif)  0px 7px no-repeat;}
  723. #sidebar ul.sub-menu li:last-child, #sidebar ul ul ul li:last-child{padding-bottom:0px; margin-bottom:0;}
  724.  
  725. /* tags widget */
  726. .tag{margin:0 10px 10px 0;}
  727. .tag, .tag span{display:block; float:left; height:27px; line-height:25px}
  728. .tag .left{background:url(../images/tag-left.gif) no-repeat; width:17px;}
  729. .tag .middle{background:url(../images/tag-middle.gif) repeat-x; padding:0 10px 0 8px}
  730. .tag .right{background:url(../images/tag-right.gif) no-repeat; width:12px;}
  731.  
  732. /* recent comment widget */
  733. #recentcommentwidget{}
  734. #recentcommentwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
  735. #recentcommentwidget .colortext{display:block; padding-bottom:5px;}
  736. #recentcommentwidget li a:hover{color:#555 !important;}
  737.  
  738.  
  739. /* recent project widget */
  740. #recentprojectwidget{}
  741. #recentprojectwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
  742. #recentprojectwidget .date{color:#909090;}
  743.  
  744. /* shopping cart widget */
  745. #shoppingcartwidget{}
  746. #shoppingcartwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
  747. .totalprice{font-weight:bold;display:block; margin-bottom:15px}
  748. .shopping_textwidget{background: url(../images/double_line.gif) repeat-x left bottom; padding-bottom:30px}
  749. .shopping_textwidget .button{margin-right:8px;}
  750.  
  751.  
  752. /* recent product widget */
  753. #recentproductwidget{}
  754. #recentproductwidget li{clear:both; padding:0 0 8px 0 !important; margin:0 0 15px 0 !important}
  755.  
  756.  
  757. /* login widget */
  758. #login{}
  759. #login label{width:70px; float:left; padding:5px 0 0 0}
  760. #login input[type="text"]{ width:180px}
  761. #login .lost{float:right; width:50%; text-align:right}
  762.  
  763.  
  764. /*** FOOTER ***/
  765. #footer{border-top:solid 10px #303030; background:#1f1f1f url(../images/bg-footer.png) repeat-x; color:#aaa}
  766. #footer-pattern{ background:url(../images/bg-footer-pattern.gif) repeat; }
  767.  
  768. #footcol1, #footcol2, #footcol3, #footcol4{width:220px; float:left; padding:40px 0 20px 0; margin-right:20px;}
  769. #footcol4{margin:0;}
  770.  
  771. #footer ul{list-style-type:none; margin:0; padding:0;}
  772. #footer ul li.widget-container{margin-bottom:40px;}
  773. #footer ul li.widget-container:last-child{margin-bottom:0px;}
  774. #footer .widget-title{color:#fafafa; text-transform:uppercase; margin-bottom:25px; font-size:14px}
  775. #footer ul li a, #footer ul li a:visited{color:#aaa}
  776. #footer ul li a:hover{text-decoration:none; color:#fff}
  777. #footer ul li li{border-bottom:solid 1px #4a4a4a; padding:0 0 6px 0; margin:0 0 6px 0;}
  778.  
  779. #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6{color:#fafafa}
  780. #footer .frame{padding:4px; border:solid 1px #424242; background:url(../images/opacity-img.png) repeat}
  781.  
  782. #recentpostwidget h5{font-size:12px; font-family:Arial; margin-bottom:5px}
  783. #footer #recentpostwidget li h5 a, #footer #recentpostwidget li h5 a:visited{color:#fafafa}
  784. #recentpostwidget li{clear:both; margin:0 0 30px 0 !important; border:0px !important; padding:0 !important; background:transparent !important}
  785.  
  786. #flickr li{border:0px !important; float:left; margin-right:14px !important;}
  787. #flickr li.nomargin{margin-right:0px !important;}
  788.  
  789.  
  790. /*** AFTER FOOTER ***/
  791. #after-footer{background:url(../images/bg-afterfooter.png) no-repeat; height:80px;}
  792. #footertext{padding:30px 0 0 0;color:#aaaaaa}
  793. #sn{float:right; padding:25px 0 0 0}
  794. #sn ul{margin:0; padding:0; list-style-type:none;}
  795. #sn ul li{float:left; margin-left:8px;}

其它模板预览图：

由于篇节限制，只展示部分，更多自己去测试！已打包了，自取，要是对你有帮助留言点赞！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/983242
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号