CSS-表单应用（防聚美优品做的一个简易登录界面）

最新推荐文章于 2023-04-22 18:29:42 发布

dweblover

最新推荐文章于 2023-04-22 18:29:42 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css 表单登录界面

本文链接：https://blog.csdn.net/dweblover/article/details/83475938

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先上效果图，因为还没有用到javascript以及服务器方面的知识所以这些表单中的内容都不能提交到服务器，只是一个简单的界面并不能实现提交功能，我也是在边学边写中，望大家多多见谅，也能多多支持我.感谢感谢。代码中都有详细的解释说明，有写的不好的也希望高手给我点意见!

效果图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>

<style type="text/css">
<!--清除默认样式-->
*{
margin:0px;
padding:0px;
}
<!--给整体设置一个宽度高度自适应,并且让其水平居中-->
.f1{
	width:600px;
	margin:50px auto;
	
}
<!--给第一个div设置一个宽度高度-->
.box1{
	width:600px;
	height:150px;
	
}
<!--给logo一个大小，如果会PS就更好，利用PS切图-->
.m1{
	width:100px;
	height:100px;
	float:left;<!--向左浮动-->
	margin-left:50px;<!--左外边距-->
}

span{
	display:block;<!--因为span是内联元素所以先转换成块级元素-->
	float:right;<!--向右浮动-->
	margin-right:50px;<!--右外边距-->
}
span a{
	color:#F00;<!--字体颜色-->
	line-height:100px;<!--让文本垂直居中-->
}
<!--给第二个div设置一个宽度-->
.box2{
	
	width:600px;
	
}
.j1{
	margin-left:50px;<!--左外边距-->
}
.p1{
	margin-left:50px;<!--左外边距-->
.in1{
	margin:20px 50px;
	width:500px;
	height:50px;
}
.in2{
	margin:20px 20px 20px 50px;
	width:240px;
	height:50px;
	
}
.in3{
	argin:20px 50px 20px 0px;
	width:240px;
	height:50px;
	
}

.in4
{
	margin-left:50px;
}
.in5
{
	width:500px;
	height:50px;
	background-color:#F6C;
	margin:20px 50px;
}
p{
	margin-left:50px;
}
.m2{
	width:100px;
	height:100px;
	margin:20px 50px;
}
.m3{
	width:100px;
	height:100px;
	margin:20px 50px 20px 0px;
}
.m4{
	width:100px;
	height:100px;
	margin:20px 50px 20px 0px;
}	
</style>
</head>
<body>
<form class="f1">

<div class="box1">
<img src="img/1.jpg" class="m1">
<span>还没有账号？<a href="#">30秒注册</a></span>
</div>

<div class="box2">
<input type="radio" checked="chacked" name="shouji" class="j1">手机动态密码登录
<input type="radio" name="putong" class="p1">普通登录
</div>

<div class="box3">
<input type="text" value="已注册的手机号码" class="in1">
</div>

<div class="box4">
<input type="text" value="动态密码" class="in2">
<input type="text" value="获取手机动态密码" class="in3">
</div>

<div class="box5">
<input type="checkbox" checked="chacked" class="in4">自动登录
</div>
<div class="box6">
<input type="text" value="登录" class="in5">
</div>

<p>你也可以使用以下账号登录</p>
<div class="box7">
<a href="#"><img src="img/2.jpg" class="m2"></a>
<a href="#"><img src="img/3.png" class="m3"></a>
<a href="#"><img src="img/4.png" class="m4"></a>
</div>
</form>
</body >
</html>

dweblover

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS-表单应用（防聚美优品做的一个简易登录界面）

先上效果图，因为还没有用到javascript以及服务器方面的知识所以这些表单中的内容都不能提交到服务器，只是一个简单的界面并不能实现提交功能，我也是在边学边写中，望大家多多见谅，也能多多支持我...
复制链接

扫一扫

专栏目录