项目：新春烟花登录页项目 

作品描述：新春烟花登录页模板HTML+CSS+JavaScript。主要包括的页面有设置，登录，下载，个人信息，忘记密码，播放，工具等多个页签。

视频链接：​​​​​​​入职半年就被升职？只因做了这款登录页html+css+js

实现技术：CSS+HTML+JS+H5+CSS3+jQuery；

作品演示

1.网站首页

 2.展开

3.点击页签之后

 4.登录弹窗

目录结构

 

代码展示

 <style type="text/css">
    div.jGrowl div.manilla {

      background-color: #FFF1C2;

      color: navy;

    }



    div.jGrowl div.smoke {

      background: url('images/smoke.png') no-repeat;

      -moz-border-radius: 0px;

      -webkit-border-radius: 0px;

      width: 298px;

      height: 73px;

      overflow: hidden;

    }



    div.jGrowl div.flora {

      background: #E6F7D4 url(flora-notification.png) no-repeat;

      -moz-border-radius: 0px;

      -webkit-border-radius: 0px;

      opacity: 1;

      filter: alpha(opacity=100);

      width: 270px;

      height: 90px;

      padding: 0px;

      overflow: hidden;

      border-color: #5ab500;

    }



    div.jGrowl div.flora div.message {

      padding: 5px;

      color: #000;

    }



    div.jGrowl div.flora div.header {

      background: url(flora-header.png) no-repeat;

      padding: 5px;

    }



    div.jGrowl div.flora div.close {

      background: url(flora-close.png) no-repeat;

      padding: 5px;

      color: transparent;

      padding: 0px;

      margin: 5px;

      width: 17px;

    }



    div.jGrowl div.iphone {

      font-family: "Helvetica Neue", "Helvetica";

      font-size: 12px;

      background: url(iphone.png) no-repeat;

      -moz-border-radius: 0px;

      -webkit-border-radius: 0px;

      opacity: .90;

      filter: alpha(opacity=90);

      width: 235px;

      height: 137px;

      overflow: hidden;

      border-color: #5ab500;

      color: #fff;

    }



    div.jGrowl div.iphone .jGrowl-close {

      padding-right: 20px;

    }



    div.jGrowl div.iphone div.message {

      padding-top: 0px;

      padding-bottom: 7px;

      padding-left: 15px;

      padding-right: 15px;

    }



    div.jGrowl div.iphone div.header {

      padding: 7px;

      padding-left: 15px;

      padding-right: 15px;

      font-size: 17px;

    }



    div.jGrowl div.iphone div.close {

      display: none;

    }



    div#random {

      width: 1000px;

      background-color: red;

      line-height: 60px;

    }
  </style>

  <div id="test2" class="bottom-left"></div>



  <div id="Loading" class="demo-3 demo-dark"
    style="z-index:10002;position:fixed;margin-left:47%;margin-top:9%;display:none;">

    <div class="container">



      <section class="main">

        <!-- the component -->

        <ul class="bokeh">

          <li></li>

          <li></li>

          <li></li>

          <li></li>

        </ul>

      </section>

    </div>

  </div>

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要可在公z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~