码云链接:https://gitee.com/wei_mei/codes/iv6hmaj7w89yz35r01g2d33
原网页截图:
模仿网页截图:
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>青海旅游景点</title> <meta name="keywords" content="青海旅游景点"> <meta name="description" content="青海旅游景点"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" href="images/favicon.ico"> <!-- include main css --> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link href="font-awesome-4.5.0/css/font-awesome.min.css" rel=‘stylesheet‘ type=‘text/css‘ media="all" /> <link rel="stylesheet" type="text/css" href="css/animate.css"/> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script> <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <!--header--> <header class="header home_p"> <div class="container"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div> <a href="#mmenu" class="phone-nav"><i class="fa fa-list"></i></a> <div class="logo_right"> <nav class="nav"> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a> <ul> <li><a href="court_travel.html">茶艺中心</a></li> <li><a href="court_travel.html">群山临海</a></li> <li><a href="court_travel.html">创意中心</a></li> <li><a href="court_travel.html">花草园艺</a></li> </ul> </li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a> <ul> <li><a href="news.html">公司新闻</a></li> <li><a href="news.html">行业新闻</a></li> </ul> </li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> <div class="search"> <span class="sea_x"> <input type="" name="" id="" placeholder="请输入关键词"> <i class="fa fa-search"></i> </span> <span class="y_z"> <a href="" class="zh active">中</a><a href="" class="en">En</a> </span> </div> </div> </div> </header> <!--banner start--> <section class="banner"> <div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div> <div><a href="index.html"><img src="images/banner2.jpg" alt=""></a></div> <div><a href="index.html"><img src="images/banner3.jpg" alt=""></a></div> </section> <!--banner end--> <div class="jqgk"> <div class="contai"> <div class="top_tit"> <span class="span1"><a href="scenic_overview.html">景区概况</a></span><br /> <span class="span2">SCENIC OVERVIEW</span> </div> <p class="wow bounceIn"> 青海省为我国青藏高原上的重要省份之一,因境内有全国最大的内陆咸水湖──青海湖,而得省名。青海省简称青,是长江、黄河、澜沧江的发源地,被誉为“江河源头”、“中华水塔”。 青海自然风光雄奇壮美,具有青藏高原特色。距今六,七千年前,古代先民们就繁衍生息在这片土地上。斗转星移,沧桑变换。以古墓群,古寺庙,古岩画,古城堡为特征的名胜古迹众多。汉,藏,回,蒙古,土,哈萨克,撒拉等民族都有着悠久的历史和优秀的文化传统,保持着独特的,丰富多彩的民族风情和习俗。青海旅游资源丰富,类型繁多。 青海湖是中国最大的内陆咸水湖,面积4573平方公里,湖面高出海平面3,260米,是泰山顶峰的2倍。湖水最深处为32米。湖中有鸟岛,海心山,海西山,三槐石和沙岛。可供游客游览。鸟岛在青海湖的西部,面积约1平方公里每年春季有约10万只从中国南方和东南亚以及印度半岛飞来的十多种候鸟在这里繁衍生息甚为壮观,其集群繁殖密度之大,为亚洲罕见。 </p> <div class="xia_x"> <span class="img"></span> </div> </div> </div> <div class="wyzl"> <div class="top_tit"> <span class="span1"><a href="court_travel.html">青海之旅</a></span><br /> <span class="span2">COURT TRAVEL</span> </div> <ul class="clearfix"> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_1.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(一)</a> </li> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_2.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(二)</a> </li> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_3.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(三)</a> </li> </ul> </div> <!--wyzl end--> <div class="syzz"> <div class="top_tit"> <span class="span1"><a href="scenic_overview.html">舒雅住宅</a></span><br /> <span class="span2">COMFORTABLE RESIDENTIAL</span> </div> <div class="syzz_con clearfix"> <div class="left"> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> </div> <div class="right"> <img src="images/fang.png" alt="" /> <div class="fang_t"> <span>客 |</span> <span>房 |</span> <span>介 |</span> <span>绍</span> </div> <div class="fang_c"> 青海西宁有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求… </div> <div class="pr_ne clearfix"> <span class="pr"> 上一个 </span> <span class="ne"> 下一个 </span> </div> </div> </div> <div class="xia_x"> <span class="img"></span> </div> </div> <!--syzz end--> <div class="home_news"> <div class="news_con"> <div class="top_tit"> <span class="span1"><a href="news.html">新闻动态</a></span><br /> <span class="span2">NEWS</span> </div> <ul> <li class="clearfix wow bounceIn"> <div class="news_left"> <a href="news.html">暑假去哪玩?青海天地避暑甚好!</a> <p> 暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山 ,感受大千世界,少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。 </p> </div> <div class="news_right"> <span>07.21</span> <time>2016</time> </div> </li> <li class="clearfix wow bounceIn"> <div class="news_left"> <a href="news.html">花落流水春又去</a> <p> 春暖花开,青海天地精品大咖云集,活动丰富。不仅有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟。这可把青海宝宝们忙坏了,不过没关系,累并快乐着,青海宝宝非常欢迎大家的到来…… </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> <li class="clearfix"> <div class="news_left"> <a href="news.html">青海湖历史传说</a> <p> 1000多年前,唐蕃联姻,文成公主远嫁吐蕃王松赞干布。临行前,唐王赐给她能够照出家乡景象的日月宝镜。途中,公主思念起家乡,便拿出日月宝镜,果然看见了久违的家乡长安。她泪如泉涌。 然而,公主突然记起了自己的使命,便将日月宝镜扔出手去,没想到那宝镜落地时闪出一道金光,变成了青海湖。 </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> <li class="clearfix"> <div class="news_left"> <a href="news.html">这是我们想去的地方</a> <p> 春暖花开,青海天地精品大咖云集,活动丰富。不仅 有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟。 这可把青海宝宝们忙坏了,不过没关系,累并快乐着,青海宝宝非常欢迎大家的到来…… </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> </ul> <a href="news.html" class="more">MORE</a> </div> </div> <!--footer start--> <footer class="footer"> <div class="footer_con"> <div class="con"> <div class="nei"> <div class=""> <ul class="di_nav clearfix"> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a></li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a></li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> <div class="links">友情链接 <ul> <li><a href="">百度文化</a></li> <li><a href="">新浪微博</a></li> <li><a href="">百度知道</a></li> </ul> </div> </div> <div class="clear"></div> <div class="lian"> 电话:<a href="tel:021-31265245">021-31265245</a><br /> 邮箱:<a href="mailto:Eason.wang@71360.com">Eason.wang@71360.com</a><br /> 手机:<a href="tel:189 1610 1908">189 1610 1908</a><br /> </div> </div> </div> </div> </footer> <!--footer end--> <!--移动端 Mmenu--> <nav id="mmenu"> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a> <ul> <li><a href="court_travel.html">茶艺中心</a></li> <li><a href="court_travel.html">群山临海</a></li> <li><a href="court_travel.html">创意中心</a></li> <li><a href="court_travel.html">花草园艺</a></li> </ul> </li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a> <ul> <li><a href="news.html">公司新闻</a></li> <li><a href="news.html">行业新闻</a></li> </ul> </li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> </div> <!--Include Js--> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!--移动端导航--> <script src="js/jquery.mmenu.all.min.js" type="text/javascript" charset="utf-8"></script> <!--slick--> <script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/wow.js" type="text/javascript" charset="utf-8"></script> <!--placeholder--> <script src="js/jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(‘input, textarea‘).placeholder(); }); </script> <script src="js/public.js" type="text/javascript" charset="utf-8"></script> <!--<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>--> </body> </html>
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>青海旅游景点</title> <meta name="keywords" content="青海旅游景点"> <meta name="description" content="青海旅游景点"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" href="images/favicon.ico"> <!-- include main css --> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link href="font-awesome-4.5.0/css/font-awesome.min.css" rel=‘stylesheet‘ type=‘text/css‘ media="all" /> <link rel="stylesheet" type="text/css" href="css/animate.css"/> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script> <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <!--header--> <header class="header home_p"> <div class="container"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div> <a href="#mmenu" class="phone-nav"><i class="fa fa-list"></i></a> <div class="logo_right"> <nav class="nav"> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a> <ul> <li><a href="court_travel.html">茶艺中心</a></li> <li><a href="court_travel.html">群山临海</a></li> <li><a href="court_travel.html">创意中心</a></li> <li><a href="court_travel.html">花草园艺</a></li> </ul> </li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a> <ul> <li><a href="news.html">公司新闻</a></li> <li><a href="news.html">行业新闻</a></li> </ul> </li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> <div class="search"> <span class="sea_x"> <input type="" name="" id="" placeholder="请输入关键词"> <i class="fa fa-search"></i> </span> <span class="y_z"> <a href="" class="zh active">中</a><a href="" class="en">En</a> </span> </div> </div> </div> </header> <!--banner start--> <section class="banner"> <div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div> <div><a href="index.html"><img src="images/banner2.jpg" alt=""></a></div> <div><a href="index.html"><img src="images/banner3.jpg" alt=""></a></div> </section> <!--banner end--> <div class="jqgk"> <div class="contai"> <div class="top_tit"> <span class="span1"><a href="scenic_overview.html">景区概况</a></span><br /> <span class="span2">SCENIC OVERVIEW</span> </div> <p class="wow bounceIn"> 青海省为我国青藏高原上的重要省份之一,因境内有全国最大的内陆咸水湖──青海湖,而得省名。青海省简称青,是长江、黄河、澜沧江的发源地,被誉为“江河源头”、“中华水塔”。 青海自然风光雄奇壮美,具有青藏高原特色。距今六,七千年前,古代先民们就繁衍生息在这片土地上。斗转星移,沧桑变换。以古墓群,古寺庙,古岩画,古城堡为特征的名胜古迹众多。汉,藏,回,蒙古,土,哈萨克,撒拉等民族都有着悠久的历史和优秀的文化传统,保持着独特的,丰富多彩的民族风情和习俗。青海旅游资源丰富,类型繁多。 青海湖是中国最大的内陆咸水湖,面积4573平方公里,湖面高出海平面3,260米,是泰山顶峰的2倍。湖水最深处为32米。湖中有鸟岛,海心山,海西山,三槐石和沙岛。可供游客游览。鸟岛在青海湖的西部,面积约1平方公里每年春季有约10万只从中国南方和东南亚以及印度半岛飞来的十多种候鸟在这里繁衍生息甚为壮观,其集群繁殖密度之大,为亚洲罕见。 </p> <div class="xia_x"> <span class="img"></span> </div> </div> </div> <div class="wyzl"> <div class="top_tit"> <span class="span1"><a href="court_travel.html">青海之旅</a></span><br /> <span class="span2">COURT TRAVEL</span> </div> <ul class="clearfix"> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_1.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(一)</a> </li> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_2.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(二)</a> </li> <li class="wow bounceIn"> <a href="court_travel.html"><img src="images/home_3.png" alt="" class="vcenter" /><i></i></a> <a href="court_travel.html">群山临海(三)</a> </li> </ul> </div> <!--wyzl end--> <div class="syzz"> <div class="top_tit"> <span class="span1"><a href="scenic_overview.html">舒雅住宅</a></span><br /> <span class="span2">COMFORTABLE RESIDENTIAL</span> </div> <div class="syzz_con clearfix"> <div class="left"> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> <div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div> </div> <div class="right"> <img src="images/fang.png" alt="" /> <div class="fang_t"> <span>客 |</span> <span>房 |</span> <span>介 |</span> <span>绍</span> </div> <div class="fang_c"> 青海西宁有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求… </div> <div class="pr_ne clearfix"> <span class="pr"> 上一个 </span> <span class="ne"> 下一个 </span> </div> </div> </div> <div class="xia_x"> <span class="img"></span> </div> </div> <!--syzz end--> <div class="home_news"> <div class="news_con"> <div class="top_tit"> <span class="span1"><a href="news.html">新闻动态</a></span><br /> <span class="span2">NEWS</span> </div> <ul> <li class="clearfix wow bounceIn"> <div class="news_left"> <a href="news.html">暑假去哪玩?青海天地避暑甚好!</a> <p> 暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山 ,感受大千世界,少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。 </p> </div> <div class="news_right"> <span>07.21</span> <time>2016</time> </div> </li> <li class="clearfix wow bounceIn"> <div class="news_left"> <a href="news.html">花落流水春又去</a> <p> 春暖花开,青海天地精品大咖云集,活动丰富。不仅有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟。这可把青海宝宝们忙坏了,不过没关系,累并快乐着,青海宝宝非常欢迎大家的到来…… </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> <li class="clearfix"> <div class="news_left"> <a href="news.html">青海湖历史传说</a> <p> 1000多年前,唐蕃联姻,文成公主远嫁吐蕃王松赞干布。临行前,唐王赐给她能够照出家乡景象的日月宝镜。途中,公主思念起家乡,便拿出日月宝镜,果然看见了久违的家乡长安。她泪如泉涌。 然而,公主突然记起了自己的使命,便将日月宝镜扔出手去,没想到那宝镜落地时闪出一道金光,变成了青海湖。 </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> <li class="clearfix"> <div class="news_left"> <a href="news.html">这是我们想去的地方</a> <p> 春暖花开,青海天地精品大咖云集,活动丰富。不仅 有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟。 这可把青海宝宝们忙坏了,不过没关系,累并快乐着,青海宝宝非常欢迎大家的到来…… </p> </div> <div class="news_right"> <span>05.25</span> <time>2016</time> </div> </li> </ul> <a href="news.html" class="more">MORE</a> </div> </div> <!--footer start--> <footer class="footer"> <div class="footer_con"> <div class="con"> <div class="nei"> <div class=""> <ul class="di_nav clearfix"> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a></li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a></li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> <div class="links">友情链接 <ul> <li><a href="">百度文化</a></li> <li><a href="">新浪微博</a></li> <li><a href="">百度知道</a></li> </ul> </div> </div> <div class="clear"></div> <div class="lian"> 电话:<a href="tel:021-31265245">021-31265245</a><br /> 邮箱:<a href="mailto:Eason.wang@71360.com">Eason.wang@71360.com</a><br /> 手机:<a href="tel:189 1610 1908">189 1610 1908</a><br /> </div> </div> </div> </div> </footer> <!--footer end--> <!--移动端 Mmenu--> <nav id="mmenu"> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="scenic_overview.html">景区概况</a></li> <li><a href="court_travel.html">青海之旅</a> <ul> <li><a href="court_travel.html">茶艺中心</a></li> <li><a href="court_travel.html">群山临海</a></li> <li><a href="court_travel.html">创意中心</a></li> <li><a href="court_travel.html">花草园艺</a></li> </ul> </li> <li><a href="comfortable.html">舒雅住宅</a></li> <li><a href="news.html">新闻动态</a> <ul> <li><a href="news.html">公司新闻</a></li> <li><a href="news.html">行业新闻</a></li> </ul> </li> <li><a href="feedback.html">留言中心</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> </div> <!--Include Js--> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!--移动端导航--> <script src="js/jquery.mmenu.all.min.js" type="text/javascript" charset="utf-8"></script> <!--slick--> <script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/wow.js" type="text/javascript" charset="utf-8"></script> <!--placeholder--> <script src="js/jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(‘input, textarea‘).placeholder(); }); </script> <script src="js/public.js" type="text/javascript" charset="utf-8"></script> <!--<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>--> </body> </html>
原文:https://www.cnblogs.com/wangguiqing/p/10627912.html