html门户网站模板(源码)
xcLeigh
已于 2022-12-12 22:24:06 修改
阅读量1.1w
收藏
43
点赞数
6
已于 2022-12-12 22:24:06 修改
阅读量1.1w
收藏
43
点赞数
6
于 2022-12-12 22:22:52 首次发布
文章目录
- 1.设计来源
- 1.1 官网首页
- 1.2 公司服务产品界面
- 1.3 公司职位界面
- 1.4 关于我们界面
- 1.5 联系我们界面
- 2.结构源码
- 2.1 动态界面效果
- 2.2 目录结构
- 2.3 源代码
- 源码下载
作者： xcLeigh
文章地址： https://blog.csdn.net/weixin_43151418/article/details/128293940
html门户网站模板(源码)html门户网站模板(源码)，包括主页，公司服务界面，公司产品界面，联系我们界面，关于公司界面，404界面，可以支持所有公司的门户网站，支持扩展，界面酷炫，直接使用。
1.设计来源
1.1 官网首页
1.2 公司服务产品界面
1.3 公司职位界面
1.4 关于我们界面
1.5 联系我们界面
更多内容见底部源码，点击下载，所有源码资源都在里面。
2.结构源码
2.1 动态界面效果
html门户网站模板(源码)
2.2 目录结构
2.3 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | 北京xcLeigh科技有限公司</title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body class="homepage">
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-4">
<div class="top-number"><p><i class="fa fa-phone-square"></i> +0123 456 70 90</p></div>
</div>
<div class="col-sm-6 col-xs-8">
<div class="social">
<ul class="social-share">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
<div class="search">
<form role="form">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/bg1.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
<div class="slider-img">
<img src="images/slider/img1.png" class="img-responsive">
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg2.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
<div class="slider-img">
<img src="images/slider/img2.png" class="img-responsive">
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg3.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
<div class="slider-img">
<img src="images/slider/img3.png" class="img-responsive">
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
<section id="feature" >
<div class="container">
<div class="center wow fadeInDown">
<h2>Features</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-bullhorn"></i>
<h2>Fresh and Clean</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-comments"></i>
<h2>Retina ready</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-cloud-download"></i>
<h2>Easy to customize</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-leaf"></i>
<h2>Adipisicing elit</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-cogs"></i>
<h2>Sed do eiusmod</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-heart"></i>
<h2>Labore et dolore</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#feature-->
<section id="recent-works">
<div class="container">
<div class="center wow fadeInDown">
<h2>Recent Works</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a> </h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme </a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme </a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme </a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme </a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme </a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#recent-works-->
<section id="services" class="service-item">
<div class="container">
<div class="center wow fadeInDown">
<h2>Our Service</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services1.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services2.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services3.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services4.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services5.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services6.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#services-->
<section id="middle">
<div class="container">
<div class="row">
<div class="col-sm-6 wow fadeInDown">
<div class="skill">
<h2>Our Skills</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="progress-wrap">
<h3>Graphic Design</h3>
<div class="progress">
<div class="progress-bar color1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
<span class="bar-width">85%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3>HTML</h3>
<div class="progress">
<div class="progress-bar color2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
<span class="bar-width">95%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3>CSS</h3>
<div class="progress">
<div class="progress-bar color3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="bar-width">80%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3>Wordpress</h3>
<div class="progress">
<div class="progress-bar color4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
<span class="bar-width">90%</span>
</div>
</div>
</div>
</div>
</div><!--/.col-sm-6-->
<div class="col-sm-6 wow fadeInDown">
<div class="accordion">
<h2>Why People like us?</h2>
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading active">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
Lorem ipsum dolor sit amet
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="media accordion-inner">
<div class="pull-left">
<img class="img-responsive" src="images/accordion1.png">
</div>
<div class="media-body">
<h4>Adipisicing elit</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
Lorem ipsum dolor sit amet
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">
Lorem ipsum dolor sit amet
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">
Lorem ipsum dolor sit amet
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseFour1" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
</div><!--/#accordion1-->
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#middle-->
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Responsive Web Design</a></li>
<li class="active"><a href="#tab2" data-toggle="tab" class="analistic-02">Premium Plugin Included</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="tehnical">Predefine Layout</a></li>
<li class=""><a href="#tab4" data-toggle="tab" class="tehnical">Our Philosopy</a></li>
<li class=""><a href="#tab5" data-toggle="tab" class="tehnical">What We Do?</a></li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/tab2.png">
</div>
<div class="media-body">
<h2>Adipisicing elit</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.</p>
</div>
</div>
</div>
<div class="tab-pane fade active in" id="tab2">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/tab1.png">
</div>
<div class="media-body">
<h2>Adipisicing elit</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<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.</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
</div>
<div class="tab-pane fade" id="tab5">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures,</p>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
<div class="col-xs-12 col-sm-4 wow fadeInDown">
<div class="testimonial">
<h2>Testimonials</h2>
<div class="media testimonial-inner">
<div class="pull-left">
<img class="img-responsive img-circle" src="images/testimonials1.png">
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
<span><strong>-John Doe/</strong> Director of corlate.com</span>
</div>
</div>
<div class="media testimonial-inner">
<div class="pull-left">
<img class="img-responsive img-circle" src="images/testimonials1.png">
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
<span><strong>-John Doe/</strong> Director of corlate.com</span>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#content-->
<section id="partner">
<div class="container">
<div class="center wow fadeInDown">
<h2>Our Partners</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="partners">
<ul>
<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms" src="images/partners/partner1.png"></a></li>
<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" src="images/partners/partner2.png"></a></li>
<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms" src="images/partners/partner3.png"></a></li>
<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms" src="images/partners/partner4.png"></a></li>
<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1500ms" src="images/partners/partner5.png"></a></li>
</ul>
</div>
</div><!--/.container-->
</section><!--/#partner-->
<section id="conatcat-info">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="pull-left">
<i class="fa fa-phone"></i>
</div>
<div class="media-body">
<h2>Have a question or need a custom quote?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123 456 70 80</p>
</div>
</div>
</div>
</div>
</div><!--/.container-->
</section><!--/#conatcat-info-->
<section id="bottom">
<div class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>Company</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">We are hiring</a></li>
<li><a href="#">Meet the team</a></li>
<li><a href="#">Copyright</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>Support</h3>
<ul>
<li><a href="#">Faq</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Refund policy</a></li>
<li><a href="#">Ticket system</a></li>
<li><a href="#">Billing system</a></li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>Developers</h3>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO Marketing</a></li>
<li><a href="#">Theme</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Email Marketing</a></li>
<li><a href="#">Plugin Development</a></li>
<li><a href="#">Article Writing</a></li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>Our Partners</h3>
<ul>
<li><a href="#">Adipisicing Elit</a></li>
<li><a href="#">Eiusmod</a></li>
<li><a href="#">Tempor</a></li>
<li><a href="#">Veniam</a></li>
<li><a href="#">Exercitation</a></li>
<li><a href="#">Ullamco</a></li>
<li><a href="#">Laboris</a></li>
</ul>
</div>
</div><!--/.col-md-3-->
</div>
</div>
</section><!--/#bottom-->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="https://blog.csdn.net/weixin_43151418" title="xcLiegh">xcLiegh</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<ul class="pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</footer><!--/#footer-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
</body>
</html>
源码下载
html门户网站模板(源码) 点击下载
💞 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有）， https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址： https://blog.csdn.net/weixin_43151418/article/details/128293940（防止抄袭，原文地址不可删除）
扫一扫
511
全栈领域优质创作者
到【灌水乐园】发言
奋斗的小媛: 感激作者能够与我们分享这篇极具启发性的文章💖📚，它为我提供了宝贵的知识和新的视角🌟。文章的内容丰富、结构清晰，让人读后深受启发🔍。对于任何对此领域感兴趣的读者来说，这篇文章都是一份不可多得的资源📖。期待更多这样的文章，以便我们可以持续学习和成长🌱
发挥一次: 这篇文章实在是太棒了！内容丰富，论述清晰，代码实例更是琳琅满目，让人阅读起来津津有味。博主的专业素养和用心程度从中可见一斑，无疑为读者提供了一笔宝贵的知识财富。 文章从基础概念出发，由浅入深地阐述了编程的核心思想。在阅读过程中，我感受到了博主对编程的热爱和敬业精神，他/她用通俗易懂的语言，将复杂的编程知识讲解得淋漓尽致。这使得读者在阅读过程中既能够掌握知识，又能够保持兴趣。
星空下的月光影子: 这篇文章实在是太棒了！内容丰富，论述清晰，代码实例更是琳琅满目，让人阅读起来津津有味。博主的专业素养和用心程度从中可见一斑，无疑为读者提供了一笔宝贵的知识财富。 文章从基础概念出发，由浅入深地阐述了编程的核心思想。在阅读过程中，我感受到了博主对编程的热爱和敬业精神，他/她用通俗易懂的语言，将复杂的编程知识讲解得淋漓尽致。这使得读者在阅读过程中既能够掌握知识，又能够保持兴趣。
星空下的月光影子: 这篇文章实在是太棒了！内容丰富，论述清晰，代码实例更是琳琅满目，让人阅读起来津津有味。博主的专业素养和用心程度从中可见一斑，无疑为读者提供了一笔宝贵的知识财富。 文章从基础概念出发，由浅入深地阐述了编程的核心思想。在阅读过程中，我感受到了博主对编程的热爱和敬业精神，他/她用通俗易懂的语言，将复杂的编程知识讲解得淋漓尽致。这使得读者在阅读过程中既能够掌握知识，又能够保持兴趣。
倔强的石头_: 博主的文章真的太赞了！文章内容通俗易懂，大大提高了我对这个话题的理解。每次都能学到很多新知识，感谢博主的用心分享。期待更多精彩的内容！博主的干货文章一直都是我学习的首选，加油！