关于登录页面的css样式总结，包括文字，输入框样式的一些基础美化（8）

最新推荐文章于 2024-06-19 13:45:29 发布

漫游者码农

最新推荐文章于 2024-06-19 13:45:29 发布

阅读量5k

点赞数 7

分类专栏： css3学习

本文链接：https://blog.csdn.net/xu2034029667/article/details/99558139

版权

css3学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

有图有真相

功能介绍：

第一：具有相当的适应性，平板，移动端，pc端

第二：背景加格子，还算漂亮，

第三：登录，滑入时呈现动画效果

总结：

第一：输入框，一般去掉border:none;原装相当丑，尤其是给予圆角，看到更加明显，

其次针对需要设置outline:none；选中时的状态，

适当的padding和margin,看起来舒适

第二：针对文字，调整间距，大小，粗细，位置，

第三：关于适应性，增加@media ,重点是包裹输入框的宽度，

第四：页面铺满整屏幕，用绝对定位加top:0;bottom:0;

详细代码如下：一些注释，保留在，方便查看复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			}
			* {
				box-sizing: border-box;
				/*直接决定向你内扩展,在默认情况下是不改变宽度,让元素膨胀变大*/
			}
			/*容器一般百分百*/
			
			a {
				text-decoration: none;
			}
			
			.pages_agile_info_w3l {
				background: url(ESTEEM/images/bottom.jpg);
				background-size: cover;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}
			
			.over_lay_agile_pages_w3ls {
				background: url(ESTEEM/images/overlay.png) repeat;
				padding: 11em 2em 5.5em 2em;
				height: 100%;
				width: 100%;
			}
			/*这个根据内容决定的高度多少,*/
			/*文字居中，自身水平居中垂直大小，样式*/
			
			.signin-form.profile {
				background: #FAFAFA;
				text-align: center;
				margin: 0 auto;
				width: 25%;
				padding: 3em 2em;
				/*没有改变自身位置,改变内容位置
				 因此需要找到外套的容器给予合适padding达到效果*/
			}
			/*标题黑色字体强调，文字间距，粗细，大小，以及位置*/
			
			.signin-form.profile h2 {
				font-size: 1.4em;
				font-weight: 700;
				margin: .5em 0 1.5em 0;
				letter-spacing: 5px;
			}
			/*输入框怎么样优化,加合适填充,外边距效果好很多*/
			
			.signin-form.profile form>input {
				width: 100%;
				/*给了box-size:border-box,这里内容,填充太多,挤到无法左右边距对齐，上右优先级高*/
				padding: 1em;
				margin: 1em 0;
				text-align: center;
				outline: none;
				/*聚焦时外边框不太好看*/
				letter-spacing: 1px;
				font-weight: 300;
				color: #666666;
			}
			/*此外文字居中,*/
			/*确认按钮,去掉外边框，和聚焦，*/
			
			.signin-form.profile form input[type=submit] {
				width: 100%;
				margin-top: 1rem;
				padding: 1rem;
				font-size: 1.2rem;
				font-weight: 500;
				outline: none;
				border: none;
				/*必须去掉外边框,真的非常丑*/
				background: #e53238;
				/*还有变成白色字体*/
				color: #FFFFFF;
				letter-spacing: 5px;
				-webkit-transition: .5s all;
				transition: .5s all;
			}
			
			.signin-form.profile form input[type=submit]:hover {
				background: #007ee5;
			}
			
			.signin-form.profile p a {
				font-size: 0.9em;
				color: #10364a;
				letter-spacing: 2px;
				font-weight: 600;
			}
			/*max-width从大往小放，尽量放在样式最后，因为是依次生效*/
			
			@media (max-width: 1280px) {
				.pages_agile_info_w3l {
					min-height: 698px;
				}
				.signin-form.profile {
					padding: 3em 2em;
					width: 35%;
				}
				.over_lay_agile_pages_w3ls {
					padding: 8em 3em 5.5em 3em;
				}
			}
			
			@media (max-width: 1080px) {
				.signin-form.profile {
					padding: 3em 2em;
					width: 45%;
				}
				.pages_agile_info_w3l {
					min-height: 653px;
				}
			}
			
			@media (max-width: 991px) {
				.signin-form.profile {
					padding: 3em 2em;
					width: 48%;
				}
			}
			
			@media (max-width: 800px) {
				.signin-form.profile {
					padding: 3em 2em;
					width: 64%;
				}
			}
			
			@media (max-width: 600px) {
				.signin-form.profile {
					width: 72%;
				}
			}
			
			@media (max-width: 480px) {
				.signin-form.profile {
					width: 78%;
				}
			}
			
			@media (max-width: 414px) {
				.signin-form.profile {
					width: 95%;
				}
			}
			
			@media (max-width: 375px) {
				.signin-form.profile {
					padding: 2em 1.5em;
					width: 100%;
				}
			}
		</style>
	</head>

	<body>
		<!--首先是整体容器，其次第一块区域，里面分为上下-->
		<div class="pages_agile_info_w3l">
			<div class="over_lay_agile_pages_w3ls">
				<div class="registration">
					<div class="signin-form profile">
						<!--分成四个区域：标题，表格，第三方登录，注册-->
						<h2>请登录</h2>
						<div class="login-form">
							<form action="#" method="post">
								<input type="email" name="email" placeholder="邮箱" required="">
								<input type="password" name="password" placeholder="密码" required="">
								<div class="tp">
									<input type="submit" value="登录">
								</div>
							</form>
						</div>
						<!--<div class="login-social-grids">
							<ul>
								<li>
									<a href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-rss"></i></a>
								</li>
							</ul>
						</div>-->
						<p>
							<a href="signup.html"> 没有账号?注册</a>
						</p>
						<!--<h6><a href="main-page.html">返回首页</a></h6>-->
						<!--<h6></h6>-->
					</div>
				</div>
				<div class="copyrights_agile">

				</div>
			</div>
		</div>
	</body>

</html>

漫游者码农

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
关于登录页面的css样式总结，包括文字，输入框样式的一些基础美化（8）

有图有真相功能介绍：第一：具有相当的适应性，平板，移动端，pc端第二：背景加格子，还算漂亮，第三：登录，滑入时呈现动画效果总结：第一：输入框，一般去掉border:none;原装相当丑，尤其是给予圆角，看到更加明显，其次针对需要设置outline:none；选中时的状态，适当的padding和margin,看起来舒适第二：针对文字，调整间距，大小，粗细，位置，...
复制链接

扫一扫

专栏目录