验证中...
Languages: HTML
Categories: CSS 技巧
Latest update 2019-03-26 12:02
gistfile1.txt
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traveling</title>
<link rel="shortcut icon" href="./favicon.png" />
<link href="css/templatemo_style.css" rel="stylesheet">
</head>
<body>
<div class="banner" id="templatemo_banner_slide">
<ul>
<li class="templatemo_banner_slide_01">
<div class="slide_caption">
<h1>我的最爱</h1>
<p>旅行,其实是需要具有一些流浪精神的,这种精神使人能在旅行中和大自然更加接近,悠然享受和大自然融合之乐。旅行,有一种苍凉,“浮云游子意,落日故人情”,孑然一身,隐入苍茫自然,自有一种孤独的意味;旅行,更有一种逍遥,浑然忘我,与大自然交融的境界令人心弛神往。</p>
</div>
</li>
</ul>
</div>
<div id="templatemo_mobile_menu">
<ul class="nav nav-pills nav-stacked">
<li><a href="#templatemo_banner_slide"><i class="glyphicon glyphicon-home"></i> &nbsp; Home</a></li>
<li><a href="#templatemo_about"><i class="glyphicon glyphicon-briefcase"></i> &nbsp; About</a></li>
<li><a href="#templatemo_events"><i class="glyphicon glyphicon-bullhorn"></i> &nbsp; Events</a></li>
<li><a href="#templatemo_timeline"><i class="glyphicon glyphicon-calendar"></i> &nbsp; Timeline</a></li>
</ul>
</div>
<div class="container_wapper">
<div id="templatemo_banner_menu">
<div class="container-fluid">
<div class="col-xs-4 templatemo_logo">
<a rel="nofollow" href="https://www.cnblogs.com/CLFTing/" target="_blank">
<img src="images/templatemo_logo.jpg" id="logo_img" alt="dragonfruit free html5 template" />
<h1 id="logo_text">Lang<span>.com</span></h1>
</a>
</div>
<div class="col-sm-8 hidden-xs">
<ul class="nav nav-justified">
<li><a href="#templatemo_banner_slide">首页</a></li>
<li><a href="#templatemo_events">景点</a></li>
<li><a href="#templatemo_timeline">推荐路线</a></li>
</ul>
</div>
<div class="col-xs-8 visible-xs">
<a href="#" id="mobile_menu"><span class="glyphicon glyphicon-th-list"></span></a>
</div>
</div>
</div>
</div>
<div class="copyrights">Powered by<a href="http://www.cssmoban.com/" >QHU</a></div>
<div id="templatemo_events" class="container_wapper">
<div class="container-fluid">
<h1>景点</h1>
<div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0">
<div class="event_box_wap event_animate_left">
<div class="event_box_img">
<img src="images/templatemo_event_01.jpg" class="img-responsive" alt="Web Design Trends" />
</div>
<div class="event_box_caption">
<h1>安徽旅游</h1>
<p><span class="glyphicon glyphicon-map-marker"></span> 安徽安庆&nbsp;&nbsp; <span class="glyphicon glyphicon-time"></span> 4月 到 6月 </p>
<p>安徽是一大旅游的好地方,4月到6月是绝佳的旅游时机,具体好在哪里,我也不知道。安徽大地锦绣多姿,文化古迹甚多,安徽是中国旅游资源最丰富的省份之一。</p>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0">
<div class="event_box_wap event_animate_right">
<div class="event_box_img">
<img src="images/templatemo_event_02.jpg" class="img-responsive" alt="Free Bootstrap Seminar" />
</div>
<div class="event_box_caption">
<h1>河南旅游</h1>
<p><span class="glyphicon glyphicon-map-marker"></span> 河南 &nbsp;&nbsp; <span class="glyphicon glyphicon-time"></span> 5月 到 6月 </p>
<p>河南是一大旅游的好地方,5月到6月是绝佳的旅游时机,具体好在哪里,我也不知道,请自行查阅相关资料</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0">
<div class="event_box_wap event_animate_left">
<div class="event_box_img">
<img src="images/templatemo_event_03.jpg" class="img-responsive" alt="" />
</div>
<div class="event_box_caption">
<h1>湖北旅游</h1>
<p><span class="glyphicon glyphicon-map-marker"></span> 湖北仙桃 &nbsp;&nbsp; <span class="glyphicon glyphicon-time"></span> 7月 到 8月 </p>
<p>湖北是中国中部的一个省,在东周时期存在的强大的楚国之后,有着名的“楚”。悠久灿烂的历史赋予了该省丰富的文化景点,包括黄鹤楼,荆州城墙,明代仙陵陵墓和武当山古建筑群</p>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0">
<div class="event_box_wap event_animate_right">
<div class="event_box_img">
<img src="images/templatemo_event_04.jpg" class="img-responsive" alt="" />
</div>
<div class="event_box_caption">
<h1>旅游</h1>
<p><span class="glyphicon glyphicon-map-marker"></span> 四川南充 &nbsp;&nbsp; <span class="glyphicon glyphicon-time"></span> 11月 到 12月</p>
<p>四川好玩的景点有很多:像九寨沟、黄龙景区、阆中古城、若尔盖草原等等。她们主要就是做品质自由行,全程很注重品质</p>
</div>
</div>
</div>
</div>
</div>
<div id="templatemo_timeline" class="container_wapper">
<h1>安徽旅游推荐路线</h1>
<div class="container-fluid">
<div class="time_line_wap">
<div class="time_line_caption">第一天</div>
<div class="time_line_paragraph">
<h1>黄山 </h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游办陈总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a>&nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">3 评论</a>
</p>
<p>黄山雄踞于中国安徽省南部,是蜚声中外的旅游胜地,黄山与黄河、长江、长城齐名,成为中华民族的又一象征。1990年12月被联合国教科文组织列入“世界文化与自然遗产”名录,令世人神往。以“奇松、怪石、云海、温泉”四绝而闻名于世。她是中国十大风景名胜中唯一的山岳风景区,作为中国山之代表,黄山集中国名山之大成,自古就有“五岳归来不看山,黄山归来不看岳”的说法。黄山还兼有“天然动物园和天下植物园”之称</p>
</div>
</div>
<div class="time_line_wap">
<div class="time_line_caption">第三天</div>
<div class="time_line_paragraph">
<h1>宏村</h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游办王总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">2 评论</a>
</p>
<p>宏村,位于黄山南麓黟县东北部,是古黟桃花源里一座奇特的牛形水系古村落,被誉为“中国画里乡村”。南宋绍兴年间,宏村人独具匠心开仿生学之先河,建造出堪称“中国一绝”的人工水系村落</p>
</div>
</div>
<div class="time_line_wap">
<div class="time_line_caption">第六天</div>
<div class="time_line_paragraph">
<h1>九华山</h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游凡总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">3 评论</a>
</p>
<p>九华山位于安徽省池州市境内,是以佛教文化和自然与人文胜景为特色的山岳型国家级风景名胜区,是中国佛教四大名山之一、国家首批5A级旅游景区、国家首批自然与文化双遗产地,安徽省“两山一湖”</p>
</div>
</div>
<div class="time_line_wap">
<div class="time_line_caption">第九天</div>
<div class="time_line_paragraph">
<h1>黄山市古徽州文化旅游区</h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游办党总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">6 评论</a>
</p>
<p>古徽州文化旅游区位于徽文化发祥地安徽省黄山市,由徽州古城、牌坊群鲍家花园、唐模、潜口民宅、呈坎五大精品景区组成,北依黄山,南接千岛湖。徽州古城是徽州府治所在地,是保存最为完好的中国四大古城之一。</p>
</div>
</div>
<div class="time_line_wap">
<div class="time_line_caption">第十二天</div>
<div class="time_line_paragraph">
<h1>龙川风景名胜区</h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游办王总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a>&nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">4 评论</a>
</p>
<p>龙川是坑口村古称,村前有龙须山,村中有一条小溪(称川)穿村而过,古称龙川。后人认为小溪(又称坑)出口流入登源大河,龙可以畅溪,故改为坑口。这个传说至今仍在百姓中流传。距绩溪县城约10公里,是一个古老的徽州村落。</p>
</div>
</div>
<div class="time_line_wap">
<div class="time_line_caption">第15天</div>
<div class="time_line_paragraph">
<h1>徽州古城</h1>
<p>
<span class="glyphicon glyphicon-user"></span> <a href="#">旅游办马总</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> &nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span> <a href="#">5 评论</a>
</p>
<p>徽州古城——坐落在国家历史文化名城歙县县城徽城镇中心,千年徽州府治所在地,主体建筑有仁和楼、得月楼、茶楼、惠风石坊、徽园第一楼、过街楼、古戏楼等以及镶嵌其间的古色古香商品住宅楼百余间,是展示和体现徽州文化的重要实物建筑。徽州“一府六县”格局始于唐大历五年(770年)。</p>
</div>
</div>
</div>
</div>
<div id="templatemo_footer">
<div>
<p>Copyright &copy; CL 谢谢观赏</p>
</div>
</div>
</body>
</html>
/*************************style.css********************************/
body {
font-family: 'Century Gothic', sans-serif;
}
.container-fluid {
max-width: 1600px;
}
.container_wapper {
width: 100%;
background: #c0c0c0;
}
.rcolor {
background: #f00;
}
.gcolor {
background: #0f0;
}
.bcolor {
background: #00f;
}
h1 {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
font: normal normal normal 34px/60px 'Century Gothic', sans-serif;
color: #3b3b3b;
}
.templatemo_logo a:hover {
text-decoration: none;
}
/*菜单样式*/
#templatemo_mobile_menu {
top: 0;
width: 250px;
height: 100%;
background: #f9f9f9;
position: fixed;
z-index: 5500;
right: -1500px;
display: none;
overflow: auto;
}
#templatemo_mobile_menu ul li a {
text-align: left;
background: #f15556;
color: #000;
}
#templatemo_mobile_menu ul li:hover a {
background: #c83233;
color: #fff;
}
#templatemo_banner_menu {
width: 100%;
background: #f9f9f9;
height: 94px;
border-bottom: 1px solid #f15556;
position: fixed;
top: 0;
z-index: 5000;
}
#templatemo_banner_menu #logo_img {
max-height: 90px;
float: left;
}
#templatemo_banner_menu #logo_text {
font: normal normal normal 36px/1em 'Century Gothic', sans-serif;
margin-top: 30px;
padding-left: 60px;
text-align: left;
color: #e35354;
}
#templatemo_banner_menu #logo_text span {
color: #9fb038;
}
#templatemo_banner_menu ul li a:hover ,
#templatemo_banner_menu ul li a.current
{
background-position: 0 0px ;
background-color: #f15556;
color: #ffffff;
}
#templatemo_banner_menu #mobile_menu {
padding-top: 25px;
font-size: 30px;
float: right;
color: #e35354;
}
/*景点栏目的样式*/
#templatemo_events {
background: #6698b5;
float: left;
overflow: hidden;
}
#templatemo_events h1{
color: #fff;
}
#templatemo_events .event_box_wap {
overflow:hidden;
margin-bottom: 30px;
cursor: pointer;
position: relative;
}
#templatemo_events .event_box_wap .event_box_img {
position: relative;
top: 0;
}
#templatemo_events .event_box_wap .event_box_caption {
position: relative;
top: 0;
padding-bottom: 10px;
background: #fff;
width: 100%;
border-top: 3px solid #3c6f8c;
}
#templatemo_events .event_box_wap h1,
#templatemo_events .event_box_wap p {
margin: 0;
color: #000000;
text-align: left;
}
#templatemo_events .event_box_wap p {
padding: 5px 20px 15px 20px;
}
#templatemo_events .event_box_wap h1 {
padding: 20px 20px 20px 20px;
font-size: 24px;
line-height: 24px;
}
/*推荐路线的css样式*/
#templatemo_timeline {
background: #fff;
float: left;
}
#templatemo_timeline .container-fluid {
max-width: 1600px;
position: absolute;
margin: auto;
margin-bottom: 80px;
background: url("../images/time_line_bg.jpg") repeat-y center top;
}
#templatemo_timeline .time_line_wap {
position: absolute;
display: none;
}
#templatemo_timeline .time_line_caption {
background: #f15556;
padding: 10px 20px 10px 20px ;
border-radius: 5px;
height: 40px;
clear: both;
color: #fff;
}
#templatemo_timeline .time_line_paragraph {
background: #e6e6e6;
padding: 10px;
border-radius: 5px;
width: 100%;
margin-top: 50px;
font-family: 'Century Gothic', sans-serif;
}
#templatemo_timeline .time_line_paragraph a {
color: #000;
text-decoration: underline;
}
#templatemo_timeline .left_timeline {
margin-left: 30px;
}
#templatemo_timeline .left_timeline .time_line_caption {
float: right;
margin-right: 0px;
}
#templatemo_timeline .right_timeline .time_line_caption {
float: left;
}
#templatemo_timeline .time_line_paragraph h1 {
text-align: left;
margin: 0;
font-size: 24px;
line-height: 30px;
color: #000;
padding: 20px 20px 20px 20px;
}
#templatemo_timeline .time_line_paragraph p {
padding: 0px 20px 20px 20px;
text-align: left;
margin: 0;
font-size: 14px;
line-height: 2em;
color: #000;
}
#templatemo_timeline .left_timer {
float: right;
background: url("../images/arrow_left.png") 0 5px;
}
#templatemo_timeline .right_timer {
float: left;
background: url("../images/arrow_right.png") 0px 5px;
}
#templatemo_timeline .left_timer ,
#templatemo_timeline .right_timer {
padding-left:30px;
width: 101px;
position: absolute;
}
#templatemo_timeline .left_timer span,
#templatemo_timeline .right_timer span {
border-radius: 20px;
width: 30px;
height: 30px;
background: #e6e6e6;
text-align: center;
color: #fff;
font-size: 24px;
padding-top: 3px;
margin-top: 3px;
}
/*网页底部的样式*/
#templatemo_footer {
width: 100%;
border-top: 2px solid #507f9a;
height: 70px;
background: #447693;
float: left;
}
#templatemo_footer p {
padding-top: 20px;
color: #fff;
text-align: center;
}
#templatemo_footer a {
color: #fff;
text-decoration: underline;
}
/* Small devices (tablets, 768px and up) */
@media (max-width: 768px ) {
#templatemo_about .pre_next {
font-size: 15px;
}
#templatemo_timeline .right_timer {
background-position: center center;
}
}
/* Medium devices (desktops, 992px and up) */
@media (max-width: 970px ) {
#templatemo_timeline .right_timer {
background-position: 100px 5px;
}
#templatemo_banner_menu #logo_text {
font: normal normal normal 30px/1em 'Century Gothic', sans-serif;
}
#templatemo_timeline .container-fluid {
background: url("../images/time_line_bg.jpg") repeat-y 28px 0;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px ) {
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search