精华内容
下载资源
问答
  • html css制作的web前端登录界面

    千次阅读 多人点赞 2020-08-02 23:15:28
    web前端登录界面

    web前端登录界面

    让我们先看一下效果
    在这里插入图片描述在这里插入图片描述下面是具体怎么实现的代码(代码分为HTML和CSS两个文档)
    HTML文件代码

    <!DOCTYPE html>
    
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" href="Login.css" >
    </head>
    
    <body>
        <div id="main">
    
            <div id="avatar">
            </div>
    
            <div id="account">
                <div class="input-box"><input type="text" placeholder="Please input username"></div>
                <div class="input-box"><input type="password" placeholder="Please input password"></div>
            </div>
    
                <button class="login-btn">Sign In</button>
    
    
            <div id="footer">
                <a href="#">Forget Password?</a>
            </div>
        </div>
    </body>
    

    下面是CSS代码实现

    @charset "utf-8";
    /*统一设置*/
    *{
        margin: 0;
        padding: 0;
    }
    /*网页背景图片*/
    body{
        background: url("background.jpg") no-repeat ;
        background-size: cover;
    }
    /*登陆区主体*/
    #main{
        width: 350px;
        height: 600px;
        background: rgba(0,0,0,0.5);
        margin: 40px auto;
        border-top: 8px solid #ffc5d1;
        position: relative;
    }
    
    /*头像区*/
    #avatar{
        width: 184px;
        height: 184px;
        background: url("avatar.jpg") no-repeat;
        background-size: cover;
        margin: 50px auto;
        border-radius: 50%;
    
    }
    
    /*账号密码区*/
    #account{
        width: 75%;
        /*height: 200px;*/
        /*background: #ffd1e4;*/
        margin: 0 auto;
    }
    #account .input-box{
        height: 50px;
        /*background: #ffbcdd;*/
    }
    #account .input-box input{
        height: 40px;
        width: calc(100% - 10px);
        border: none;
        outline: none;
        padding: 0 5px;
        background: rgba(0,0,0,0.5);
        color: #ffcae5;
        font-size: 16px;
    }
    
    /*登录按钮*/
    .login-btn{
        width: 75%;
        height: 40px;
        display: block;
        margin: 30px auto;
        background:#ffc5d1 ;
        border: none;
        outline: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }
    /*按下按钮*/
    .login-btn:active{
        position: relative;
        top:2px;
    }
    
    /*登陆区底部*/
    #footer{
        height: 50px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ccc;
    }
    #footer a{
        color: #ccc;
        text-decoration: none;
    }
    #footer a:hover{
        color: red;
    }
    
    展开全文
  • web前端登录页面设计技巧

    千次阅读 2019-10-25 23:08:44
    好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点 1、精致的外观 外观的重要性不言而喻,外观是给用户...

    首先我们先来了解的用户登录流程,先点击是注册,然后是登录,再有就是忘记密码,然后,每个功能做一个界面,这是最早的流程,现在越来越多的大型网站把登录和首页放在一起设计,原因就在于用户体验度;好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点

    1、精致的外观

    外观的重要性不言而喻,外观是给用户的第一感觉,它的覆盖面比较广,比如配色,布局,文字大小,质感,创意,图标等,还包括鼠标特效,选中状态,提示信息等。做为web前端设计师,在重视代码的准确性的同时,也需要和像素和颜色搞好关系,必须一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。

    2、完美用图

    在web前端开发中,配图非常具有表现力,它与颜色关系密切。所以大部分ui设计网页设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画的表现技法。绘画与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的网页设计师,将插画运用到网页设计中来,生动有趣温情的配色和用途,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力

    3、品牌传达

    虽然仅仅只是一个登录界面,客户停留的时间也比较短,但是作为开发者,我们还是要在里面强化品牌,设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现品牌文化,传播品牌理念的绝佳位置;表现形式可以是图片广告的形式,或者是文字链接的形式,或者是动画的形式等

    4、登录框

    登录界面要说谁最重要,肯定是登录框了,随着用户越来越追去人性化的操作,现在主流的登录框是越来越大,大输入框,可以让用户输入起来感到心情舒畅,登录过程非常愉悦,而且在显示器越来越大的今天,登录框和登录按钮必须要大而明显!后期还需要web工程师添加更好的用户体验效果,比如输入信息的正确性等

    5、简约而不简单

    用户看到的也许只是一个登录界面,但是作为设计师来说,里面包括的知识点是很多的,比如登录框的高度,宽度,比例,阴影,颜色,形状,纹理,背景等。作为web前端设计师来说,需要各种判断,兼容,跳转。总之现在的登录界面越来越倾向于简洁,最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,取消了多余的元素,提高整体的视觉效果,实现真正的简约而不简单。
    在这里插入图片描述

    展开全文
  • Web前端案例_QQ登录界面实现

    千次阅读 2017-06-25 15:47:07
    Web前端案例_QQ登录界面实现 这篇写一个关于web前端的实现案例。 1.目的:利用div+css实现网页版QQ登录前端界面

    Web前端案例_QQ登录界面实现


    这篇写一个关于web前端的实现案例。


    1.目的:利用div+css实现网页版QQ登录前端界面


    2.分析:简单的一个前端界面,各种标签的混用以及css的设计


    3.代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #d1{
    	/*设置登录区域的大小、边框线、边框颜色*/
    	width:300px;
    	height:350px;
    	border:3px solid #FC3;
    	
    	/*调整位置*/
    	position:fixed;
    	top:100px;
    	left:500px;
    	
    	/*背景*/
    	background-image:url(1.jpg);
    	background-position:top center;
    	background-repeat:no-repeat;
    }
    #f1{
    	position:relative;
    	top:120px;
    	left:60px;
    }
    #d2{
    	margin:15px;
    	height:50px;
    }
    #d3{
    	margin:15px;
    }
    #in1{
    	background-image:url(head.png);
    	background-repeat:no-repeat;
    	background-position:top left;
    	height:28px;
    	text-indent:30px;
    }
    #in2{
    	background-image:url(key.jpg);
    	background-repeat:no-repeat;
    	background-position:top left;
    	height:20px;
    	text-indent:30px;
    }
    #in3{
    	position:relative;
    	left:30px;
    }
    #in4{
    	position:relative;
    	left:60px;
    }
    </style>
    </head>
    
    <body>
    <div id="d1">
    	<form action="" method="post" id="f1">
        	<div id="d2">
            用户名:<input type="text" name="username" id="in1"/><br />
            </div>
            <div id="d3">
            密   码:<input type="password" name="password" id="in2"/><br />
            </div>
            <div id="d4">
            	<input type="submit" value="登录" name="login" id="in3" />
                <input type="submit" value="注册" name="rigist" id="in4" />
            </div>      
        </form>
    </div>
    </body>
    </html>


    4.结果:




    展开全文
  • web前端登录页面 所用技术 html +css 输入框前面是特殊字体 <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> 直接引用地址 具体参考 菜鸟教程...

    一个简单的web前端登录页面

    刚开始学习css ,写的不是很标准

    所用技术 html +css

    结果展示
    在这里插入图片描述

    输入框前面是特殊字体

    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    

    直接引用地址

    具体参考
    菜鸟教程https://www.runoob.com/font-awesome/fontawesome-reference.html

    html部分:

    
    <body >
    <div class="div1">
    
        <form>
            <h2>希望工程登录</h2>
    
           <div class="input1">
               <i class="fa fa-user-o"  style="font-size: 24px"></i>
               <input type="text"placeholder="请输入账号" name="" class="in">
           </div>
            <div class="input1">
                <i class="fa fa-unlock-alt" style="font-size: 24px"></i>
                <input type="password"placeholder="请输入密码" name="" class="in">
            </div>
            <div class="input2">
                <input type="checkbox" ><span>记住密码</span>
                <input type="checkbox" ><span>自动登录</span>
            </div>
            <button class="butto">登录</button>
    
        </form>
    </div>
    
    
    </body>
    

    css布局部分:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <style>
            *{margin: 0;padding: 0}
            body{background: repeat #0a0a0a; }
             h2{position: relative ;left: 100px;top: 20px;font-weight: 100;
             }
            .div1{width: 350px;height: 300px;margin: auto;margin-top: 250px ;background-color: lavenderblush}
         .input1{width: 300px;height:40px; margin-left: 15px;margin-top: 25px}
            .input2{width: 300px;height:40px; margin-left: 10px;margin-top: 18px}
             .intout1 i{margin-left: 50px }
    
    
    
            .in{width: 200px;height: 30px; border: 2px solid green;margin-left: 20px}
    
    
          .butto{width: 100px ;height: 30px;color: green;margin-top: 20px;margin-left: 110px;border-radius: 5px}
           .input2 input{margin-left: 45px}
            butto:hover {
                color: #fff;
                background: rgb(22, 160, 93);}
        </style>
    </head>
    
    展开全文
  • web前端登录界面

    千次阅读 2020-08-16 21:32:13
    题目如下: 1.首先构建HTML代码(骨骼)... } 总结:以上就是一个简单的注册界面,由于我只学习了一个星期的web前端,因为我在JS部分写得比较简单,有可能在JS部分进行数据提交的时候会有一些小bug,仅供参考,欢迎大神来纠错哈.
  • 用jquery手写的web登录界面前端代码,欢迎讨论相互学习。
  • web 前端入坑第一篇:web前端到底是什么?有前途吗

    万次阅读 多人点赞 2016-08-01 14:49:20
    web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS 的流行...
  • 我的第一篇文章:【web前端到底是什么?有前途吗?】,在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。 也为我近期新开的 个人前端公众号:前端你别闹(webunao) 直接增加了几百粉(果然,帅的人...
  • 参考视频:https://ke.qq.com/course/320021 代码 <!DOCTYPE html> <html lang="en"> <...登录页面</title> <style> body { background-image: url("img/星空.jpg");
  • web前端——qq登录界面

    千次阅读 2018-07-16 08:45:53
    <!DOCTYPE html> <title>qq轻聊版 ...自动登录 ...('登录成功')"> <td></td> </html>
  • web-前端登录界面

    万次阅读 多人点赞 2017-09-26 15:36:57
    这个是简单的登录界面的实现,不能够拖拽,但后面会法比偶一个能够实现拖拽的登录界面 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta ...
  • web前端实现——登录页面

    千次阅读 2020-02-02 22:08:10
    https://blog.csdn.net/qq_45714923/article/details/104127720
  • web前端开发技术----登录页面

    千次阅读 2019-09-21 09:08:05
    ***##web前端开发技术----登录页面*** 欢迎访问小武的博客,今天写一段前端开发技术的一段代码。 在这里插入代码片 ```<html> <head> <meta charset="utf-8"> <title>个人学习网站</...
  • Web前端新手入门:web前端介绍

    千次阅读 2018-04-15 00:25:08
    前端:对于网站(页面)来说,有2部分,一个是网站的页面设计,用户的视觉效果等(美工完成),第二个是网页的结构设计,对页面用代码的实现(web前端开发)。二、什么是web前端开发?是网页的结构设计,对网页用代码...
  • web前端页面实例

    热门讨论 2013-06-17 13:37:39
    学习web前端开发中搜集的一些,js、jquery、css实现的web脚本。在需要的时候可以找找借鉴借鉴。
  • Web前端是干嘛的 为什么要学Web前端

    千次阅读 2019-01-12 19:24:28
    现如今各大网站的页面基本上都是使用Web前端技术完成,Web前端技术独有的特性能够让用户得到更好的体验,除此之外,还有与数据库的链接之类的小程序,微信小程序,都是靠Web前端技术来完成的。随着前端技术不断更新...
  • web前端程序界面样式

    千次阅读 2019-08-24 23:03:09
    鼎食城appj界面 仿淘宝程序设计界面 鼎食城后台管理界面 欢迎访问我的首页
  • web 前端页面

    千次阅读 2015-02-06 10:51:30
    前端又有负责出psd图的以及将psd图切成html页面,切页面就是把psd图切成我们网站可以直接应用的html页面,然后后端开发人员 可以按照html页面和需求文档直接开发。下边直接将需要的软件和怎么切页面。 所需软件为...
  • web前端的登陆页面制作

    千次阅读 2019-08-18 14:19:01
    web前端的登陆页面制作 登陆页面中有要登陆系统(网站)的名称,输入账号密码的输入框,以及登陆按钮这几个重要部分,其余的可以随便添加,但是页面布局要合理 标陆页面题在页面输入框之前的图像是特殊的字体,...
  • 【1+X Web前端等级考证 】| 最新Web前端开发中级实操

    万次阅读 多人点赞 2020-11-23 13:20:37
    但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,...
  • 好程序员web前端分享初学者必看web前端学习路线图,随着移动互联网的发展,web前端逐渐受到企业的重视,前端开发人员的薪资也水涨船高,越来越多的人看好前端行业的发展,想要转行加入。下面,好程序员web前端培训小...
  • Web前端实现界面间传值的几种方式

    千次阅读 2018-12-09 22:45:09
    在一个web项目中,会有大量的界面。有很多功能是必须要向后台发送请求才能实现的,而界面间传值可以减少不必要的、重复的发送请求操作,从而减轻后台的负担。 第一种方式:利用缓存(cookie) 假如有A, B 两个界面,要...
  • 移动端简单登录页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;/*外边距为0*/ ...
  • Odoo Web前端界面详解 - 1 Odoo Web前端界面详解- 2
  • Web前端从初级到高手之路

    万人学习 2015-12-28 16:36:35
    凡是购买本套课程的学员,可以加QQ群: 152364681,专业讲师进行在线答疑与指导,学不懂有疑问,随时问,永久服务,并赠送海量web前端练习素材,名师一路陪伴,让学员真正成为一名优秀的web前端工程师。
  • 2018web前端不好找工作之web前端面试简历补救篇

    万次阅读 多人点赞 2018-08-16 16:25:35
    web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!?   关于前端面试简历简单的介绍几点...1. 三年以上Web前端工作经验,能够独立完成中小型网站的页面和交互设计; 2. 熟练编写html、...
  • Web前端+Java实现人脸识别登录

    万次阅读 多人点赞 2019-03-25 19:50:00
    使用前端页面+java后台实现人脸登录,人脸的图像对比是调用的百度接口(百度AI开放平台)。 一、实现思路 a.前端页面调用设备摄像头获取实时图片数据。 b.通过Ajax将图片数据提交后台处理,并返回处理后的数据。 c....
  • Web前端是目前最火爆的软件开发之一,随着微信小程序的爆红和移动手机的广泛普及,无疑又给Web前端添了一把火。只要做Web前端开发必然就离不开HTML5技术。因此,不少渴求高薪工作的小伙伴都开始学习Web前端技术了。 ...
  • 随着web前端的飞速发展,学习web前端的人员也是越来越多,在移动 互联网 时代,相信我们每个人的手机上都装有数十个APP,这些APP的开发其实也和当下热门的 Web 前端开发息息相关。 事实上,如今一半以上的APP都是...
  •  随着移动互联网的发展,web前端逐渐受到企业的重视,前端开发人员的薪资也水涨船高,越来越多的人看好前端行业的发展,想要转行加入。下面,给大家分享一份web前端学习路线图,希望对初学者有所帮助。  Web前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 357,054
精华内容 142,821
关键字:

web前端登录页面