积跬步，聚小流-------一个登录中的知识点

最新推荐文章于 2021-04-03 04:54:23 发布

麦田里的少年

最新推荐文章于 2021-04-03 04:54:23 发布

阅读量2.3k

点赞数 2

分类专栏：工作前三年 - 前端基础文章标签：学习记录前端登录界面

本文链接：https://blog.csdn.net/marSmile_tbo/article/details/42090425

版权

工作前三年 - 前端基础专栏收录该内容

95 篇文章 3 订阅

订阅专栏

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

先来看下简单的效果：

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

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

	#back_login{
			width: 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;}

分别为图片地址、左距离、上距离、重复与否，这是其一，再有一点：

οnmοuseοver=this.focus();this.select();

这两点通常是连续的，鼠标划过时，获得输入焦点，并且全选已输入的内容，这也是应该注意的地方，如果说再有比较重要的话，应该是：

var primaryValue=document.getElementById(param).defaultValue;

defaultValue属性是一个非常方便的dom属性，应用还是比较频繁的，也应该多加记忆。

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

麦田里的少年

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
积跬步，聚小流-------一个登录中的知识点

一个小小的登录，原来也包含如此之多的知识点啊
复制链接

扫一扫

专栏目录

积跬步，聚小流-------一个登录中的知识点

“相关推荐”对你有帮助么？