css设计登陆框

最新推荐文章于 2024-05-01 09:01:48 发布

jupeizhong

最新推荐文章于 2024-05-01 09:01:48 发布

阅读量1.4k

点赞数

分类专栏： web 文章标签： css css3 login 设计用户体验

本文链接：https://blog.csdn.net/jupeizhong/article/details/38965703

版权

登陆框是大部分网站的一个重要组成部分，对用户体验有很大的影响。花了一点时间自己设计了一个登陆框。

效果如下：

唯一用到的素材是 Margot Fette 字体。（自定义字体是css3特性之一）

代码如下：

<html>
	<head>
		<style>
			@font-face
			{ 
				font-family: Margot_Fette;
				src: url('Margot_Fette.ttf');
			}
			#login_panel
			{
				margin: auto;
				margin-top: 100px;
				width: 400px;
				background-color: rgb(147, 224, 255);
				text-align: center;
			}
			#login_title
			{
				background-color: rgb(92, 167, 186);
				padding: 10px;
				margin-bottom: 15px;
				font-family: Margot_Fette;
				font-size: 30px;
				line-height: 30px;
				color: white;
			}
			input
			{
				margin: 20px;
			}
			label
			{