【div+css模板专题模板】Flato大屏扁平化响应式简历作品网页模板_灰色 蓝色 宽屏 扁平化 响应式 简历 设计师 案例 展示 作品 单页 清爽 跳转 bootstrap 手机 css3 html5 fix头部 专题。
42套div+css模板专题模板（各种风格和行业应用网站模板和单页模板）打包下载：
https://download.csdn.net/download/hmz856/87846559
其中一个效果图如下：
index.html的源码如下：
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--><head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Flato - Responsive Resume, Personal Portfolio Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--main style-->
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<!--background slider style-->
<link rel="stylesheet" type="text/css" href="css/slideshow.css" />
<!--google font style-->
<link href='#css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
<!--font-family: 'Open Sans', sans-serif;-->
<!-- font css style-->
<link rel="stylesheet" href="css/font-awesome.css">
<!--for slider style-->
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head><body>
<!--wrapper start-->
<div class="wrapper" id="wrapper">
<header>
<!--banner start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadd" style="height:100%">
<!--background slide show start-->
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
</ul>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
<div class="bannerText container">
<h1>I'm Jonathan Doe</h1>
<h2>Design & Build Beautiful Crafted Web Experiences</h2>
</div>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper">
<div class="container">
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">Menu</a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="menuItem active"><a href="#wrapper">Home</a></li>
<li class="menuItem"><a href="#aboutme">About</a></li>
<li class="menuItem"><a href="#technical">Skills</a></li>
<li class="menuItem"><a href="#exprience">Experience</a></li>
<li class="menuItem"><a href="#education">Education</a></li>
<li class="menuItem"><a href="#protfolio">Portfolio</a></li>
<li class="menuItem"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
</header>
<!--about me start-->
<section class="aboutme" id="aboutme">
<div class="container">
<div class="heading">
<h2>About me</h2>
<p>A small introduction about my self</p>
</div>
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
<h3>Jonathan Doe</h3>
<h4 class="subHeading">Webdesigner & Web Developer from Melbourne</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>nulla pariatur.uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#" class="bntDownload">Download Printable Resume</a> </div>
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-1 col-lg-offset-1 proPic"> <img src="http://placehold.it/295x295&text=image1" alt="" class="img-circle topmar"> </div>
</div>
</div>
</section>
<!--about me end-->
<!--technical start-->
<section class="technical" id="technical">
<div class="container">
<div class="heading">
<h2>Technical Skills</h2>
<p>I can say i’m quite good at</p>
</div>
<div class="row">
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="90"> <span class="percent"></span> </span>
<h4>Photoshop</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="80"> <span class="percent"></span> </span>
<h4>Illustrator</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="80"> <span class="percent"></span> </span>
<h4>Flash</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="75"> <span class="percent"></span> </span>
<h4>HTML5 / CSS3</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="60"> <span class="percent"></span> </span>
<h4>jQuery</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-md-4 col-lg-4 skillsArea">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 skills"> <span class="chart skilBg" data-percent="65"> <span class="percent"></span> </span>
<h4>PHP / MySQL</h4>
<p>Donec accumsan ligula vitae mag na curabitur id</p>
</div>
</div>
</div>
</div>
</section>
<!--technical end-->
<!--exprience start-->
<section class="exprience" id="exprience">
<div class="container">
<div class="heading">
<h2>Work Experience</h2>
<p>My previous associations</p>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Mar,2011<br>
Present</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>UIzards</h4>
<h5>Senior UX Designer</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Mar,2011<br>
Present</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>Lexind</h4>
<h5>Visual / UI Designer</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Mar,2011<br>
Present</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>Matrix Media</h4>
<h5>Visual / UI Designer</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
</div>
</section>
<!--exprience end-->
<!--education start-->
<section class="education" id="education">
<div class="container">
<div class="heading">
<h2>Education & Diplomas</h2>
<p>What I have done in my academic career</p>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Mar,2010</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>Master Degree of Design</h4>
<h5>University of Design</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Sept, 2007</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>Bachelor of Arts</h4>
<h5>University of Design</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
<div class="row workDetails">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<div class="workYear">Feb, 2005</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 rightArea">
<div class="arrowpart"></div>
<div class="exCon">
<h4>Master Degree of Design</h4>
<h5>University of Design</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</div>
</div>
</section>
<!--education end-->
<div class="copyrights">Collect from <a href="http://www.moobnn.com/" >免费模板</a></div>
<!--protfolio start-->
<section class="protfolio" id="protfolio">
<div class="container">
<div class="heading">
<h2>Portfolio</h2>
<p>showcase of my latest works</p>
</div>
<div class="portfolioFilter">
<ul>
<li><a href="#" data-filter="*" class="current">All</a></li>
<li><a href="#" data-filter=".photos">Photos</a></li>
<li><a href="#" data-filter=".branding">Branding</a></li>
<li><a href="#" data-filter=".illustration">Illustration</a></li>
</ul>
</div>
<ul class="portfolioContainer row">
<li class="photos col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/1.jpg" title="Project Title1" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image1" alt="" > </div>
</li>
<li class="branding illustration col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/2.jpg" title="Project Title2" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image2" alt="" > </div>
</li>
<li class="illustration col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/3.jpg" title="Project Title3" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image3" alt="" > </div>
</li>
<li class="branding illustration col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/4.jpg" title="Project Title4" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image4" alt="" > </div>
</li>
<li class="illustration photos col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/5.jpg" title="Project Title5" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image5" alt="" > </div>
</li>
<li class="branding photos col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/6.jpg" title="Project Title6" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image6" alt="" > </div>
</li>
<li class="illustration photos col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/7.jpg" title="Project Title7" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image7" alt="" > </div>
</li>
<li class="branding col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="lightCon"> <span class="hoverBox"> <span class="smallIcon"> <a rel="lightbox-demo" href="images/portfolio/big/8.jpg" title="Project Title8" class="zoom lb lb_warsaw1"><i class="fa fa-search fa-2x"></i></a> <a href="#" title="Project Link" target="_blank" class="linKed"><i class="fa fa-link fa-2x"></i></i></a> </span> </span> <img src="http://placehold.it/450x450&text=image8" alt="" > </div>
</li>
</ul>
</div>
</section>
<!--protfolio end-->
<!--contact start-->
<section class="contact" id="contact">
<div class="container topCon">
<div class="heading">
<h2>Get In Touch</h2>
<p>Please feel free if you would like to have a chat.</p>
</div>
</div>
<div class="row mapArea">
map
</div>
</section>
<section class="contactDetails">
<div class="container">
<!--contact info start-->
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-4">
<h4>Contact details</h4>
<p> <i class="fa fa-map-marker fa-lg"></i> Collins Street West Victoria 8007 Australia</p>
<p> <i class="fa fa-mobile fa-lg"></i> +1800 1234 56789</p>
<p> <i class="fa fa-envelope-o "></i> <a href="mailto:support@websitename.com">support@websitename.com</a></p>
<p> <i class="fa fa-link "></i> <a href="www.websitename.com">www.websitename.com</a></p>
</div>
<!--contact info end-->
<!--contact form start-->
<div class="col-xs-12 col-sm-9 col-md-8 col-lg-8 conForm">
<h4>Shoot a message!</h4>
<div id="message"></div>
<form method="post" action="php/contact.php" name="cform" id="cform">
<input name="name" id="name" type="text" class="col-xs-12 col-sm-6 col-md-6 col-lg-6" placeholder="Your name..." >
<input name="email" id="email" type="email" class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 noMarr" placeholder="Your email..." >
<textarea name="comments" id="comments" cols="" rows="" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" placeholder="Your message..."></textarea>
<input type="submit" id="submit" name="send" class="submitBnt" value="Send message">
<div id="simple-msg"></div>
</form>
</div>
<!--contact form end-->
</div>
</section>
<!--contact end-->
<!--footer start-->
<section class="footer" id="footer">
<div class="container">
<ul>
<li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-rss fa-2x"></i></a></li>
</ul>
</div>
</section>
<!--footer end-->
</div>
<!--wrapper end-->
<!--modernizr js-->
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<!--jquary min js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<!--for custom jquary-->
<script src="js/custom.js"></script>
<!--for placeholder jquary-->
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<!--for menu jquary-->
<script type="text/javascript" src="js/stickUp.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class
$('.navbar-wrapper').stickUp({
parts: {
0: 'banner',
1: 'aboutme',
2: 'technical',
3: 'exprience',
4: 'education',
5: 'protfolio',
6: 'contact'
},
itemClass: 'menuItem',
itemHover: 'active',
topMargin: 'auto'
});
});
$( ".navbar.navbar-inverse.navbar-static-top a" ).click(function() {
$( ".navbar-collapse" ).addClass( "hideClass" );
});
$( ".navbar.navbar-inverse.navbar-static-top a" ).click(function() {
$( ".navbar-collapse" ).addClass( "collapse" );
});
$( ".navbar.navbar-inverse.navbar-static-top a" ).click(function() {
$( ".navbar-collapse" ).removeClass( "in" );
});
$( ".navbar-toggle" ).click(function() {
$( ".navbar-collapse" ).removeClass( "hideClass" );
});
});
</script>
<!--for portfoli filter jquary-->
<script src="js/jquery.isotope.js" type="text/javascript"></script>
<!--for portfoli lightbox -->
<link type="text/css" rel="stylesheet" id="theme" href="css/jquery-ui-1.8.16.custom.css">
<link type="text/css" rel="stylesheet" href="css/lightbox.min.css">
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.rlightbox.js"></script>
<!--for skill chat jquary-->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.easypiechart.js"></script>
<!--contact form js-->
<script type="text/javascript" src="js/jquery.contact.js"></script>
</body>
</html>这里整理了42套div+css模板专题模板，有各种风格和行业应用网站模板和单页模板，下面是模板的目录，先睹为快。
Flato大屏扁平化响应式简历作品网页模板灰色蓝色宽屏扁平化响应式简历设计师案例展示作品单页清爽跳转
标准博客专题推广css模板下载标准博客专题推广.rar
E橙色导航简洁极致专题推广-CSS3模板(3色)_橙色css3 html5博客菜单简洁标准英文國角.rar
大学毕业季单页专题模板是一款大气简单的HTML 单页网站模板下载.rar
已粉色别墅物业公司简单网站模板粉色别墅物业中介单页简单专题bootstrap 手机响应式,rar
个性精美风格CSS网站模板是一款窄屏设计风格的CSS专题页网站模板 .rar
黑色导航简单标准专题css3模板 博客标准菜单css3专题简单,rar
E色导航简洁响应式专题展示网站模板黑色导航简洁响应式专题展示css3页手机.rar
黑色头部英文博客css3模板下载_灰色css3 html5博客标准菜单html专题.rar
灰色标准博客专题模板下载 灰色标准博客专题html简单,rar
灰色搞怪万圣节css模板_灰色搞怪万圣节专题标准.rar
蓝色简洁=栏博客模板下载(2色).蓝色标准=栏博客专题rar
汇蓝色窄屏单页专题模板是一款使用CSS设计的,适合用作专题页网站模板下载.rar
摩托赛车手活动专题企业网站模板摩托赛车赛车手专题活动红色色车企业整站w3 bootstrap 手机响应式.rar
已漂亮的设计行业作品案例单页跳转模板墨绿色漂亮设计个性博客设计师行业作品案例单面跳转专题html5.rar
浅蓝色会议专题网站模板是- 款htmI5模板,适合团队会议专题模板下载.rar
深棕色老照片复古bootstrap专题模板深棕色棕色个性单页跳转照片复古专题bootstrap手机响应式.rar
涂漆色彩专题页面模板是一款CSS模板，适合做专 题页面网站模板下载.rar
窄屏单页专题页div+css模板是一款实用的专题页网站模板下载.rar
专题页面网站模板下载是一款Happy new year新年快乐专题页模板下载.rar
紫色简洁时尚网站模板是一款简洁清爽的适合专题页面网站模板 下载.rar
直接在CSDN平台下就行：
https://download.csdn.net/download/hmz856/87846559
