一个用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. php开启redis

    看下自己phpinfo的信息 php 5.5以下的都有这些文件 到这个地方下载所需要的文件:https://github.com/nicolasff/phpredis/downloads 下载解压   ...

  2. opencv 中的mat类（非原创）

    Mat最大的优势跟STL很相似,都是对内存进行动态的管理,不需要之前用户手动的管理内存,Mat这个类有两部分数据.一个是matrix header(矩阵头),这部分的大小是固定的,包含矩阵的大小,存储 ...

  3. ActiveMQ Message Groups

    http://activemq.apache.org/message-groups.html 与Exclusive Consumer相比,Message Groups的对消息分组的粒度更细.具有相同g ...

  4. CentOS和AIX查看系统序列号

    一.CentOS查看系统序列号 dmidecode -t dmidecode--将DMI数据库中的信息解码,以可读的文本方式显示:该命令需要root权限. -t 1--DMI数据库包含包括BIOS.系 ...

  5. python(2)之列表

    列表的使用 names=["zhangyang","liming",["sese","popo"],"xiao ...

  6. pl/sql 如何将Excel文件数据导入oracle的数据表？

    1.准备导入数据的excel文件 注意:excel列名和数据表列名必须相同,excel文件sheet2和sheet3可以删除 1)excel文件格式 2)数据表格式 2.打开pl/sql ,找到工具- ...

  7. learning ddr mode register MR0

  8. Java实现随机生成车牌号

    String[] citys = {"津","京","宁"}; String sectionNamePre = "断面" ...

  9. Bluedroid: 音频数据的传输流程

    一. UIPC:   Audio Flinger获取到a2dp的hw module,然后蓝牙协议栈有专用于发送和接收media数据的线程,名称:btif_media_task.   蓝牙与Audio的 ...

  10. 深入理解java虚拟机---java虚拟机内存管理(六)

    java虚拟机栈的理解 虚拟机栈就是我们所熟知的栈内存,栈内存属于线程独有的.而在栈内存中的局部变量表中存储的引用类型只是存储对象的内存地址.对象的创建在堆内存中,即对象在线程共享区中. 局部变量表: ...