网页制作---登录页面之HTML框架问题

最新推荐文章于 2024-08-18 19:12:17 发布

Fayeni

最新推荐文章于 2024-08-18 19:12:17 发布

阅读量3.4k

点赞数 7

文章标签： html CSS 登录页面

本文链接：https://blog.csdn.net/Fayeni/article/details/81026318

版权

描述：

刚开始写的时候，想着就是将这个框架分为三部分，整体一个，上面横栏一个，下面正方形一个，正方形内含有两个文本框，一个复选框，一个提交按钮。

刚开始我设置了整体框的大小以及上面横栏的大小，以设置不同class样式的形式写出来的效果是只有横栏的效果，后来将main_box里的整体框架的高度去掉加在了login_box里，将login_box的高30加在了login_box h3里，这样整体的框架出来了，横栏框架也出来了。我发现想要出横栏效果只需在整体框内加上一个内联框，将它的padding的左右属性距离设为0px，将内联框的框架搭在整体框内就OK。（注：font-family字体，border框的基本设置（边线粗细，边线的样式，边线的颜色），border-radius弧度）。

在处理用户名和密码框时，我遇到了怎样设置内边距，display的用法及如何设置内联框的属性等问题。

将form-all-box设置这两种框的基本属性（后面的登录按钮也可以通用）也就是内边距和颜色。将form-box设置更细节的东西，感觉和Java里类和方法的性质差不多，相同的部分用一个class。

（<div>是一个块级元素，换行是 <div> 固有的唯一格式表现。不必为每一个 <div> 都加上类或 id，常常只用其中一种。）

（class与id的区别：class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。）

（<span>块级元素，组合文档中行内元素，方便通过设置改变其样式）

（placeholder：占位符）

属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。）

（a href="###"：点击页面不跳转。）

（<a>标签：定义超链接，用于从一张页面链接到另一张页面。）

<a> 标签的 href 属性用于指定超链接目标的URL。

href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

）

（在所有浏览器中，链接默认的外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

）

<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
	
	.main_box{width: 400px;margin: 0px auto;padding: 110px 0 60px 0 ;}
	.login_box{height: 370px;font-family: normal;border: 1px solid gray;border-radius: 4px;}
	.login_box h3{height: 30px;font-size: 14px;padding: 4px 30px;border-bottom: 1px solid gray; }
	.login_box h3 span{font-weight: bold;float: left;}
	.ml{float: left;}
	.mr{float: right;}
	.form_all_box{padding: 0 30px;color: gray;}
	.form_box{display: inline-block; height: 40px;width: 338px; color: gray; border: 1px solid gray;margin-top: 35px; padding:0; text-indent: 10px; line-height: 40px;border-radius: 4px;}
	.select_btn{font-family: normal;font-size: 14px;padding: 4px 30px;}
	.form_all_box button{padding: 0 30px;border: 1px solid #1f95e2;}
	.btn_box{display: inline-block; height: 40px;width: 338px; margin-top: 15px; padding:0; text-indent: 10px; line-height: 40px;border-radius: 4px;width: 100%;  font-size: 16px; letter-spacing: 4px;font-color: white;background-color: blue;color: #fff;background-color: #1f95e2;}
</style>
</head>
<body>
<div class="main_box">
	<div class="login_box">
		<h3><span>用户登录</span><a href="www.baidu.com" class="mr">立即注册</a></h3>
		<div class="form_all_box">
			<input type="text" class="form_box" name="uers" placeholder="用户名/邮箱">			
		</div>
		<div class="form_all_box">
			<input type="text" class="form_box" name="password" placeholder="密码">
		</div>
		<div class="select_btn">
			<h4 class="ml">
				<input type="checkbox" name="select" value="下次自动登录"><span>下次自动登录</span>
			</h4>
			<h4 class="mr">
				<span class="forget_pw">忘记密码？<a href="javascript:">找回</a></span>
			</h4>
		</div>
		<div class="form_all_box ">
			<button type="submit" class="btn_box">登录</button>
		</div>
	</div>
</body>
</html>