UI制作优美的页面

最新推荐文章于 2025-08-11 12:24:15 发布

原创最新推荐文章于 2025-08-11 12:24:15 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了一种利用HTML和CSS实现美观且响应式的网页布局方法，并通过jQuery增强用户交互体验，包括输入框聚焦效果、按钮悬停变化及页面自适应调整。

通过上节我们提到的一些样式属性，我们可以对一些简单页面进行美化加工，使用户得到更好的体验。

现在已经做好了放毒：

表面上并没有独特之处，但是细节会是用户有更加好的操作体验。

基础上。中间的框上下左右居中。左右宽度随页面宽度变化，但是他又mini-width，缩小到一定程度，就会为固定值。使其更加美观

鼠标点击输入框会有阴影：(并且有首行缩进2个文字的功能)

当鼠标停留在finish上时，边框也会发生变化，更有操作感觉：

鼠标未在上面停留：

不多说了，某些小伙伴已经等不及了，直接放代码


<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>

<style>
	.body{
		width:100%;
		height:100%;
		background-image: url(1.jpg);
		background-repeat:no-repeat;
		background-size :cover;
		background-position: center top;
		overflow-x:hidden;
		display:block;
		padding-bottom:50px;	
		opacity:0.9;
		filter:alpha(opacity=90);
		position:relative;
	}
	.mid{
		width:30%;
		min-width: 400px;
		height:450px;
		margin:0 auto;
		background-color:white;
		padding-bottom:50px;	
		opacity:0.9;
		filter:alpha(opacity=90);
		position:relative;
	}
	.mida{
		width:100%;
		height:60px;
		margin-left:0px;
		background-color:#438eb9;
		text-align:center;
		line-height:60px;
		
	}
	.midb{
		width:100%;
		height:50px;
		margin-left:0px;
		
		text-align:center;
		line-height:60px;
		margin-top:10px;
		
	}
	.input_1{
		width:80%;
		height:30px;
		margin-left:10%;
		text-indent:2em;
		line-height:40px;
		margin-top:0px;
		
	}
	input:focus{
		outline:none; 
		border:1px solid #4589ae;
		box-shadow:0px 0px 3px #000 inset;
	}
	.midc{
		width:80%;
		height:35px;
		margin-left:10%;
		margin-top:10px;
		background-color:4589ae;
		text-align:center;
		line-height:35px;
		margin-top:40px;
		cursor:pointer;
	}
	#button_a:hover{
		outline:none; 
		border:1px solid #4589ae;
		box-shadow:0px 0px 3px #111 inset;
	}
</style>
</head>
<body style="margin:0 auto">
	<div class="body">
	
		<div class="mid">
			<div class="mida">
				<font size="4" color="white"><b>Plaese Enter Your New Password</b></font>
			</div>
			<div class="midb">
				<font size="4" color="4589ae" weight="500">Your Account</font>
			</div>
			
			<input class="input_1" "type="text">
			
			<div class="midb">
				<font size="4" color="4589ae">New Password</font>
			</div>
			
			<input class="input_1" "type="text">
			
			<div class="midb">
				<font size="4" color="4589ae">Confirm Your New Password</font>
			</div>
			
			<input class="input_1" "type="text">
			
			<div class="midc" id="button_a" type="button">
				<font size="2" color="white">Finish</font>
			</div>
			
		</div>
	</div>
	
</body>
<script type="text/javascript">
	$(function(){
		$(window).on('resize load',function(){
			var win_height = $(window).height();
			var whole_height = $(".mid").height();
			$(".mid").css('top',win_height/2 - whole_height/2 - 40 + 'px')
			
		})
	})
</script>
</html>