固定导航HTML设计模板是一款创意设计的顶部固定导航HTML网站模板。_html网站模板_网页源码移动端前端

共619个文件

png：375个

js：80个

jpg：75个

网站模板

179 浏览量 2023-08-05 10:25:25 上传评论收藏 6.23MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

固定导航HTML设计模板是一款创意设计的顶部固定导航HTML网站模板。_html网站模板_网页源码移动端前端_H5模板.rar （619个子文件）

layout.css 21KB

prettyPhoto.css 19KB

skeleton.css 10KB

nivo-slider.css 3KB

reset.css 2KB

color-setting.css 2KB

Thumbs.db 45KB

Thumbs.db 26KB

Thumbs.db 9KB

Thumbs.db 8KB

loader.gif 6KB

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

共 619 条

<!DOCTYPE html>     <html lang="en">  <head> <title>Metropol</title> <meta name="description" content=""> <meta name="author" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <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">  <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>  <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>   <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="./index.html" class="links">Style 4 </a> <a href="./index-nivo.html" class="links">Style 4 nivo</a> <a href="../style_5/index.html" class="links">Style 5 </a> <a href="../style_5/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>  <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>  </div> </div> </header> <div class="shadow"> </div>  <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

评论收藏

内容反馈