<!DOCTYPE html>
<!--HTML5 Theme created by NORDiX-->
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<title>Metropol</title>
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Six+Caps|Open+Sans+Condensed:700,300,300italic|Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./stylesheets/prettyPhoto.css" type='text/css'>
<link rel="stylesheet" href="./stylesheets/nivo-slider.css" />
<link rel="stylesheet" href="./stylesheets/skeleton.css">
<link rel="stylesheet" href="./stylesheets/layout.css">
<link rel="stylesheet" href="./stylesheets/color-setting.css">
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./js/jquery-1.6.4.min.js"><\/script>')</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- JavaScript files begin-->
<script type="text/javascript" src="./js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript" src="./js/jquery.ufvalidator-1.0.5.js"></script>
<script type="text/javascript" src="./js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="./js/gmap3.min.js"></script>
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./js/raphael.js"></script>
<script type="text/javascript" src="./js/jquery.progression.1.3.js"></script>
<script type="text/javascript" src="./js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="./js/waypoints.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
<script src="./js/jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="./images/favicon.ico">
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/apple-touch-icon-114x114.png">
<meta charset="UTF-8"></head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('a.op-cl').click(function() {
if($(".change").css("left")!="0px"){
$(".change").animate({left:"0px"},{duration:1500,easing: 'easeOutExpo'});
$('.change').find('.op-cl').removeClass("aclose").addClass("aopen");
}else{
$(".change").animate({left:"-130px"},{duration:1500,easing: 'easeOutExpo'});
$('.change').find('.op-cl').removeClass("aopen").addClass("aclose");
}
});
});
</script>
<style>
.change{ position:fixed; top:150px; left:0px; border:1px #cccccc solid; z-index:99999;background:#ffffff;}
.change a.op-cl{display:block; width:30px; height:30px; text-indent:-9999px; position:absolute; top:-1px; right:-30px; border-bottom:1px #cccccc solid; border-top:1px #cccccc solid; border-right:1px #cccccc solid; z-index:10;}
.aopen{ background:#ffffff url(./open-close.png) 0 -60px no-repeat;}
.aclose{background:#ffffff url(./open-close.png) 0 0 no-repeat;}
.color-change{ background:#ffffff; width:110px; padding:10px; display:inline-block;}
.color-change li{ float:left; margin:0 10px 10px 0;}
.color-change li.last{ margin-right:0;}
.color-change li.titles{ width:110px; font-size:14px;}
.color-change li.link{ width:110px; font-size:12px; margin-bottom:0;}
.color-change li a.color{ display:block; width:30px; height:30px; text-indent:-9999px;}
.color-change li a.links{ width:110px; font-size:13px;color:#25313d; text-align:center; display:block; text-transform:uppercase; padding:5px 0; border-bottom:#cccccc 1px solid;}
</style>
<div class="change">
<a href="#" class="op-cl aopen"></a>
<ul class="color-change">
<li class="link last">
<a href="../index.html" class="links">Style 1 </a>
<a href="../index-nivo.html" class="links">Style 1 nivo</a>
<a href="../style_2/index.html" class="links">Style 2 </a>
<a href="../style_2/index-nivo.html" class="links">Style 2 nivo</a>
<a href="../style_3/index.html" class="links">Style 3 </a>
<a href="../style_3/index-nivo.html" class="links">Style 3 nivo</a>
<a href="../style_4/index.html" class="links">Style 4 </a>
<a href="../style_4/index-nivo.html" class="links">Style 4 nivo</a>
<a href="./index.html" class="links">Style 5 </a>
<a href="./index-nivo.html" class="links">Style 5 nivo</a>
</li>
</ul>
</div>
<div class="top-row">
</div>
<header>
<div class="container">
<div class="sixteen columns">
<a href="#" class="logo">
</a>
<!--menu begin here -->
<ul class="main-navigation">
<li>
<a href="#top" class="current">home</a>
</li>
<li>
<a href="#about" class="skill-start">about
</a>
</li>
<li>
<a href="#portfolio">portfolio</a>
</li>
<li>
<a href="#blog">blog</a>
</li>
<li>
<a href="#features">features</a>
</li>
<li class="last">
<a href="#contact">contact</a>
</li>
</ul>
<!-- menu end here -->
</div>
</div>
</header>
<div class="shadow">
</div>
<!--section begin here -->
<article>
<section id="top">
<div class="container">
<div class="sixteen columns top-title-slider">
<h2>Hello, my name is <span>John Doe</span></h2>
</div>
<div id="sliders-cont" class="sixteen columns block-info">
<div id="sliders" class="nivoSlider theme-default">
<img src="./images/slider_img/img_slider.jpg" title="#htmlcaption" alt="">
<img src="./images/slider_img/img_slider2.jpg" title="Lorem ipsum dolor sit amet" alt="">
<img src="./images/slider_img/img_slider3.jpg" title="#htmlcaption2" alt="">
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
This
is an example of a HTML
caption with
<a href="#">
a link
</a>
.
</div>
<div id="htmlcaption2" class="nivo-html-caption">
This
is an example of a caption with
<a href="#">
a link
</a>
.
</div>
<div class="one-third column block-info">
<span class="create-icon">
</span>
<h1>
Design
</h1>
<h3>
Lorem ipsum dolor sit amet
漂亮的设计行业作品案例单页跳转模板_墨绿色漂亮设计个性博客设计师行业作品案例单面跳转专题html5.rar
需积分: 0 196 浏览量
2023-09-12
08:43:31
上传
评论
收藏 6.05MB RAR 举报
漂亮的设计行业作品案例单页跳转模板_墨绿色漂亮设计个性博客设计师行业作品案例单面跳转专题html5.rar （105个子文件） 
layout.css 21KB prettyPhoto.css 19KB skeleton.css 10KB nivo-slider.css 3KB reset.css 2KB color-setting.css 2KB
loading.gif 5KB loader.gif 2KB default_thumbnail.gif 227B
index-nivo.html 77KB index.html 76KB contact.php.html 0B favicon.ico 1KB
img_slider.jpg 167KB img_slider-port.jpg 92KB img_slider3.jpg 90KB img_slider2.jpg 83KB img_slider-port3.jpg 54KB img_slider-port2.jpg 49KB blog-img3.jpg 39KB blog-img2.jpg 24KB blog-img.jpg 22KB img_small.jpg 17KB blog-img5.jpg 15KB img_small4.jpg 14KB img_small3.jpg 11KB img_small2.jpg 10KB blog-img4.jpg 7KB jquery-1.6.4.min_bf70e42d.js 90KB jquery-1.6.4.min_853c4af3.js 90KB jquery-1.6.4.min.js 90KB jquery-1.6.4.min_c770b627.js 90KB raphael.js 89KB gmap3.min.js 28KB jquery.prettyPhoto.js 24KB jquery.form.js 22KB jquery.nivo.slider.pack.js 11KB custom.js 9KB jquery.ufvalidator-1.0.5.js 6KB jquery.progression.1.3.js 5KB jquery.easing.1.3.js 5KB waypoints.min.js 4KB jquery.smooth-scroll.min.js 2KB jquery.ui.totop.js 2KB
logo.png 26KB create-icon.png 18KB develop-icon.png 18KB usability-icon.png 17KB ui.totop.png 13KB dribbble-big.png 11KB digg-big.png 11KB bg-filter.png 10KB bg-filter-tr.png 10KB vimeo-big.png 10KB twitter-big.png 10KB linkedin-big.png 10KB facebook-big.png 10KB apple-touch-icon-114x114.png 10KB blog-big.png 10KB arrows.png 10KB bg-over.png 7KB bg-overs.png 7KB bg-header.png 6KB divider-star.png 6KB apple-touch-icon-72x72.png 4KB close-but.png 4KB dribbble.png 4KB sprite.png 3KB vimeo.png 3KB linkedin.png 3KB twitter.png 3KB facebook.png 3KB bg-divider.png 3KB apple-touch-icon.png 2KB user.png 2KB bullets.png 2KB default_thumb.png 2KB btnPrevious.png 1KB btnNext.png 1KB sprite_prev.png 1KB reb-bg.png 1KB sprite_next.png 1KB sprite_y.png 1KB circle.png 1KB close-error.png 1KB close-info.png 1KB close-confirm.png 1KB close-note.png 1KB sprite_x.png 1KB arrow.png 1KB bullet.png 1KB square.png 1013B star-menu-over.png 858B star-menu.png 834B bg-img-port.png 541B open-close.png 510B reb.png 468B comments.png 351B contentPatternTop.png 142B contentPatternBottom.png 142B共 105 条
- 1
- 2
资源评论
