描述:
刚开始写的时候,想着就是将这个框架分为三部分,整体一个,上面横栏一个,下面正方形一个,正方形内含有两个文本框,一个复选框,一个提交按钮。
刚开始我设置了整体框的大小以及上面横栏的大小,以设置不同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>
刚刚了解到一般的页面应该是将HTML和CSS样式分开写,HTML创建框架,CSS实现具体内容显示。