通过CSS3的选择器基础设计一个简单的登录界面

最新推荐文章于 2023-04-02 23:21:37 发布

qq_50550989

最新推荐文章于 2023-04-02 23:21:37 发布

阅读量168

点赞数

分类专栏：入门类文章标签： css3 html

本文链接：https://blog.csdn.net/qq_50550989/article/details/112989977

版权

入门类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这次编写了一个比较简单的email登录界面，主要运动到的是动态类的选择器：即hover行为类.首先附上运行截图：一个最简单的用户登录界面
然后是代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
		input[type = "submit"]{/鼠标不经过时的样式
		margin-left: 4.2em;
		border:solid 1px;
		padding : 0.5em 3em;
		color:#444;
		background:#f99;
		border-color: #fff #aaab9c #aaab9c #fff;
		zoom:1;
		input[type = "submit"]:hover{/鼠标经过时的样式
			color:#800000;
			background:transparent;
			border-color:  #aaab9c #fff #fff #aaab9c ;
		}
		</style>
	</head>
	<body>
		
			<h2>用户登录</h2>
			<form id= "login" action ="#" method = "post">
				<label for ="email">Email</label>
				<input type ="text" id ="email" name ="email"/><br><br>
				<label for = "password">密码</label>
				<input type ="password" id = "password" name ="password"/><br><br>
				<input type ="submit" name = "commit" value ="登录"/>
				</form>
			
			
				
				
	</body>
</html>

qq_50550989

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过CSS3的选择器基础设计一个简单的登录界面

这次编写了一个比较简单的email登录界面，主要运动到的是动态类的选择器：即hover行为类.代码如下：<html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> input[type = "submit"]{/鼠标不经过时的样式 margin-left: 4.2em; border:solid 1px; p
复制链接

扫一扫