一个用HTML和CSS写的简单登录页面，主要是用CSS来进行修饰美化的

这个登陆界面有输入账号和密码的表单，还有登陆和注册两个按键，点击按键分别会输出“您已成功登陆，稍后会跳转到您需要的页面~”，“您已成功注册，稍后会跳转到您需要的页面~”

PS：个人搭配略差，如果读者有什么好的搭配方案或者建议请不吝赐教，在此先谢过了~

<!DOCTYP html>

<html>

    <head>

    <meta charset="utf-8">

    <title>我的一个道姑朋友</title>

    <style type="text/css">

    body {

        background-image:url(1.jpg) ;

        background-size: 100%;

    }

    input {

    color:black;

    border:none;

    border-bottom:1px solid;

    width:230px;

    height:30px;

    background-color:pink;

    position:absolute;

    opacity:0.5;

        filter:Alpha(opacity=50);

    }

    h4 {

    position:absolute;

    left:20%;

    }

    #aa {

        width:400px;

        height:405px;

        background-repeat:no-repeat;

        background-image:url(2.jpg) ;

        position:absolute;

        top:10%;

        left:35%;

    }

    #bb {

        width:100%;

        height:40%;

        background-color:pink;

        position:relative;

        top:70%;

        opacity:0.5;

        filter:Alpha(opacity=50);

    }

    #cc {

        position:absolute;

        background-image:url(3.jpg) ;

        top:10%;

        left:10%;

        width:100px;

        height:100px;

        background-size: 100%;

    }

    #dd {

        position:absolute;

        top:90%;

        left:41%;

    }

    #yu {

        color:DarkOrchid;

        position:absolute;

        top:20%;

        left:30%;

        font-size:40px;

    }

    #jing {

        color:Tomato;

        position:absolute;

        top:50%;

        left:60%;

        font-size:20px;

    }

    #denglu {

    position:absolute;

    background-image:url(4.jpg) ;

    background-size: 100%;

    top:65%;

    left:30%;

    width:60px;

        height:50px;

    }

    #zhuce {

    position:absolute;

    background-image:url(4.jpg) ;

    background-size: 100%;

    float:left;

    top:65%;

        left:60%;

        width:60px;

        height:50px;

    }

    p.namea {

        position:absolute;

        top:10%;

        left:20%;

    }

    p.nameb {

        position:absolute;

        top:30%;

        left:20%;

    }

    #mima {

    position:absolute;

    top:-5px;

    left:100%;

    }

    #zhanghao {

    position:absolute;

    top:-5px;

    left:100%;

    }

    a:hover {

        color :red;

        border-bottom:1px solid;

    }

    </style>

    </head>

    <body>

        <script type="text/javascript">

            function aaaa()

            {

                alert("您已成功登陆，稍后会跳转到您需要的页面~");

            }

            function bbbb()

            {

                alert("您已成功注册，稍后会跳转到您需要的页面~");

            }

        </script>

        <div id="aa">

            <h5 id="yu">檐上四月雨</h5>

            <p id="jing">---人间惊鸿客</p>

            <div id="bb">

                <form>

                <p class="namea">账号:<input type="text" id="zhanghao" placeholder="请输入账号"/></p>

                <p class="nameb">密码:<input type="text" id="mima" placeholder="请输入密码"/></p>

                </form>

                <div id="denglu" onclick="aaaa()"><h4>登陆</h4></div>

                <div id="zhuce" onclick="bbbb()"><h4>注册</h4></div>

            </div>

            <div id="cc"></div>

        </div>

        <h2 id="dd">2017.06.22&nbsp&nbsp<a href="#" class="sd">LJMZ</h2>

    </body>

</html>

效果图：

点击登陆：

点击注册：

登陆网页模板 - 1 （HTML+CSS）的更多相关文章

  1. 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板

    30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载

  2. 假日旅游CSS网页模板

    假日旅游CSS3网页模板,蓝色,旅游,假日,公司,设计,主页,HTML,DIV+CSS,模板下载. http://www.huiyi8.com/lvyoumuban/css/

  3. Html+css 一个简单的网页模板

    一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  4. （转）dedecms网页模板编写

    网页模板就是templets中的htm文件,所以编写模板就是要编写html.这篇文章不是关于标签的具体使用,而是对网页模板的一些理解.包括基本的标签语法,封面模板,列表模板和文档模板的关系. 一 关于 ...

  5. Django加载静态网页模板

    Django加载静态网页模板 步骤: 第一步:在子系统blog根目录下新建模版目录templates,里面新建一个login.html <!DOCTYPE html> <html l ...

  6. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  7. HTML5--应用网页模板

    因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100+,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家 ...

  8. Python3 登陆网页并保持cookie

    网页登陆 网页登陆的原理都是,保持一个sessionid在cookie然后,根据sessionid在服务端找到cookie进行用户识别 python实现 由于python的简单以及丰富的类库是开发网络 ...

  9. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

随机推荐

  1. Spring + Mybatis项目实现数据库读写分离

    主要思路:通过实现AbstractRoutingDataSource类来动态管理数据源,利用面向切面思维,每一次进入service方法前,选择数据源. 1.首先pom.xml中添加aspect依赖 & ...

  2. 牛客练习赛32 A/B/C

    https://ac.nowcoder.com/acm/contest/272/A v<=k时  答案就是k个1 否则贪心的从中间向两边添加1 #include<bits/stdc++.h ...

  3. git status 查看当前修改文件

    可以查看当前已经修改的文件.

  4. 利用NPOI解析Excel的通用类

    using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using NPOI. ...

  5. 依赖注入 IOC

    首先,明确下IoC是什么东西: 控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控 ...

  6. java中super和this的使用

    要说super就先要说this."this",作为一个特殊的关键字,它的规则如下: 1.可以表示构造函数传递.this(a,b)表示调用另外一个构造函数.这里面的this就是一个特 ...

  7. https 不会被中间人攻击——因为中间人即使拿到了数据，也是加密的

    只要你登陆了一个使用 HTTPS 数据加密的网站,浏览的页面的内容如果被人中途看见,将会是一团乱码.它也能保证,你浏览的页面就是你想浏览的,不会被黑客在中途修改,网站收到的数据包也是你最初发的那个,不 ...

  8. PyCharm+Miniconda3安装配置教程

    PyCharm是Python著名的Python集成开发环境(IDE) conda有Miniconda和Anaconda,前者应该是类似最小化版本,后者可能是功能更为强大的版本,我们这里安装Minico ...

  9. 关于RabbitMQ服务器整合(二)

    准备工作 15min IDEA maven 3.0 在开始构建项目之前,机器需要安装rabbitmq,你可以去官网下载,http://www.rabbitmq.com/download.html ,如 ...

  10. 一次jenkins的错误

    描述:我svn修改了一个类的名称,然后构建到jenkins发现,原来的类还在然后和现在的类一起冲突 解决:清理工作空间 然后重新部署即可.