html学习阶段总结2

最新推荐文章于 2024-06-07 08:21:52 发布

wYz2213

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量200

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wYz2213/article/details/124705919

版权

ssshsh登录页面实现

1.整体效果展示：

初始页面：

可以选择登录窗口，是管理员还是普通用户

管理员登录：

普通用户登录

2.HTML代码及解释

2.1：点击出现功能实现

连接jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script>

找到需要点击的部分和需要点击才显示的部分。

<script>
$(function(){
	$('.user p').click(function(){
		$(".userlogin").toggle();
	});
	$('.student p').click(function(){
		$(".playerlogin").toggle();
	});
});
</script>

2.2整体代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/loginstyle.css">
<title>运动员管理系统首页</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script>
$(function(){
	$('.user p').click(function(){
		$(".userlogin").toggle();
	});
	$('.student p').click(function(){
		$(".playerlogin").toggle();
	});
});
</script>
</head>
<body>
<h1>运 动 员 成 绩 系 统 登 录</h1>
<div class = "login">
  <div class = "user">
      <p>管理员登录</p>
  </div>
  <div class = "student">
     <p>运动员登录</p>
  </div>
</div>
<div class="userlogin">
     <div class= "utitle">管理员登录</div>
     <div class= "uname">
     
     <input type="text" name="userName">
     </div>

     <div class= "upassword">
     
     <input type="password" name="userpassword">
     </div>

     <div class= "ul">
     <button> 登录</button>
     </div>
</div>

<div class="playerlogin">
     <div class= "ptitle">运动员登录</div>
     <div class= "pname">
     
     <input type="text" name="playerName">
     </div>

     <div class= "ppassword">
     
     <input type="password" name="playerpassword">
     </div>

     <div class= "ul">
     <button> 登录</button>
     </div>
</div>

</body>
</html>

3.css代码及解释

3.1全局设置

设置背景和页面属性，设置backg-size100%使得图片铺满页面。

*{
   margin: 0px;
   padding: 0px;
   
}
body,html{

   background-image :url("../image/webp.png");
   background-size: 100% 100%;
}

3.2字体效果设置

字体效果：

实现：

text-shadow实现字体阴影，立体效果。设置加粗使字体效果更明显。color使用rgba（）可以设置字体颜色的透明度。

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
font-weight:bold;
color: rgba(120,098,160,0.6);

3.3鼠标点击相关实现

点击变色：

eg：

.user:hover
{
   background-color: rgba(255,255,255,0.7);
   cursor:pointer;
}

在需要实现点击变色效果的元素设置css的后面添加：hover

再在里面设置鼠标移动到该位置后的颜色（我的习惯是rgb数值不变，仅仅使透明的降低）

cursor：pointer；的效果是使鼠标移动到该元素的位置后鼠标指针改为手指点击的样子。

3.4关于点击展开功能的补充

eg：管理员登录

.userlogin
{
	position: absolute;
	left:15%;
	top:25%;
	width: 350px;
    height: 250px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 10px;
    display: none;
}

注意，在定义css时，disply：none；的目的是为了使该<div>处于关闭状态，当点击后才显示。若不添加该语句，虽然可以实现点击出现和关闭的功能，但是在一开始进入登录页面时就会弹出来。

*{
   margin: 0px;
   padding: 0px;
   
}
body,html{

   background-image :url("../image/webp.png");
   background-size: 100% 100%;
}
.login{
   position: absolute;
   left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
   background-color: rgba(255,255,255,0.3);
   width: 100px;
   height: 100px;
   border-radius: 50px;
   line-height: 100px;
}
.user,.student{
  background-color: rgba(255,255,255,0);
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align:center;
}
.user{
   position: absolute;
   bottom: 50%;
   border-radius: 50px 50px 0 0;
}
.user:hover
{
   background-color: rgba(255,255,255,0.7);
   cursor:pointer;

}
.student{
   position: absolute;
   top: 50%;
   border-radius: 0px 0px 50px 50px;
}
.student:hover
{
   background-color: rgba(255,255,255,0.7);
   cursor:pointer;

}

h1{
   font-size: 48px;
   font-weight:bold;
   text-align:center;
   color: rgba(120,098,160,0.6);
   position: absolute;
   top: 15%;
   left: 30%;
   text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
.userlogin
{
	position: absolute;
	left:15%;
	top:25%;
	width: 350px;
    height: 250px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 10px;
    display: none;
}
.utitle
{
    text-align: center;
	top:0%;
	bottom:75%;
	font-size: 30px;
    color: rgba(188,206,234,1);
    font-weight:bold;
    text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
	
}
.uname
{
	position: absolute;
	top:25%;
	bottom:50%;
	width: 100%;
	left:15%;

}
.upassword
{
	position: absolute;
	top:50%;
	bottom:75%;
	width: 100%;
	left:15%;
	
}
.ul
{
	position: absolute;
	top:75%;
	bottom:0%;
	width: 100%;
	left:15%;

	
}

input
{
	height: 35px;
	border:0px;
	border-radius: 5px;
	width: 70%;
}
button
{
	height: 35px;
	border:0px;
	border-radius: 5px;
	width: 70%;
	background-color: rgba(255,255,255,0.3);
	font-size: 24px;
	
}
button:hover {
	background-color: rgba(255,255,255,0.7);
	cursor:pointer;
}



.playerlogin
{
	position: absolute;
	right:15%;
	top:50%;
	width: 350px;
    height: 250px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 10px;
    display: none;
}
.ptitle
{
    text-align: center;
	top:0%;
	bottom:75%;
	font-size: 30px;
    color: rgba(136,110,169,1);
    font-weight:bold;
    text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
	
}
.pname
{
	position: absolute;
	top:25%;
	bottom:50%;
	width: 100%;
	left:15%;

}
.ppassword
{
	position: absolute;
	top:50%;
	bottom:75%;
	width: 100%;
	left:15%;
	
}

wYz2213

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html学习阶段总结2

ssshsh登录页面实现1.整体效果展示：初始页面：可以选择登录窗口，是管理员还是普通用户管理员登录：普通用户登录2.HTML代码及解释2.1：点击出现功能实现连接jquery<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>找到需要点击的部分和需要点.
复制链接

扫一扫