css设计登陆框

最新推荐文章于 2024-11-11 13:42:50 发布

原创

最新推荐文章于 2024-11-11 13:42:50 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #login #设计 #用户体验

本文介绍了如何利用CSS3设计登录框，强调了其对用户体验的重要性，并展示了仅使用自定义字体（如Margot Fette）实现的独特效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果如下：

唯一用到的素材是 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
			{
				font-family: Margot_Fette;
				color: rgb(92, 167, 186);
			}