1 Star 0 Fork 1

小小程序员/博客

forked from suki/博客 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 17.95 KB
一键复制 编辑 原始数据 按行查看 历史
suki 提交于 2017-04-16 21:30 . Signed-off-by: shanchuqi [email protected]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>旅游博客</title>
<link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:100,300,400">
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<button></button>
</head>
<body id="top" class="home">
<div class="container-fluid">
<div class="row">
<div class="tm-navbar-container">
<!-- navbar -->
<nav class="navbar navbar-full navbar-fixed-top">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
&#9776;
</button>
<div class="collapse navbar-toggleable-sm" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#top">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-2">博文</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-3">相册</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-4">抽奖</a>
</li>
<li class="nav-item">
<a class="nav-link external" href="columns.html">关于我</a>
</li>
<button>aaa</button>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="tm-intro">
<section id="tm-section-1">
<div class="tm-container text-xs-center tm-section-1-inner">
<img src="img/tm-lumino-logo.png" alt="Logo" class="tm-logo">
<h1 class="tm-site-name">HELLO</h1>
<p class="tm-intro-text">welcome to my bolg</p>
</div>
</section>
</div>
</div>
<div class="row gray-bg">
<div id="tm-section-2" class="tm-section">
<div class="tm-container tm-container-wide">
<div class="tm-news-item">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
<img src="img/tm-600x300-01.jpg" alt="Image" class="img-fluid tm-news-item-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
<h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
<p class="tm-news-text">Lumino theme is a Bootstrap 4.0 mobile compatible layout for your website. Check "columns" page for one, two, three columns and tables.</p>
<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Preview</a>
</div>
</div>
<div class="tm-news-item">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 flex-order-2 tm-news-item-img-container">
<img src="img/tm-600x300-02.jpg" alt="Image" class="img-fluid tm-news-item-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container flex-order-1">
<h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
<p class="tm-news-text">You may download, modify and use this template as you wish. Lumino HTML5 template is a fully responsive mobile ready for any kind of website.</p>
<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Detail</a>
</div>
</div>
<div class="tm-news-item">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
<img src="img/tm-600x300-03.jpg" alt="Image" class="img-fluid tm-news-item-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
<h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
<p class="tm-news-text">Credit goes to <a rel="nofollow" href="http://unsplash.com" target="_parent">Unsplash</a> for images used in this website template. Nulla sit amet tristique lacus. Etiam blandit ex vitae mauris gravida.</p>
<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Read</a>
</div>
</div>
</div>
</div>
</div> <!-- row -->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>
<div class="row">
<section id="tm-section-3" class="tm-section">
<div class="tm-container text-xs-center">
<h2 class="blue-text tm-title">Lorem ipsum dolor sit amet</h2>
<p class="margin-b-5">Etiam at rhoncus nisl. Nunc rutrum ac ante euismod cursus.</p>
<p>Suspendisse imperdiet feugiat massa nex iaculis.</p>
<div class="tm-img-grid">
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-01.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <!-- 300x200 -->
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-07.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-07.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-02.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-02.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-09.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-09.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-03.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-03.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-08.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-08.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-10.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-10.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-04.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-04.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-05.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-05.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-11.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-11.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-06.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-06.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
<div class="tm-gallery-img-container">
<a href="img/tm-450x300-12.jpg" class="tm-gallery-img-link">
<img src="img/tm-450x300-12.jpg" alt="Image" class="img-fluid tm-gallery-img">
</a>
</div>
</div>
</div>
</section>
</div> <!-- row -->
<div class="row gray-bg">
<section id="tm-section-4" class="tm-section">
<div class="tm-container">
<h2 class="blue-text tm-title text-xs-center">Contact Us</h2>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
<form action="index.html" method="post" class="tm-contact-form">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
<input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name" required/>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">
<input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email" required/>
</div>
<div class="form-group">
<input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject" required/>
</div>
<div class="form-group">
<textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required></textarea>
</div>
<button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button>
</form>
</div> <!-- col -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50">
<h3 class="light-blue-text tm-subtitle">Etiam at rhoncus nisl</h3>
<p>Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis</p>
<p>
Tel: <a href="tel:0100200340">010-020-0340</a><br>
Email: <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
</section>
<!-- footer -->
<footer class="tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-footer-text">Copyright &copy; 2016 Company Name.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
</div>
</footer>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function(){
var mobileTopOffset = 54;
var desktopTopOffset = 80;
var topOffset = desktopTopOffset;
if($(window).width() <= 767) {
topOffset = mobileTopOffset;
}
/* Single page nav
-----------------------------------------*/
$('#tmNavbar').singlePageNav({
'currentClass' : "active",
offset : topOffset,
'filter': ':not(.external)'
});
/* Handle nav offset upon window resize
-----------------------------------------*/
$(window).resize(function(){
if($(window).width() <= 767) {
topOffset = mobileTopOffset;
}
else {
topOffset = desktopTopOffset;
}
$('#tmNavbar').singlePageNav({
'currentClass' : "active",
offset : topOffset,
'filter': ':not(.external)'
});
});
/* Collapse menu after click
-----------------------------------------*/
$('#tmNavbar a').click(function(){
$('#tmNavbar').collapse('hide');
});
/* Turn navbar background to solid color starting at section 2
---------------------------------------------------------------*/
var target = $("#tm-section-2").offset().top - topOffset;
if($(window).scrollTop() >= target) {
$(".tm-navbar-container").addClass("bg-inverse");
}
else {
$(".tm-navbar-container").removeClass("bg-inverse");
}
$(window).scroll(function(){
if($(this).scrollTop() >= target) {
$(".tm-navbar-container").addClass("bg-inverse");
}
else {
$(".tm-navbar-container").removeClass("bg-inverse");
}
});
/* Smooth Scrolling
* https://css-tricks.com/snippets/jquery/smooth-scrolling/
--------------------------------------------------------------*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - topOffset
}, 1000);
return false;
}
}
});
/* Magnific pop up
------------------------- */
$('.tm-img-grid').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery: {enabled:true}
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/XiaoXiaoChengXuYuang/blog.git
[email protected]:XiaoXiaoChengXuYuang/blog.git
XiaoXiaoChengXuYuang
blog
博客
master

搜索帮助