zoukankan      html  css  js  c++  java
  • 积跬步,聚小流-------一个登录中的知识点

    前几天心血来潮,做了一个登录界面,发现尽管是简单的一个登录。容纳的知识点倒是不少呢。

    先来看下简单的效果:


    那就来简单说下。都设计了哪些知识点呢?

    首先:居中;这里我使用的是绝对位置的负距离实现居中。也就是说position为absolute,而left和top都为50%,而margin-left和margin-top都为width和height的一半的值的相反数

    	#back_login{
    			 400px;
    			height: 500px;
    			background-color: #ffffff;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			margin-top: -250px;
    			margin-left: -200px;
    			border: 1px solid #0088cc;
    			border-radius:20px; 
    			-webkit-border-radius:20px;
    			-moz-border-radius:20px;
    		}
    这是比較经经常使用到的方法。可是有个问题存在,也就是说你的width和height最好是固定长度和距离的,假设都是未知的话,就要用js进行运算了,假设仅仅是为了居中的话实在是有些划不来。然后我们再来回顾下还有哪些方法呢?

    有两种方法是有些类似的<center></center>这种方法想必大家都不会陌生。而它在某种程度上和text-align:center是有些类似的,它对它内部的全部元素都会进行居中操作,而假设内部元素多的话则须要进行一一设置。

    事实上最開始的时候,我是经常会用的。就是我最初開始居中的时候经常使用的方法:margin:o auto。而不幸的是,在相当长的一段时间内。我一度无法使用它,直到最后才发现原因,在自己主动生成的jsp中总是

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    而假设将这个声明改动为:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    而能够完美的实现居中效果了,这个最大的优点是能够,将外部元素width:100%。而内部元素设置固定宽度来居中啊。也就是这个效果啊


    当然除了水平居中还有垂直居中,而通常我会用line-height和padding来分别实现文本和块级元素的垂直居中效果

    然后,就是圆角问题

    假设说css3能够兼容的话,那无疑会是程序员们的福音,可是事实往往是残酷的,也就让圆角成了一个问题,而记忆中我对圆角的实现办法也是千奇百怪的。记得最初是用的是图片。出效果后还自己美了好久,如今想想委实有些羞愧,再后来就学会了border-radius。也就同一时候開始面对css3的兼容问题了,记得最初的个人解决的方法是

    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    强制使用ie最新内核,也就是外观仍然是ie,而假设安装了针对ie8下面的浏览器的对应插件(Google Chrome Frame)的话。则内核则已经改为chrome,当然这是有一些局限性的,而在前一阵与一个朋友的交流中。得知了一个还不错的兼容方式(PIE.JS),试用后感觉确实还不错的。对于css3的一部分效果还是有效果的。

    再来。是placeholder和切割线效果,在前面的博客中都已经介绍过了,在这里就不多说了。

    仅仅是来介绍几个细节问题,

    #loginName{background:url(img/login_id.png) 96% 3px no-repeat;}
    分别为图片地址、左距离、上距离、反复与否,这是其一,再有一点:

    onmouseover=this.focus();this.select();
    这两点一般是连续的。鼠标划过时,获得输入焦点。而且全选已输入的内容,这也是应该注意的地方。假设说再有比較重要的话,应该是:

    var primaryValue=document.getElementById(param).defaultValue;
    defaultValue属性是一个很方便的dom属性,应用还是比較频繁的。也应该多加记忆。



    临时想起来的话就是这些了,先记忆下,近期须要写年终总结了,发现工作这一年来实际上学的确实不少啊,再加上平日里自己的学习。忙碌是忙碌了点。总算是没再让自己的时光白白流逝,心里很多其它的还是欣慰,蛮开心的...





  • 相关阅读:
    1.权限管理系统
    Django实战1-权限管理功能实现-01:搭建开发环境
    Django实战1-权限管理功能实现-02:项目设置
    Django实战1-权限管理功能实现-03:用户认证
    Django实战1-权限管理功能实现-04:系统入口
    Django实战1-权限管理功能实现-05:组织架构的添加
    Django实战1-权限管理功能实现-06:知识扩展-Django表单
    2.项目环境搭建
    mysql 基础
    Spring Security中 SecurityContextHolder.getContext().getAuthentication().getPrincipal()获取当前用户
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5137269.html
Copyright © 2011-2022 走看看