精华内容
下载资源
问答
  • 效果图目录结构:我们做一个页面之前,要先想好他的一个整体布局,也就是我们这里面的login.html主页面,大致结构如下:接下来,我们先上代码,看一下具体实现方法:login.html<!DOCTYPE html> <...

    86567dc4561b1a16ea2bd8116026300a.png
    效果图

    目录结构:

    88ce10ff784243677b9bc9d95d64b1a3.png

    在我们做一个页面之前,要先想好他的一个整体布局,也就是我们这里面的login.html主页面,大致结构如下:

    2de6dc9932678b6899e21965ad9b9276.png

    接下来,我们先上代码,看一下具体实现方法:

    login.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
     
        <link rel="stylesheet" type="text/css" href="login.css"/>
        <script type="text/javascript" src="login.js"></script>
    </head>
     
    <body>
    <div id="login_frame">
     
        <p id="image_logo"><img src="images/login/fly.png"></p>
     
        <form method="post" action="login.js">
     
            <p><label class="label_input">用户名</label><input type="text" id="username" class="text_field"/></p>
            <p><label class="label_input">密码</label><input type="text" id="password" class="text_field"/></p>
     
            <div id="login_control">
                <input type="button" id="btn_login" value="登录" οnclick="login();"/>
                <a id="forget_pwd" href="forget_pwd.html">忘记密码?</a>
            </div>
        </form>
    </div>
     
    </body>
    </html>
    说明:
    在这个html里面,我们主要对登录界面进行了整体布局规划,利用div将内部的窗口、图片、标签、输入框、按钮、链接进行分块,这样方便我们之后用css对其进行准确的调位置、调边距。同时也对重要的几个东西设置了id和class,这也是方便我们之后用css对其进行准确的调颜色、调字体。

    login.js

    /**
     * Created by Kay on 2016/3/8.
     */
    function login() {
     
        var username = document.getElementById("username");
        var pass = document.getElementById("password");
     
        if (username.value == "") {
     
            alert("请输入用户名");
     
        } else if (pass.value  == "") {
     
            alert("请输入密码");
     
        } else if(username.value == "admin" && pass.value == "123456"){
     
            window.location.href="welcome.html";
     
        } else {
     
            alert("请输入正确的用户名和密码!")
     
        }
    }
    说明:
    这个js是用来判断用户名和密码是否正确的,实现起来还算简单。
    可以记一下,界面跳转的语句:
    window.location.href="welcome.html";
    其次就是对输入框的返回值的获取,这里我们用到了document.getElementById的知识点,通过document的对象方法来获得指定ID值的对象。这里要注意是byId,所以前面的html里的username和password要设id值,而不是name值,不然获取不到的!
    关于document的介绍可以点击该链接:详解JavaScript Document对象

    login.css

    body {
        background-image: url("images/login/loginBac.jpg");;
        background-size: 100%;
        background-repeat: no-repeat;
    }
     
    #login_frame {
        width: 400px;
        height: 260px;
        padding: 13px;
     
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
     
        background-color: rgba(240, 255, 255, 0.5);
     
        border-radius: 10px;
        text-align: center;
    }
     
    form p > * {
        display: inline-block;
        vertical-align: middle;
    }
     
    #image_logo {
        margin-top: 22px;
    }
     
    .label_input {
        font-size: 14px;
        font-family: 宋体;
     
        width: 65px;
        height: 28px;
        line-height: 28px;
        text-align: center;
     
        color: white;
        background-color: #3CD8FF;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
     
    .text_field {
        width: 278px;
        height: 28px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0;
    }
     
    #btn_login {
        font-size: 14px;
        font-family: 宋体;
     
        width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;
     
        color: white;
        background-color: #3BD9FF;
        border-radius: 6px;
        border: 0;
     
        float: left;
    }
     
    #forget_pwd {
        font-size: 12px;
        color: white;
        text-decoration: none;
        position: relative;
        float: right;
        top: 5px;
     
    }
     
    #forget_pwd:hover {
        color: blue;
        text-decoration: underline;
    }
     
    #login_control {
        padding: 0 28px;
    }
    说明:
    这个css就是最难部分了,界面之所以能达到如此美观的效果,比如登录的窗口要在屏幕居中显示、背景透明、框的四个角要有一点弧度、登录按钮与输入框上下对齐等等。

    摘要:

    ①让背景图片拉伸且占据整个屏幕:

    background-size: 100%;
    background-repeat: no-repeat;

    ②让一个div块在整个屏幕居中:

    width: 400px;
    height: 260px;
    padding: 13px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px
    (其中的margin-left:和margin-top最好是设为width和height的一半值,那样是完全居中的效果,当然记得前面要加个负号!)

    ③设置圆角:

    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    ④设置背景颜色且加透明效果:

    background-color: rgba(240, 255, 255, 0.5);

    ⑤让输入框和label对齐居中:

    form p > * {
        display: inline-block;
        vertical-align: middle;
    }

    ⑥去除链接的下划线:

    text-decoration: underline;

    7、给一个label或者button里面的文字设置居中:

       width: 120px;
       height: 28px;
       line-height: 28px;
       text-align: center;

    (需要设置line-height 其值等于 height 也就是字的行高等于它所在的label、button的高!)

    8、给“登录”和“忘记密码”的中间设置间距:

    先在html里给他们绑定一块div:

    <div id="login_control">
          <input type="button" id="btn_login" value="登录" οnclick="login();"/>
          <a id="forget_pwd" href="forget_pwd.html">忘记密码?</a>
     </div>

    然后在css里设置一下padding:

    #login_control {
        padding: 0 28px;
    }

    原文链接:网页制作:一个简易美观的登录界面_javascript_Kuroko's Development Notes-CSDN博客
    展开全文
  • 使用css样式设计一个简单的html登陆界面

    万次阅读 多人点赞 2019-09-05 19:54:26
    利用DIV+CSS布局来制作一个登录页面 login.html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字体图标库--> ....

    利用DIV+CSS布局来制作一个登录页面

    login.html部分:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--引入字体图标库-->
            <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/login.css">
        </head>
        <body>
    
            <div class="wrap">
                <h1>易购商城后台管理系统</h1>
                <form action="">
                    <div class="input-group">
                        //输入框左边的类似图标的东西是一种字体
                        //可在网上下载文件font-awesome-4.7.0后直接粘贴在项目目录下使用
                        <i class="icon-user fa fa-user"></i>
                        <input type="text" name="" class="form-control" placeholder="请输入用户名">
                    </div>
                    <div class="input-group">
                        <i class="icon-user fa fa-lock"></i>
                        <input type="password" name="" class="form-control" placeholder="请输入密码">
                    </div>
                    <div class="input-group btn-group">
                        <button>登录</button>
                    </div>
                </form>
                <p>&copy;xx集团&nbsp;版权所有</p>
            </div>
    
        </body>
    </html>
    

    reset.css部分(重置部分)

    *{
    	margin:0;
    	padding:0;
    }
    a{
    	font-size: 12px;
    	text-decoration: 0;
    	color:#222;
    }
    a,
    input,
    button{
    	outline: none;
    }
    ul,ol,li{
    	list-style: none;
    }
    h1,h2,h3,h4,h5,h6{
    	font-weight: 100;
    }
    img{
    	display: block;
    	border: 0;
    }
    

    关于重置样式文件:

    因为不同的浏览器对html标签的渲染有各自不同,即使开发者不对html页面写一行css代码,打开的页面也总会存在样式,但不同的浏览器的默认样式略有不同,这在一定程度上给开发者创造了麻烦,所以一般在开始写css代码的之前总是会先重置样式表,使得所有浏览器中html元素的样式统一,前端工程师通过自定义样式文件进行样式的统一,从而提高了前端界面的兼容性。

    login.css部分

    y{
    	background: rgba(0,0,0,0.8);
    }
    body{
        //为网页设置背景图片
    	background-image: url(../img/xx.jpg);
    }
    .wrap{
        //使界面主体在浏览器居中
    	position: absolute;//绝对定位
    	left: 50%;
    	top: 50%;
    	margin: -175px 0 0 -250px;
    	padding: 20px;
    	width: 500px;
    	height: 350px;
    	background: #333333;
    	box-shadow:0 0 10px rgba(255,255,255,0.5);
    	box-sizing: border-box;//padding和border被包含在定义的width和height之内
    }
    h1{
    	height: 50px;
    	font-size: 1.6em;
    	text-align: center;
    	border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    .input-group{
    	margin: 20px auto;
    	height: 40px;
    	width: 300px;
    	border: 1px solid rgba(0,0,0,0.2);
    }
    i{
    	float: left;//左浮
    	width: 40px;
    	height: 40px;
    	text-align: center;
    	line-height: 40px !important;
    	background: rgb(22,160,93);
    	color: #fff;
    	font-size: 22px !important;
    	
    }
    .form-control{
    	float: left;
    	padding: 0 10px;
    	height: 40px;
    	border: 0;
    	width: 260px;
    	font-size: 18px;
    	box-sizing: border-box;
    }
    .btn-group{
    	border: 0;
    	margin-top: 40px;
    }
    button{
    	display: block;
    	width: 100%;
    	height: 40px;
    	font-size: 1.2em;
    	letter-spacing: 10px;
    	border: 1px solid rgb(22,160,93);
    	color: rgb(22,160,93);
    	background: #fff;
    	cursor: pointer;
    }
    button:hover{
        //为按钮元素设置鼠标悬浮的动态效果
    	color: #fff;
    	background: rgb(22,160,93);
    }
    p{
    	font-size: 12px;
    	text-align: center;
    	color: #888;
    }
    

    设计结果在浏览器上的效果
    在这里插入图片描述

    展开全文
  • HTML做网页登录界面

    万次阅读 多人点赞 2018-05-17 22:39:16
    应该设置一个间隔宽度,突然想到可以每个都写到一个p标签中,明天试试。 (2)设置自动登录是,为了使初始位置与上面框对齐,设置宽度时是审查元素中查看的直观对齐的宽度,如何寻找它理论中的width呢?还有...

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
         <div style="width:500px;float: right;margin:0 auto;" >
             <label for="username" style="font-size:18px" >用户名:</label>
             <div style="height:35px;width:400px;position:relative;display:inline" >   <!--相关位置--> <!--此处为相关位置与绝对位置联合使用-->
                 <input id="username" type="text" style="height:30px;width:350px;padding-right:50px;">
                 <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;"></span>  <!--绝对位置-->
             </div>
             <br/>
             <br/>
             <label for="password1" style="font-size:18px" >&nbsp密码:</label>
             <div style="height:35px;width:400px;position:relative;display:inline" >   <!--相关位置--> <!--此处为相关位置与绝对位置联合使用-->
                 <input id="password1" type="text" style="height:30px;width:350px;padding-right:50px;">
                 <span style="position:absolute;right:16px;top:2px;background-image:url(p.ico);height:16px;width:16px;display:inline-block;"></span>  <!--绝对位置-->
             </div>
             <br/>
             <br/>
             <label for="verification_code" style="font-size:18px" >验证码:</label>
             <input id="verification_code" type="text" style="height:30px;width:350px;">
             <br/>
             <br/>
             <div style="width:426px;float: right;">
                 <input type="radio" name="auto_login" value="1"/> 自动登录
                 <a herf="找回密码网址">忘记密码?</a>
             </div>
             <br/>
             <br/>
             <div style="width:426px;float: right;">
                 <input type="submit"  value="登录" style="height:30px;width:400px;background-color:red;"/>
             </div>
         </div>
    </body>
    </html>

    结果:


    需要改进的地方:(1)代码在每一栏间用了br换行标签。应该设置一个间隔宽度,突然想到可以每个都写到一个p标签中,明天试试。

    (2)设置自动登录是,为了使初始位置与上面框对齐,设置宽度时是在审查元素中查看的直观对齐的宽度,如何寻找它在理论中的width呢?还有在用户名和密码框中图片的放置也采用了同样的处理方法,理论上应该怎么做?(而且为什么在图片以下的编写还会影响图片的放置)

    展开全文
  • JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计

    万次阅读 多人点赞 2019-02-01 12:05:12
    登陆界面一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个CSS3的缩放效果构成。需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本...

     

    登陆界面设计

    撸代码之前先来看一看效果图:

    登陆界面由一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个CSS3的缩放效果构成。需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。

     

    代码实现

    HTML 页面布局:需引入下文的 JavaScript 脚本和 CSS 修饰

    <body>
    <!--此元素被显示-->
    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">登录</button>
    <div id="id01" class="modal">
    	<form class="modal-content animate" action="">
    		<div class="imgcontainer">
    		 <!--此元素不会被显示-->
    		  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    		  <img src="" alt="Avatar" class="avatar">
    		</div>
    
    		<div class="container">
    		  <label><b>Username</b></label>
    		  <input type="text" placeholder="Enter Username" name="uname" required>	
    
    		  <label><b>Password</b></label>
    		  <input type="password" placeholder="Enter Password" name="psw" required>
    
    		  <button type="submit">登陆</button>
    		  <input type="checkbox" checked="checked"> 记住我
    		</div>
    
    		<div class="container" style="background-color:#f1f1f1">
    		  <button type="button" onClick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    		  <span class="psw">Forgot<a href="#">Password?</a></span>
    		</div>
    	</form>
    </div>
    </body>

    JavaScript 脚本:通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。

    <script type = "text/javascript">
    // 获取模型
    var modal = document.getElementById('id01');
    // 鼠标点击模型外区域关闭登录框
    window.onclick = function(event) {
        if (event.target == modal) {
            // 此元素不会被显示
            modal.style.display = "none";
        }
    } 
    </script>

    CSS 修饰:

    • 文本输入框通过 input[type=text], input[type=password] 统一控制
    • cursor: pointer 光标呈现为指示链接的指针(一只手),cursor 控制贯标样式
    • border-radius: 50%  以百分比定义圆角的形状
    • position: fixed;  z-index: 1;  left: 0;  top: 0;   position、z-index、left、top共同控制模型在所有内容的上方(堆叠顺序1上方,-1下方)
    • @keyframes animatezoom  创建动画 animatezoom
    • @-webkit-keyframes animatezoom  设置动画兼容-webkit-引擎浏览器 Firefox
    • @-moz-keyframes animatezoom  设置动画兼容-moz-引擎浏览器 Safari and Chrome
    • @-o-keyframes animatezoom  设置动画兼容-o-引擎浏览器 Opera
    • -webkit-animation: animatezoom 0.6s  把动画添加到修饰器中并兼容设置
    @charset "utf-8";
    /* CSS Document */
    
    /* 宽屏输入字段 */
    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    /* 为所有按钮设置样式 */
    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/
        width: 100%;
    }
    
    button:hover {
        opacity: 0.8; /*设置 div 元素的不透明级别*/
    }
    
    /* 取消按钮的其他样式 */
    .cancelbtn {
        width: auto;
        padding: 10px 18px;
        background-color: #f44336;
    }
    
    /* 将图像居中 */
    .imgcontainer {
        text-align: center;
        margin: 24px 0 12px 0;
        position: relative;
    }
    
    /*控制图片形状*/
    img.avatar {
        width: 40%;
        border-radius: 50%; /*以百分比定义圆角的形状*/
    }
    
    /* 定位关闭按钮 */
    .close {
        position: absolute; /*生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。*/
        right: 25px;
        top: 0;
        color: #000;
        font-size: 35px;
        font-weight: bold;
    }
    
    /* 光标移动到关闭按钮 */
    .close:hover,
    .close:focus {
        color: red;
    	/*光标呈现为指示链接的指针(一只手)*/
        cursor: pointer; 
    }
    
    .container {
        padding: 16px;
    }
    
    /* 忘记密码 */
    span.psw {
        float: right;
        padding-top: 16px;
    }
    
    /* 登陆弹框模型 */
    .modal {
        display: none; /* 默认隐藏模型 */
        position: fixed; /* 生成绝对定位的元素,相对于浏览器窗口进行定位。 */
    	/* z-index、left、top共同控制模型在所有内容的上方 */
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* 如果需要,启用滚动条 */
        background-color: rgb(0,0,0); /* 回退颜色 */
        background-color: rgba(0,0,0,0.4); /* 黑色 */
        padding-top: 60px;
    }
    
    /* 模型内容 */
    .modal-content {
        background-color: #fefefe;
        margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
        border: 1px solid #888;
        width: 30%; /* Could be more or less, depending on screen size */
    }
    
    /* 添加缩放动画 */
    .animate {
    	
        -webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/
    	-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/
    	-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/
        animation: animatezoom 0.6s
    }
    
    /*
    1. transform:scale(x,y)
    x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
    注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。
    
    2. 关键词 "from" 和 "to",等同于 0% 和 100%。
    0% 是动画的开始,100% 是动画的完成。
    */
    
    /*创建动画animatezoom,把它绑定到 animate 选择器*/
    @keyframes animatezoom {
        from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /* 设置动画兼容-webkit-引擎浏览器 Firefox */
    @-webkit-keyframes animatezoom {
        from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/
    @-moz-keyframes animatezoom {
    	from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /*设置动画兼容-o-引擎浏览器 Opera*/
    @-o-keyframes animatezoom {
    	from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /* 
    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
    这里,如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改span和cancel按钮的样式 */
    @media screen and (max-width: 300px) {
        span.psw {
           display: block;
           float: none;
        }
        .cancelbtn {
           width: 100%;
        }
    }

     

    • @media screen and (max-width: 300px) :@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改span和cancel按钮的样式。

    注意:

     1. transform:scale(x,y)

         x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。

         Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

    2. 关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

     

    注册界面设计

    撸码之前先来看一下效果图:

    注册界面由一个简单的表单(Email、用户名、密码、重复密码、注册按钮、记住我、取消),创建了一个CSS3的缩放效果构成。同样需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。

     

    代码实现

    HTML 页面布局:同样需引入下文的 JavaScript 脚本和 CSS 修饰

    <body>
    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">注册</button>
    <div id="id01" class="modal">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <form class="modal-content animate" action="">
        <div class="container">
          <label><b>Email</b></label>
          <input type="text" placeholder="Enter Email" name="email" required>
    
          <label><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required>
    
          <label><b>Repeat Password</b></label>
          <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
          <input type="checkbox" checked="checked"> Remember me
          <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
    
          <div class="clearfix">
            <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
            <button type="submit" class="signupbtn">Sign Up</button>
          </div>
        </div>
      </form>
    </div>
    </body>

    JavaScript 脚本:通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。

    <script type="text/javascript">
        // 获取模型
        var modal = document.getElementById('id01');
    
        // 鼠标点击模型外区域关闭登录框
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

    CSS 修饰:同登陆类似,文本输入框的统一控制、浏览器兼容处理、简单响应式的设计

    @charset "utf-8";
    /* CSS Document */
    
    /* 宽屏输入字段 */
    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    /* 为所有按钮设置样式  */
    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
    
    /* 取消按钮的其他样式 */
    .cancelbtn {
        padding: 14px 20px;
        background-color: #f44336;
    }
    
    /* 浮动取消和注册按钮,并添加一个相同的宽度 */
    .cancelbtn,.signupbtn {float:left;width:50%}
    
    /* 向容器元素添加填充 */
    .container {
        padding: 16px;
    }
    
    /* 注册弹框模型 */
    .modal {
        display: none; /* 在默认情况下隐藏 */
        position: fixed; /* 生成绝对定位的元素,相对于浏览器窗口进行定位。 */
    	/* z-index、left、top共同控制模型在所有内容的上方 */
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* 如果需要,启用滚动条 */
      	background-color: rgb(0,0,0); /* 回退颜色 */
        background-color: rgba(0,0,0,0.4); /* 黑色 */
        padding-top: 60px;
    }
    
    /* 模型内容 */
    .modal-content {
        background-color: #fefefe;
        margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
        border: 1px solid #888;
        width: 50%; /* Could be more or less, depending on screen size */
    }
    
    /* 定位关闭按钮 */
    .close {
        position: absolute;
        right: 35px;
        top: 15px;
        color: #000;
        font-size: 40px;
        font-weight: bold;
    }
    
    /* 光标移动到关闭按钮 */
    .close:hover,
    .close:focus {
        color: red;
    	/*光标呈现为指示链接的指针(一只手)*/
        cursor: pointer; 
    }
    
    /* 设置浮动*/
    .clearfix::after {
        content: "";
        clear: both;
        display: table; /*此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。*/
    }
    
    /* 添加缩放动画 */
    .animate {
    	
        -webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/
    	-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/
    	-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/
        animation: animatezoom 0.6s
    }
    
    /*
    1. transform:scale(x,y)
    x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
    注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。
    
    2. 关键词 "from" 和 "to",等同于 0% 和 100%。
    0% 是动画的开始,100% 是动画的完成。
    */
    
    /*创建动画animatezoom,把它绑定到 animate 选择器*/
    @keyframes animatezoom {
        from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /* 设置动画兼容-webkit-引擎浏览器 Firefox */
    @-webkit-keyframes animatezoom {
        from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/
    @-moz-keyframes animatezoom {
    	from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /*设置动画兼容-o-引擎浏览器 Opera*/
    @-o-keyframes animatezoom {
    	from {transform: scale(0)} 
        to {transform: scale(1)}
    }
    
    /* 
    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
    这里,如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改取消和注册按钮的样式 */
    @media screen and (max-width: 300px) {
        .cancelbtn, .signupbtn {
           width: 100%;
        }
    }
    • @media screen and (max-width: 300px):如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改取消和注册按钮的样式 。

     

    这里通过 JavaScript + CSS/CSS3 + HTML 简单的解释网页登陆 + 注册的界面设计,只是用于新手学习入门,还有很多的功能添加、异常处理等问题需要解决。在运用到项目中时可以根据业务进行拓展完善。

     

    展开全文
  • 网页设计】CSS助理美化登录注册界面

    千次阅读 多人点赞 2019-07-04 22:17:19
    简单用HTML编写:界面简陋 经过CSS进行结构化之后: 对应HTML源代码为: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册表单</title> </...
  • 实现一个界面跳转到另一个界面

    热门讨论 2015-11-22 11:10:59
    反正也是很简单的程序,新手开发来说还是很不错的,主界面的功能是没有做的,但是还会有完整的程序上传的,喜欢的话可以关注我,我会经常上传一些东西的
  • 网页制作:一个简易美观的登录界面

    万次阅读 多人点赞 2016-03-09 17:22:59
    这次来总结一下公司的Task 1 实现一个登录界面。 登录界面其实大三的时候就有做过,但是当时做的界面超级low,主要区别在于有无css,由于公司的设计要求,对于该界面的很多细节处理实在不容易。所以,还是想要写...
  • 用idea做一个网页登录界面

    千次阅读 2020-04-03 14:04:27
    完成创建java类后,login中写入代码 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String msg ="Hello World"+"\n"+"你好,世界"; ...
  • 用html、JS、css写的一个登录界面网页。 可以进行用户名、密码判断;界面跳转。 当然,该例子主要是展示css对页面的美化效果。
  • 在上一节课的内容基础上做一个简易的网页登录界面——18级软工1班03 打开idea后打开上一节课的工程文件(一般打开idea软件的同时,idea会默认打开上一次的文件)并左边列表的main文件夹下建立一个名为Java的...
  • 相比之前的那个【简单版】登录界面,该模板新增: 1、js 回车事件,并且能够兼容多个...用html、JS、css写的一个登录界面网页。 可以进行用户名、密码判断;界面跳转。 当然,该例子主要是展示css对页面的美化效果。
  • 用Html写一个简单的登陆界面

    万次阅读 2015-03-13 19:45:57
    用Html写一个简单的登陆界面
  • HTML+CSS登陆界面实例

    万次阅读 多人点赞 2020-02-02 10:44:32
    将登录界面项目部署了github上面:点我 项目代码解析 项目的界面简析 主要部分是Login的模块,包括username文本框和password文本框以及Login的按钮 将Login模块进行居中,并且设置背景半透明 添加背景框 项目...
  • 前言:最近闲的有点蛋疼,因为平时对音乐挺感兴趣的,而且搜了...简介:KG-music,基于vuecli3构建的包含移动web端、androidApp、ios暂未涉及,本项目完全参照酷狗音乐app页面设计,一个实现浏览器端的web 酷狗音乐...
  • JSP实现登录界面

    千次阅读 多人点赞 2019-10-08 13:58:08
    JSP实现登录界面 1.登录界面 <body> <form action="zhuce.jsp" method="post"> <div id="box" style="height:300px; width:400px; margin:auto; text-align:center"> <h1>用户登录<...
  • MATLAB GUI界面编程——一些细节问题

    万次阅读 多人点赞 2019-01-06 22:59:58
    前面的话: 本篇博文主要对自己进行MATLAB GUI设计时遇到的一些细节问题进行...、使用MATLAB的GUIDE开发环境,来快速创建GUI界面 二、修改MATLAB GUI的.fig和.m文件名 三、修改MATLAB GUI界面的名字 四...
  • 简单酷炫的网页登录界面

    万次阅读 多人点赞 2017-11-13 17:22:54
    login.html: Login Login 登录 Login.css: html{ width: 100%; height: 100%; overflow: hid
  • 基于V#的ASP.NET.MVC 4 web 网站程序开发 ...我们首先要有一个认知,就是ASP.NET.MVC 4 web 网站程序开发的三层架构概念,分别为BLL,DAL,MOD 这三层的概念,这是竖着的三层。横三层为view,Controllers...
  • QUI网页界面集成框架

    热门讨论 2011-10-15 21:34:32
    QUI网页界面集成框架(原UUR框架)是一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等,并有多种皮肤样式可供选择。适合WEB开发...
  • 自己也刚刚开始接触框架,学习了bootstrap框架过后,联系写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧。下面展示源代码:...
  • html后台登录界面网页设计界面

    万次阅读 多人点赞 2020-04-25 19:49:11
    款简单的html后台登录界面网页设计界面带给大家。
  • C#中简单登录界面成功登录后跳转到另一个界面

    万次阅读 多人点赞 2018-08-26 23:17:23
    今天登录界面的基础上,实现登录后界面跳转到另一个界面。 本篇启发于 @i_CodeBoy 感谢这位博主   首先,打开之前做的项目,我的窗体的Text为登录界面,详细请看上一篇博文。 然后,我们需要添加一个新的...
  • 网页web界面设计套餐

    2019-06-24 13:44:13
    第一阶段:(基础)网页web的基础html和css讲起 第二阶段:(进阶)讲解进阶的html5和css3、flex box 第三阶段:(实战)讲解如何利用所学的知识实战制作一个公司站点的移动站界面、商城的移动站界面
  • HTML登录界面的实现详解

    万次阅读 多人点赞 2018-08-04 17:40:20
    前言序锦 前阵子参加学校的暑期实习,我作为项目...模板的基础上修改成我们想要的样子,这一点很重要,这样一个很短的时间内,进行前端的编写,我们最好的选择就是进行模板的修改,但对于初学者来说,就算是...
  • UI框架 网页模板 界面框架 开发框架

    热门讨论 2011-10-18 10:30:03
    QUI网页界面集成框架是一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等,并有多种皮肤样式可供选择。适合WEB开发工程师、前端制作...
  • html网页设计简单登陆界面

    万次阅读 多人点赞 2017-11-05 13:12:53
    用户登录界面 *{ padding:0px; margin:0px; } a{color:White} body{ font-family:Arial, Helvetica, sans-serif; background:#000 no-repeat center; font-size:13px; } img{ border:0; } .lg{width:468px; height...
  • linux字符界面中如何查看网页

    千次阅读 2016-02-19 13:01:30
     Lynx 是一个字符界面下的全功能的WWW浏览器,可以运行多种OS下,如VMS, UNIX, Windows 95, Windows NT等,当然也包括Linux。Lynx 占用资源极少,速度很快。Lynx是唯一能字符终端下运行的 WWW 浏览器。Lynx主页...
  • 我们上网的时候总能看到各种各样的窗体界面,比如:网页角落突然弹出的小广告、登录界面、画图板……接下来我就来讲讲如何创建一个窗体界面并制作一个登录界面。 窗体类的英文单词是JFrame,它所属的package是...
  • 网页跳转QQ聊天界面和添加好友界面

    万次阅读 2017-08-17 15:34:45
    网页跳转QQ聊天界面和添加好友界面 1.网页跳转QQ聊天界面 http://wpa.qq.com/msgrd?v=3&amp;uin=2821279379&amp;site=qq&amp;menu=yes &nbsp;&nbsp;&nbsp;&nbsp;以上代码中的...
  • 我准备做一个不使用数据库的登录界面,求指点,我小白一个,求完整的字符串

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 346,942
精华内容 138,776
关键字:

如何让网页在一个界面