UI设计

作者：黑客灵魂 | 2024-07-28 17:29:46

踩

ui设计

1.背景 background:color ,image(position、repeat、size、attachment、all-range),

background:#fff url(' ') [ top left] [repeat: no-repeat、cover、] [attachment:fixed]

2.透明度 opacity:0.8

filter:alpha(opcity=80)

3. input框缩进 padding-left:

text-indent:

4. outline:none; 小蓝框

input:focus{ box-shadow:0 0 3px #000 inset;}

5. 伪类 :hover{ }

a:hover .bt1:hover

6.鼠标样式 cursor:pointer

7.html css 结构层次合理同一功能尽量使用统一样式

8.min-width min-height

9.绝对定位相对定位

10.流式页面

效果图：

代码如下：


<!DOCTYPE html>
<html>
<head>
<script src="../新项目/js/usual.js"></script>
  <meta charset="UTF-8">
  <title>UI图</title>
  <style>
  html,body{
    width:100%;
    height:100%
	}
	
   body{
	margin:0;
	padding:0;
	background-size: 100%;
   }
   .container{
   position:relative;
	width:100%;
	height:100%;
	background:#4589ae;
	background-image:url(../images/1019.jpg);
	background-repeat:no-repeat;
	background-size:cover;
   }
   .tu{
	width:30%;
	height:60%;
	text-align:center;
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	min-width:300px;
	min-height:400px;
	
   }
   .title{
	width:100%;
	height:15%;
	font-size:100%;
	font-weight:900;
	color:white;
	background-color:#4589ae;
   }
   
   .cont{
	width:100%;
	height:82%;
	font-size:100%;
	color:#649cf1;
	font-weight:900;
	background-color:white;
   }
   .cont input{
   text-indent:2%;
   margin:2% 0;
	width:80%;
	height:8%;
	outline:none;
	min-width:30px;
	min-height:14px;
	border:1px solid #649cf1;
   }
   .cont input:focus{ 
   box-shadow:0 0 3px 2px #649cf1 inset;
   }
   .cont button{
   height:8%;
	width:80%;
	background-color:#649cf1;
	border:none;
	
	outline:none;
	
   }
   .cont button:hover{
	cursor:pointer;
   }
   .bt_span{
	color:white;
	
	
   }
   
  </style>
</head>
<body>
  <div class="container">
    <div class="tu">
		<div class="title">
			<div style="width:100%;height:30%;"></div>
			<span>Please Enter Your New Password</span>
		</div>
		<div class="cont">
			<div style="width:100%;height:5%;"></div>
			<span>Your Account</span>
			<input />
			<div style="width:100%;height:13%;"></div>
			<span>New Password</span>
			<input  />
			<div style="width:100%;height:5%;"></div>
			<span>Confirm Your New Password</span>
			<input  />
			<div style="width:100%;height:5%;"></div>
			<button><span class="bt_span">Finish</span></button>
		</div>
	</div>
     
  </div>
  <script>
  
	
	$(document).ready(function(){
		
	
		var scwidth=$(window).width();
		var scheight=$(window).height();
		var scwidth1=$('.tu').width();
		var scheight1=$('.tu').height();
		
		var endwidth=(scwidth-scwidth1)/2;
		var endheight=(scheight-scheight1)/2;
			$('.tu').css({
                    
					'top':endheight+'px',
					'left':endwidth+'px'
                });
		
	});
	$(window).resize(function(){
		var scwidth=$(window).width();
		var scheight=$(window).height();
		var scwidth1=$('.tu').width();
		var scheight1=$('.tu').height();
		
		var endwidth=(scwidth-scwidth1)/2;
		var endheight=(scheight-scheight1)/2;
			$('.tu').css({
                    
					'top':endheight+'px',
					'left':endwidth+'px',
					
                });
				
	});
  </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/895146