非常好看的闭站单页面网站源码

原创 新起点博客  2020-06-16 14:17 
【上云必备】上云仅?102/年

昨天在一个技术群里碰见一个女生想要一个打开首页以后看到其他页面,也就是我们所说的关闭站点,在群里看到还有个人说帮她弄,最后也没有管,我就默默的联系了一下那个女生问了她一下看她弄好了没有结果没有,于是.....废话不多说了,直接上干货。

代码如下:

<!DOCTYPE html>
<html lang='zh-cn'>
    <head>
        <meta charset='UTF-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>系统维护-新起点博客</title>
        <style>
            .zm {font-size:13px;width:340px;margin-left: -20px;}
.zm1 {color:#007BFF;}
html,body {height:90%;margin:0;padding:0;}
body {font-family:'Microsoft YaHei';align-items:center;}
a {text-decoration:none;}
#container {max-width:700px;flex-basis:100%;margin:0 auto;background:#FFF;box-shadow:0 0 30px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 30px rgba(0,0,0,0.3);overflow:hidden;}
<!-- url图片路径内替换为自己想要的图 -->
#container #hero-img {width:100%;height:400px;background: #333; background: url("http://www.lehuisou.com/wp-content/uploads/2020/06/202006151301495.png") center 0px repeat-x;}
#container #profile-img {width:140px;height:140px;margin:-80px auto 0 auto;border:6px solid #FFF;border-radius:50%;box-shadow:0 0 5px rgba(90,90,90,0.3);}
#container #profile-img img {width:100%;border-radius:50%;}
#container #content {width:100%;margin:0 auto;padding:0 0 20px 0;}
#container #content h1 {font-size:30px;font-weight:500;margin:30px 0 0 0;}
#container #content p1 {font-size:15px;font-weight:400;line-height:1.4;color:#666;margin:15px 0 40px 0;}
#container #content a {color: darkgray; margin:0 10px;transition:color .3s ease-in-out;-webkit-transition:color .3s ease-in-out;}
#container #content a:hover {color:#007bff;}
#container #content ul {padding: 0%;}
#container #content ul li{list-style: none; text-align: center;}
#container #content li{line-height: 48px;}
.btn {background:none repeat scroll 0 0 #1BA1E2;border:0 none;border-radius:2px;color:#FFFFFF !important;cursor:pointer;font-family:"Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;font-size:14px;padding:6px 10%;}
.btn:hover,.yanshibtn:hover {background:none repeat scroll 0 0 #9B59B6;border:0 none;border-radius:2px;color:#FFFFFF!important;cursor:pointer;font-family:"Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;font-size:14px;padding:8px 10%;}
</style>
    </head>
    <body>
        <div id='container'>
            <div id='hero-img'></div>
            <div id='profile-img'>
                <!-- src图片路径内替换为自己想要的图 -->
                <img src='http://www.lehuisou.com/wp-content/uploads/2020/06/2020061513015939.jpg' />
            </div>
            <div id='content'>
                <ul>
                    <li>由于目前网盘等问题</li>
                    <li>网站暂停访问了</li>
                    
                    <!-- src图片路径内替换为自己想要的图 -->
                    <li><img align="center" style="width:150px; height: auto;" src="http://www.lehuisou.com/wp-content/uploads/2020/06/2020061512542836.jpg"></li>
                    <li>书友可以先扫码或关注公众号</li>
                    <li>获取新更书籍和网站通知</li>
                </ul>
            </div>
        </div>
        <div style="display:none;">
            <script type="text/javascript" src="https://s11.cnzz.com/z_stat.php?id=1259444303&web_id=1259444303"></script>
        </div>
        <script type="text/javascript" src="https://js.users.51.la/20820267.js"></script>
</html>

 

本文地址:https://www.henenseo.com/archives/2527
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情

  1. ChinaCreditReport
    ChinaCreditReport 【】 @回复

    学习了