门户网站源码(html门户网站模板「建议收藏」)

发布时间:2025-12-10 19:32:15 浏览次数:7

html门户网站模板「建议收藏」-门户网站源码来一品资源网

html门户网站模板(源码)「建议收藏」html门户网站模板(源码),公司网站,门户网站,个人网站,包括主页,公司服务界面,公司产品界面,联系我们界面,关于公司界面,404界面,可以支持所有公司的门户网站,支持扩展,界面酷炫,直接使用。_html网站模板源代码

文章目录

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 ><header ><p ><p ><p ><p ><p ><p><i ></i>  +0123 456 70 90</p></p></p><p ><p ><ul ><li><a href="#"><i ></i></a></li><li><a href="#"><i ></i></a></li><li><a href="#"><i ></i></a></li> <li><a href="#"><i ></i></a></li><li><a href="#"><i ></i></a></li></ul><p ><form role="form"><input type="text"  autocomplete="off" placeholder="Search"><i ></i></form></p></p></p></p></p><!--/.container--></p><!--/.top-bar--><nav  role="banner"><p ><p ><button type="button"  data-toggle="collapse" data-target=".navbar-collapse"><span >Toggle navigation</span><span ></span><span ></span><span ></span></button><a  href="index.html"><img src="images/logo.png" alt="logo"></a></p><p ><ul ><li ><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 ><a href="#"  data-toggle="dropdown">Pages <i ></i></a><ul ><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></p></p><!--/.container--></nav><!--/nav--></header><!--/header--><section  ><p ><ol ><li data-target="#main-slider" data-slide-to="0" ></li><li data-target="#main-slider" data-slide-to="1"></li><li data-target="#main-slider" data-slide-to="2"></li></ol><p ><p  style="background-image: url(images/slider/bg1.jpg)"><p ><p ><p ><p ><h1 >Lorem ipsum dolor sit amet consectetur adipisicing elit</h1><h2 >Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2><a  href="#">Read More</a></p></p><p ><p ><img src="images/slider/img1.png" ></p></p></p></p></p><!--/.item--><p  style="background-image: url(images/slider/bg2.jpg)"><p ><p ><p ><p ><h1 >Lorem ipsum dolor sit amet consectetur adipisicing elit</h1><h2 >Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2><a  href="#">Read More</a></p></p><p ><p ><img src="images/slider/img2.png" ></p></p></p></p></p><!--/.item--><p  style="background-image: url(images/slider/bg3.jpg)"><p ><p ><p ><p ><h1 >Lorem ipsum dolor sit amet consectetur adipisicing elit</h1><h2 >Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2><a  href="#">Read More</a></p></p><p ><p ><img src="images/slider/img3.png" ></p></p></p></p></p><!--/.item--></p><!--/.carousel-inner--></p><!--/.carousel--><a  href="#main-slider" data-slide="prev"><i ></i></a><a  href="#main-slider" data-slide="next"><i ></i></a></section><!--/#main-slider--><section  ><p ><p ><h2>Features</h2><p >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></p><p ><p ><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Fresh and Clean</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Retina ready</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Easy to customize</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Adipisicing elit</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Sed do eiusmod</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i><h2>Labore et dolore</h2><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3></p></p><!--/.col-md-4--></p><!--/.services--></p><!--/.row-->    </p><!--/.container--></section><!--/#feature--><section ><p ><p ><h2>Recent Works</h2><p >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></p><p ><p ><p ><img  src="images/portfolio/recent/item1.png" alt=""><p ><p ><h3><a href="#">Business theme</a> </h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item1.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   <p ><p ><img  src="images/portfolio/recent/item2.png" alt=""><p ><p ><h3><a href="#">Business theme</a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item2.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p> <p ><p ><img  src="images/portfolio/recent/item3.png" alt=""><p ><p ><h3><a href="#">Business theme </a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item3.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   <p ><p ><img  src="images/portfolio/recent/item4.png" alt=""><p ><p ><h3><a href="#">Business theme </a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item4.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   <p ><p ><img  src="images/portfolio/recent/item5.png" alt=""><p ><p ><h3><a href="#">Business theme</a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item5.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   <p ><p ><img  src="images/portfolio/recent/item6.png" alt=""><p ><p ><h3><a href="#">Business theme </a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item6.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p> <p ><p ><img  src="images/portfolio/recent/item7.png" alt=""><p ><p ><h3><a href="#">Business theme </a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item7.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   <p ><p ><img  src="images/portfolio/recent/item8.png" alt=""><p ><p ><h3><a href="#">Business theme </a></h3><p>There are many variations of passages of Lorem Ipsum available, but the majority</p><a  href="images/portfolio/full/item8.png" rel="prettyPhoto"><i ></i> View</a></p> </p></p></p>   </p><!--/.row--></p><!--/.container--></section><!--/#recent-works--><section  ><p ><p ><h2>Our Service</h2><p >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></p><p ><p ><p ><p ><img  src="images/services/services1.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p><p ><p ><p ><img  src="images/services/services2.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p><p ><p ><p ><img  src="images/services/services3.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p>  <p ><p ><p ><img  src="images/services/services4.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p><p ><p ><p ><img  src="images/services/services5.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p><p ><p ><p ><img  src="images/services/services6.png"></p><p ><h3 >SEO Marketing</h3><p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p></p></p></p>                                                </p><!--/.row--></p><!--/.container--></section><!--/#services--><section ><p ><p ><p ><p ><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><p ><h3>Graphic Design</h3><p ><p  role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 85%"><span >85%</span></p></p></p><p ><h3>HTML</h3><p ><p  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%"><span >95%</span></p></p></p><p ><h3>CSS</h3><p ><p  role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span >80%</span></p></p></p><p ><h3>Wordpress</h3><p ><p  role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 90%"><span >90%</span></p></p></p></p></p><!--/.col-sm-6--><p ><p ><h2>Why People like us?</h2><p  ><p ><p ><h3 ><a  data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Lorem ipsum dolor sit amet<i ></i></a></h3></p><p  ><p ><p ><p ><img  src="images/accordion1.png"></p><p ><h4>Adipisicing elit</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p></p></p></p></p></p><p ><p ><h3 ><a  data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">Lorem ipsum dolor sit amet<i ></i></a></h3></p><p  ><p >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.</p></p></p><p ><p ><h3 ><a  data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">Lorem ipsum dolor sit amet<i ></i></a></h3></p><p  ><p >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.</p></p></p><p ><p ><h3 ><a  data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">Lorem ipsum dolor sit amet<i ></i></a></h3></p><p  ><p >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.</p></p></p></p><!--/#accordion1--></p></p></p><!--/.row--></p><!--/.container--></section><!--/#middle--><section ><p ><p ><p ><p > <p ><p ><ul ><li ><a href="#tab1" data-toggle="tab" >Responsive Web Design</a></li><li ><a href="#tab2" data-toggle="tab" >Premium Plugin Included</a></li><li ><a href="#tab3" data-toggle="tab" >Predefine Layout</a></li><li ><a href="#tab4" data-toggle="tab" >Our Philosopy</a></li><li ><a href="#tab5" data-toggle="tab" >What We Do?</a></li></ul></p><p ><p ><p  ><p ><p ><img  src="images/tab2.png"></p><p ><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></p></p></p><p  ><p ><p ><img  src="images/tab1.png"></p><p ><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></p></p></p><p  ><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></p><p  ><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></p><p  ><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></p></p> <!--/.tab-content-->  </p> <!--/.media-body--> </p> <!--/.media-->     </p><!--/.tab-wrap-->               </p><!--/.col-sm-6--><p ><p ><h2>Testimonials</h2><p ><p ><img  src="images/testimonials1.png"></p><p ><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></p></p><p ><p ><img  src="images/testimonials1.png"></p><p ><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></p></p></p></p></p><!--/.row--></p><!--/.container--></section><!--/#content--><section ><p ><p ><h2>Our Partners</h2><p >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></p>    <p ><ul><li> <a href="#"><img  data-wow-duration="1000ms" data-wow-delay="300ms" src="images/partners/partner1.png"></a></li><li> <a href="#"><img  data-wow-duration="1000ms" data-wow-delay="600ms" src="images/partners/partner2.png"></a></li><li> <a href="#"><img  data-wow-duration="1000ms" data-wow-delay="900ms" src="images/partners/partner3.png"></a></li><li> <a href="#"><img  data-wow-duration="1000ms" data-wow-delay="1200ms" src="images/partners/partner4.png"></a></li><li> <a href="#"><img  data-wow-duration="1000ms" data-wow-delay="1500ms" src="images/partners/partner5.png"></a></li></ul></p>        </p><!--/.container--></section><!--/#partner--><section ><p ><p ><p ><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><i ></i></p><p ><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></p></p></p></p></p><!--/.container-->    </section><!--/#conatcat-info--><section ><p  data-wow-duration="1000ms" data-wow-delay="600ms"><p ><p ><p ><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></p>    </p><!--/.col-md-3--><p ><p ><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></p>    </p><!--/.col-md-3--><p ><p ><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></p>    </p><!--/.col-md-3--><p ><p ><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></p>    </p><!--/.col-md-3--></p></p></section><!--/#bottom--><footer  ><p ><p ><p >&copy; 2013 <a target="_blank" href="https://blog.csdn.net/weixin_43151418" title="xcLiegh">xcLiegh</a>. All Rights Reserved.</p><p ><ul ><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></p></p></p></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(防止抄袭,原文地址不可删除)

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477