精华内容
下载资源
问答
  • 使用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登陆界面的实现

    万次阅读 多人点赞 2019-10-30 09:51:15
    登陆界面的实现

    参加的项目要求书写一个新的登陆界面,参考了一些百度的写法,写了一个固定布局的登陆界面。
    第一次正八经儿写HTML,写的不好,应该还存在一些问题,后续会不断把这个代码及这篇文章进行改进。

    代码及效果图如下:

    LoginActivity.html

    <!doctype html>
    <html long="zh">
    <head>
        <meta charset="utf-8">
        <title>客户应用平台</title>
        <link rel="stylesheet" href="LoginStyle.css">
    </head>
    <body>
    <!--头部显示-->
    <nav class="header" id="head">
        <img class="Logo" src="LOGO.jpg">
        <h1 class="LogoName">客户应用平台</h1>
        <img src="TopPic.png" width="100%" height="53">
    </nav>
    <!--中部内容-->
    <div class="wrap" id="wrap">
        <div class="logWrap" >
            <img id="banner" class="banner" src="demo2.jpg" >
            <div class="logShow">
                <!-- 头部提示信息 -->
                <div class="LoginIndex LoginTop">
                    <p class="p1">登录</p>
                </div>
                <!-- 输入框 -->
                <div class="InputStr">
                    <img src="user.png" width="20" height="20" alt=""/>
                    <input type="text"
                           placeholder="输入用户名" />
                </div>
                <div class="InputStr">
                    <img src="password.png" width="20" height="20" alt=""/>
                    <input type="text"
                           placeholder="输入用户密码" />
                </div>
                <div class="LoginButton">
                    <a href="index.html" target="_self"><button>登 录</button></a>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    LoginStyle.css

    @charset "utf-8";
    
    *{
        margin: 0;
        padding: 0;
    }
    #head{
        height: 90px;
    
    }
    #head .Logo{
        width: 72px;
        height: 72px;
        vertical-align: middle;
    }
    #head .LogoName{
        font-size:40px;
        font-family:"楷体";
        color:#00BFFF;
        display:inline;
        position: absolute;
        top: 14px;
    }
    #wrap {
        height: 408px;
        width: 100%;
        position:relative;
    }
    #wrap .logWrap{
        height: 408px;
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        right: 50%;
        margin: 0 0 0 -300px;
        display: inline-block;
    }
    #wrap .banner{
        height: 300px;
        width: 300px;
        position: absolute;
        top: 26%;
    }
    #wrap .logShow {
        float: right;
        height: 408px;
        width: 368px;
        position: absolute;
        top: 0%;
        left: 55%;
        right: 45%
    }
    .LoginButton a button {
        width: 100%;
        height: 45px;
        background-color: #21a4ee;
        border: none;
        color: white;
        font-size: 18px;
    }
    .logShow .LoginIndex.LoginTop .p1 {
        display: inline-block;
        font-size: 28px;
        margin-top: 110px;
        width: 86%;
    }
    #wrap .logShow .LoginIndex.LoginTop {
        width: 86%;
        border-bottom: 1px solid #ee7700;
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }
    .logShow .InputStr img {
        position: absolute;
        top: 12px;
        left: 8px;
    }
    .logShow .InputStr input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
    }
    #wrap .logShow .InputStr {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    #wrap .logShow .LoginButton {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    

    代码效果图

    在这里插入图片描述

    展开全文
  • 漂亮的html登陆界面

    千次下载 热门讨论 2012-06-14 17:16:37
    浅蓝色漂亮的html登陆界面 PSD与HTML
  • web-登陆界面html-数据库

    千次阅读 多人点赞 2019-12-05 19:51:06
    概述 项目需要,于是花几天时间改站前端设计一个登录页面。页面设计首先通过html、css等语言完成,然后通过...代码实现(html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...

    概述

    项目需要,于是花几天时间改站前端设计一个登录页面。页面设计首先通过html、css等语言完成,然后通过PHP调用后端数据库获取已授权用户信息,最后前端通过js的ajax调用php文件完成整个登录系统设计

    效果实现

    在这里插入图片描述

    代码实现(html)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>login</title>
    	<style type="text/css">
    		@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
    		* {
    		  box-sizing: border-box;
    		  margin: 0;
    		  padding: 0;
    		  font-weight: 300;
    		}
    		body {
    		  font-family: 'Source Sans Pro', sans-serif;
    		  color: white;
    		  font-weight: 300;
    		}
    		body ::-webkit-input-placeholder {
    		  /* WebKit browsers */
    		  font-family: 'Source Sans Pro', sans-serif;
    		  color: white;
    		  font-weight: 300;
    		}
    		body :-moz-placeholder {
    		  /* Mozilla Firefox 4 to 18 */
    		  font-family: 'Source Sans Pro', sans-serif;
    		  color: white;
    		  opacity: 1;
    		  font-weight: 300;
    		}
    		body ::-moz-placeholder {
    		  /* Mozilla Firefox 19+ */
    		  font-family: 'Source Sans Pro', sans-serif;
    		  color: white;
    		  opacity: 1;
    		  font-weight: 300;
    		}
    		body :-ms-input-placeholder {
    		  /* Internet Explorer 10+ */
    		  font-family: 'Source Sans Pro', sans-serif;
    		  color: white;
    		  font-weight: 300;
    		}
    		.wrapper {
    		  background: #50a3a2;
    		  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    		  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    		  position: absolute;
    		  left: 0;
    		  width: 100%;
    		  height: 100%;
    		/*  margin-top: -200px;*/
    		  overflow: hidden;
    		}
    		.wrapper.form-success .container h1 {
    		  -webkit-transform: translateY(85px);
    		          transform: translateY(85px);
    		}
    		.container {
    		  max-width: 600px;
    		  margin: 0 auto;
    		  padding: 80px 0;
    		  padding-top:200px; 
    		  height: 400px;
    		  text-align: center;
    		}
    		.container h1 {
    		  font-size: 40px;
    		  -webkit-transition-duration: 1s;
    		          transition-duration: 1s;
    		  -webkit-transition-timing-function: ease-in-put;
    		          transition-timing-function: ease-in-put;
    		  font-weight: 200;
    		}
    		form {
    		  padding: 20px 0;
    		  position: relative;
    		  z-index: 2;
    		}
    		form input {
    		  -webkit-appearance: none;
    		     -moz-appearance: none;
    		          appearance: none;
    		  outline: 0;
    		  border: 1px solid rgba(255, 255, 255, 0.4);
    		  background-color: rgba(255, 255, 255, 0.2);
    		  width: 250px;
    		  border-radius: 3px;
    		  padding: 10px 15px;
    		  margin: 0 auto 10px auto;
    		  display: block;
    		  text-align: center;
    		  font-size: 18px;
    		  color: white;
    		  -webkit-transition-duration: 0.25s;
    		          transition-duration: 0.25s;
    		  font-weight: 300;
    		}
    		form input:hover {
    		  background-color: rgba(255, 255, 255, 0.4);
    		}
    		form input:focus {
    		  background-color: white;
    		  width: 300px;
    		  color: #53e3a6;
    		}
    		form button {
    		  -webkit-appearance: none;
    		     -moz-appearance: none;
    		          appearance: none;
    		  outline: 0;
    		  background-color: white;
    		  border: 0;
    		  padding: 10px 15px;
    		  color: #53e3a6;
    		  border-radius: 3px;
    		  width: 125px;
    		  cursor: pointer;
    		  font-size: 18px;
    		  -webkit-transition-duration: 0.25s;
    		          transition-duration: 0.25s;
    		}
    		form button:hover {
    		  background-color: #f5f7f9;
    		}
    		.bg-bubbles {
    		  position: absolute;
    		  top: 0;
    		  left: 0;
    		  width: 100%;
    		  height: 100%;
    		  z-index: 1;
    		}
    		.bg-bubbles li {
    		  position: absolute;
    		  list-style: none;
    		  display: block;
    		  width: 40px;
    		  height: 40px;
    		  background-color: rgba(255, 255, 255, 0.15);
    		  bottom: -160px;
    		  -webkit-animation: square 25s infinite;
    		  animation: square 25s infinite;
    		  -webkit-transition-timing-function: linear;
    		  transition-timing-function: linear;
    		}
    		.bg-bubbles li:nth-child(1) {
    		  left: 10%;
    		}
    		.bg-bubbles li:nth-child(2) {
    		  left: 20%;
    		  width: 80px;
    		  height: 80px;
    		  -webkit-animation-delay: 2s;
    		          animation-delay: 2s;
    		  -webkit-animation-duration: 17s;
    		          animation-duration: 17s;
    		}
    		.bg-bubbles li:nth-child(3) {
    		  left: 25%;
    		  -webkit-animation-delay: 4s;
    		          animation-delay: 4s;
    		}
    		.bg-bubbles li:nth-child(4) {
    		  left: 40%;
    		  width: 60px;
    		  height: 60px;
    		  -webkit-animation-duration: 22s;
    		          animation-duration: 22s;
    		  background-color: rgba(255, 255, 255, 0.25);
    		}
    		.bg-bubbles li:nth-child(5) {
    		  left: 70%;
    		}
    		.bg-bubbles li:nth-child(6) {
    		  left: 80%;
    		  width: 120px;
    		  height: 120px;
    		  -webkit-animation-delay: 3s;
    		          animation-delay: 3s;
    		  background-color: rgba(255, 255, 255, 0.2);
    		}
    		.bg-bubbles li:nth-child(7) {
    		  left: 32%;
    		  width: 160px;
    		  height: 160px;
    		  -webkit-animation-delay: 7s;
    		          animation-delay: 7s;
    		}
    		.bg-bubbles li:nth-child(8) {
    		  left: 55%;
    		  width: 20px;
    		  height: 20px;
    		  -webkit-animation-delay: 15s;
    		          animation-delay: 15s;
    		  -webkit-animation-duration: 40s;
    		          animation-duration: 40s;
    		}
    		.bg-bubbles li:nth-child(9) {
    		  left: 25%;
    		  width: 10px;
    		  height: 10px;
    		  -webkit-animation-delay: 2s;
    		          animation-delay: 2s;
    		  -webkit-animation-duration: 40s;
    		          animation-duration: 40s;
    		  background-color: rgba(255, 255, 255, 0.3);
    		}
    		.bg-bubbles li:nth-child(10) {
    		  left: 90%;
    		  width: 160px;
    		  height: 160px;
    		  -webkit-animation-delay: 11s;
    		          animation-delay: 11s;
    		}
    		@-webkit-keyframes square {
    		  0% {
    		    -webkit-transform: translateY(0);
    		            transform: translateY(0);
    		  }
    		  100% {
    		    -webkit-transform: translateY(-700px) rotate(600deg);
    		            transform: translateY(-700px) rotate(600deg);
    		  }
    		}
    		@keyframes square {
    		  0% {
    		    -webkit-transform: translateY(0);
    		            transform: translateY(0);
    		  }
    		  100% {
    		    -webkit-transform: translateY(-700px) rotate(600deg);
    		            transform: translateY(-700px) rotate(600deg);
    		  }
    		}
    		.cc{
    			text-decoration: none;
    			color: #53e3a6; 
    			}
    	</style>
    	<script type="text/javascript">
    		
    		 $("#login-button").click(function(event){
    				 event.preventDefault();
    			 
    			 $('form').fadeOut(500);
    			 $('.wrapper').addClass('form-success');
    		});
    		function check(){
    	    {
    		  if(form.username.value == "")//如果用户名为空
    		  {
    			alert("您还没有填写用户名!");
    			form.username.focus();
    			return false;
    		  }
    		  if(form.password.value == "")//如果密码为空
    		  {
    			alert("您还没有填写密码!");
    			myform.password.focus();
    			return false;
    		  }
    		}
    		
    		
    	</script>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="container">
    			<h1>Welcome</h1>
    			
    			<form name='form' class="form" method='post' action='login.php' onSubmit="return check()">
    				<input type="text" placeholder="Username" name='username'>
    				<input type="password" placeholder="Password" name='password'>
    				<button type="submit" id="login-button" name='submit' value='submit'>Login</button>
    			</form>
    		</div>
    		
    		<ul class="bg-bubbles">
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</div>
    </body>
    </html>
    
    

    PHP文件

    <?php 
    $username=$_POST['username'];
    $password=$_POST['password'];
    $link = mysqli_connect('127.0.0.1','root','123456','vultureData');
    $query=mysqli_query($link,"SELECT username,password FROM webuserinfo WHERE username = '$username'");//找到与输入用户名相同的信息,注意要取出的信息有两项
    $row = mysqli_fetch_array($query);
    if($_POST['submit']){    
        if($row['username']==$username &&$row['password']==$password){
            //setcookie('uname',$username,time()+7200);
            echo "<script>alert('successfully');window.location= 'index.php';</script>";
        }
        else echo "<script>alert('failed');history.go(-1)</script>";//返回之前的页面
    }
    include('login.html');?>
    
    
    展开全文
  • JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计

    万次阅读 多人点赞 2019-02-01 12:05:12
    登陆界面设计代码之前先来看一看效果图: 登陆界面由一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个CSS3的缩放效果构成。需要做浏览器(Firefox、Safari and Chrome、...

     

    登陆界面设计

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

    登陆界面由一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个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 简单的解释网页登陆 + 注册的界面设计,只是用于新手学习入门,还有很多的功能添加、异常处理等问题需要解决。在运用到项目中时可以根据业务进行拓展完善。

     

    展开全文
  • jsp登陆界面代码

    热门讨论 2013-09-14 19:27:00
    <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>*" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> 登录页面</title></head><body>...
  • web-登录界面html

    2019-12-05 18:18:52
    本资源为登陆界面,通过web显示,编程语言包括html、css、js、php,其中php负责与后端数据库连接,获取后端用户信息。
  • 用户登陆界面

    2017-12-20 12:34:30
    jsp和tomcat制作的一个用户登录界面,包括用户登录和输入具体信息
  • HTML登录界面的实现

    2017-03-30 19:49:11
    HTML登录界面的实现
  • web程序登陆界面

    2018-11-07 13:26:02
    一步一步实现web程序信息管理系统之一----登陆界面实现 web程序登陆界面
  • 网页页面设计<title>Bootstrap响应式登录界面模板</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css">
  • html登录界面

    千次阅读 2019-11-14 10:54:34
    今天是2019年11月14日我第一次注册博客,我把我做的一个登陆界面分享给大家看希望各位大佬指教。 首先是html文件。 1.登录界面html 登录界面 用户名:     密 码: ....
  • HTML登录页面设计

    千次阅读 2020-02-27 09:46:53
    HTML登录页面设计 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style type="text/css"> *{margin: 0;p....
  • 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...
  • 多人聊天室 3个目标文件 第一步:运行ServerData.java 启动服务器,然后服务器处于等待状态 第二步:运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步:在登陆后的界面文本框输入文本...
  • 星空登陆界面设计

    2017-11-07 17:05:55
    非常酷炫的星空登陆界面,非常酷炫的星空登陆界面,非常酷炫的星空登陆界面
  • html 打造漂亮的登录界面
  • 一个旅游网站页面设计,包扩6个界面设计制作精良,可用于学校web前端开发或网站设计等课程的课程设计作业。点击即可使用,十分简单,易于理解。
  • Java用户登陆界面例子 代码

    万次阅读 2015-04-20 07:42:27
    转自http://www.cnblogs.com/liwustore/archive/2013/01/01/2841492.html 好久没有总结这个月的学习...Java用户登陆这块,主要还是学到了新的类: 1,边界布局:BorderLayout。他主要分为五个布局,是JFrame(顶层容
  • 基于HTML5+css+JS的精美登陆注册界面-------------------------------
  • 漂亮的web登陆界面

    2020-12-20 10:30:28
    漂亮的web登陆界面
  • 用户注册登录界面设计+代码

    热门讨论 2011-10-12 22:00:50
    简单的用户注册登录界面设计+源代码,采用DIV+CSS结构,简洁
  • html-QQ登陆界面

    万次阅读 多人点赞 2020-02-17 21:43:18
    初学30节课html的入门课程,花了几个小时模仿了一个qq的登陆界面。 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" ...
  • 网易邮箱注册界面设计 html

    千次阅读 2019-02-27 10:32:59
    DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;139-网易注册界面搭建&lt;/title&gt; &...
  • 【网页设计】CSS助理美化登录注册界面

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

    2018-02-06 20:11:59
    个人模仿微信写的小项目,实现了基本的六个界面代码详尽
  • 微信小程序登陆界面(效果图+源代码

    千次阅读 多人点赞 2020-12-14 15:04:57
    微信小程序登陆界面 login.wxml: <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image> </view> <view ...
  • web班级网站设计代码

    2015-06-11 18:51:01
    可以直接用的,把班级名字改一下就可以了.。
  • 17种非常漂亮后台登陆界面和管理界面HTML源码,整合网上所有经典,框架,不下后悔终生! 漂亮经典的登录界面源码 包含login.html 以及css和图片 自己在用的HTML登录页面,喜欢的可以下载了直接使用。
  • Web前端 简单登陆页面设计 代码

    万次阅读 多人点赞 2019-04-21 17:00:27
    HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登陆页面</title> <link rel="stylesheet"href="css/new_file.css"type=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,098
精华内容 10,839
关键字:

html登录界面设计代码