博主正在写自己的小企业网站，用了自己的树莓派+内网穿透，但是网站还没写好，不至于空着，于是在网上摘了一份“网站正在建设”的模板，进行了一些更改，在这里放一份。资源共享，大家也可以一起使用。
赠送一份“网站正在建设”的HTML5模板
其中Facter是你的企业或网站的名称，另外的大家自己更改吧。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Facter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://a-oss.zmki.cn/img/5c86fcfc8fe5b.css" rel="stylesheet" type="text/css" media="screen and (min-width:769px)">
<link rel="stylesheet" href="https://cdn.webfont.youziku.com/webfonts/nomal/128084/47844/5c83cf49f629d806a46ebcba.css">
<link rel="stylesheet" href="https://cdn.webfont.youziku.com/webfonts/nomal/128084/28621/5c844ee0f629d804346ff9ed.css">
<link rel="stylesheet" href="https://a-oss.zmki.cn/img/5c864c1c53b90.css">
<link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/28595/5c86fa42f629d80398467484.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/41243/5c86fa46f629d80398467485.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/28595/5c86fa42f629d80398467484.css' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico">
<link rel="apple-touch-icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico">
<link rel="apple-touch-icon" sizes="72x72" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico">
<link rel="apple-touch-icon" sizes="114x114" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico">
<link rel="bookmark" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico">
<link rel="icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico" type="image/x-icon">
</head>
<body class="start" id="body">
<div id="awd-site-wrap" class="bg bg-home">
<div id="bg">
<div id="overlay">
<div class="awd-site-bg bg-home active" style="left:735px;top:15px">
</div>
<div class="awd-site-bg bg-subscribe" style="left:816px;top:15px">
</div>
<div class="awd-site-bg bg-about">
</div>
<div class="awd-site-bg bg-contact">
</div>
<div class="awd-site-bg bg-services">
</div>
</div>
<canvas id="awd-site-canvas" width="1203" height="890"></canvas>
</div>
<header id="awd-site-header">
<div id="awd-site-logo" class="animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500">
<h1 style="font-family:'ActionJackson'; font-size: 42px;margin-top: 6px;"><a class="go-slide" data-slide="home"><span>Facter</span><span></span><span></span></a></h1>
</div>
<button class="menu-toggle animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500" data-role="toggle"><span></span><span></span><span></span></button><nav id="awd-site-nav" class="navigation animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500">
<div class="nav-container">
<ul>
<li><a href="" data-slide="home" class="active">首页</a></li>
<li><a href="" data-slide="about">关于</a></li>
<li><a href="" data-slide="services">服务</a></li>
<li><a href="" data-slide="contact">联系我们</a></li>
</ul>
</div>
<p class="mbbq" id="zt" style="margin-top: -100px;font-family:'Jackey_HandWrite';font-size: 32px;">© 2019</p>
</nav></header><main id="awd-site-main"><section id="awd-site-content">
<div class="sections-block ps-container" data-ps-id="0048d35c-c355-f2d9-50fd-ee4ed9e0992c">
<div class="slides">
<div class="slides-wrap">
<div class="slide-item active" data-slide-id="home">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="slide-content">
<div class="row">
<div class="col-lg-6 col-md-6 svm">
</div>
<div class="col-lg-5 col-lg-offset-1 col-md-6 svm">
<div class="section-info text-right">
<h2 class="section-title text-default animated fadeIn visible" data-animation="fadeIn" data-animation-delay="50">欢迎访问！<br>
功能即将上线</h2>
<p class="animated fadeIn visible" data-animation="fadeIn" data-animation-delay="55">
团员正在努力编写网站<br>
请耐心等待，谢谢！
</p>
<a href="" class="btn go-slide animated fadeIn visible" data-animation="fadeIn" data-animation-delay="60" data-slide="about">更多资料</a> <a href="https://www.UOMG.COM/gaunyvliuyanban" class="btn btn-inverse go-slide animated fadeIn visible" data-animation="fadeIn" data-animation-delay="60" data-slide="contact">联系我们!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-item" data-slide-id="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="slide-content">
<div class="row">
<div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm">
<div class="section-info text-right">
<h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="60">关于我们</h2>
<p class="animated" data-animation="fadeIn" data-animation-delay="100">
专注于无偿的网页研发！
</p>
</div>
</div>
<div class="col-md-5 col-md-pull-7 svm">
<div class="section-info text-left">
<div class="features-list">
<div class="featured-item animated" data-animation="fadeIn" data-animation-delay="150">
<div class="featured-text">
<h3><i class="fa fa-rocket"></i> 安全高效</h3>
<p>
多年的网页编写积累与创新，树立在学生领域网页编写的标杆地位。
</p>
</div>
</div>
<div class="featured-item">
<div class="featured-item animated" data-animation="fadeIn" data-animation-delay="150">
<div class="featured-text">
<h3><i class="fa fa-briefcase"></i> 高性能</h3>
<p>
在网页编写行业有几年的技术研发和运营维护经验，掌握高性能处理技术。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-item" data-slide-id="services">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="slide-content">
<div class="row">
<div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm">
<div class="section-info text-right">
<h2 class="section-title text-default animated" data-animation="fadeIn">我们的服务</h2>
<p class="animated" data-animation="fadeIn" data-animation-delay="100">
我们还正在努力研发助理学习、科技与信息发展的服务内容，敬请期待！
</p>
</div>
</div>
<div class="col-md-5 col-md-pull-7 svm">
<div class="section-info text-left">
<div class="service animated" data-animation="fadeIn" data-animation-delay="150">
<h3>网页聊天</h3>
<p>
即时通讯，一秒送达！
</p>
</div>
<div class="service animated" data-animation="fadeIn" data-animation-delay="150">
<h3>网页博客</h3>
<p>
程序员、码农的专属免费使用优惠！
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-item" data-slide-id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="slide-content">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-md-6 col-md-push-6 svm">
<div class="section-info text-right">
<h2 class="section-title text-default animated" data-animation="fadeIn">联系我们</h2>
<div class="contact-info">
<p class="contact-item">
<i class="fa fa-phone"></i> QQ：暂无团队QQ
</p>
<p class="contact-item">
<i class="fa fa-envelope"></i>邮箱(Email)：facter13@outlook.com<a href="mailto:facter13@outlook.com" title="Send an email" class="icon fa-envelope-o11"></a>
</p>
<p class="contact-item">
<i class="fa fa-map-marker"></i> 中国
</p>
</div>
<p class="animated" data-animation="fadeIn" data-animation-delay="100">
</p>
<h3>即时通讯 码农博客</h3>
<h5>为你码农与程序员定制的服务平台</h5>
<p>
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-md-pull-6 svm">
<div class="section-info text-left" id="zt">
<form id="contact-form" class="contact-form" id="zt">
<div class="row">
<div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200" id="zt">
<input type="text" name="contact-name" placeholder="真实姓名" class="contact-form-name required" id="zt">
</div>
<div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200">
<input type="email" name="contact-email" placeholder="电子邮箱" class="contact-form-email required">
</div>
<div class="col-lg-4 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200">
<input type="text" name="contact-subject" placeholder="从事行业" class="contact-form-subject required">
</div>
<div class="col-md-12 animated" data-animation="fadeIn" data-animation-delay="150">
<textarea name="contact-message" placeholder="说两句吧..." class="contact-form-message required" rows="4"></textarea><button class="btn btn-block" type="submit" id="submit" name="submit"><span>提交留言</span><i class="fa fa-send"></i></button>
</div>
</div>
<div class="contact-notice">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ps-scrollbar-x-rail" style="left:0;bottom:3px">
<div class="ps-scrollbar-x" style="left:0;width:0">
</div>
</div>
<div class="ps-scrollbar-y-rail" style="top:0;right:3px">
<div class="ps-scrollbar-y" style="top:0;height:0">
</div>
</div>
</div>
</section></main><footer id="awd-site-footer">
<div class="copyright animated fadeInUp visible" data-animation="fadeInUp" data-animation-delay="500">
<p class="pcbq" id="zt" style="font-family:'Jackey_HandWrite';font-size: 32px;">© 2021 Facter</p>
</div>
</footer>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e42e2a64.js"></script>
<script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e599a7ea.js"></script>
<script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e7053ea4.js"></script>
</div>
</body>
</html>
片段有些长，请原谅！（暂时没有预览，请到本地打开预览）
版权声明：本文为wsyear原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。