java全栈day34---表单CSS

今日内容介绍

1 使用html的表单标签编写“注册页面”

2 使用DIV和CSS重写网站首页

所有的html标签中，表单标签是最重要的。在实际开发中，最经典的实例就是用户注册，覆盖 了表单标签的所有的元素。效果图如下：

本案例中使用的标签如下:

• <form>
• <input>
• 〈select〉

案例相关标签

1.2.1.1     表单标签：<form>

<form>表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据 需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。

■          action属性：请求路径，确定表单提交到服务器的地址（路径）

■          method属性：请求方式。常用的取值：GET、POST

<table width="600">

<tr>

<td colspan=，，3，，>

<font color=，，#3164af，，>会员注®</font> USER REGISTER

</td>

</tr>

<tr>

<td align=，，right，，>用户名</td>

<td colspan= "2 "Xinput type="text" name= " 1 oginname" size=” 60’’/> </td> </tr>

<tr>

<td align=’’right’’>密石马</td>

<td colspan= "2 "Xinput type=" pas sword" n ame = " 1 o g i npwd " size=” 60’’/> </td> </tr>

<tr>

<td align=’’right’’>确认密石马</td>

<td colspan="2"Xinput type= "password" name="reloginpwd" size=”60’’/> </td> </tr>

<tr>

<td align="right">Email</td>

<td colspan= "2 "Xinput type="text" name= "email" size=" 60 "/> </td>

</tr>

<tr>

<td align=，，right，，>姓名</td>

<td colspan= "2 "Xinput name="text" name= "username” size=” 60’’/> </td> </tr>

<tr>

<td align=’’right’’>性另lj</td>

<td colspan=，，2，，>

<input type="radio" name=”gender” value=”男” checked=”checked” />男 <input type="radio" name=”gender” value=’’女’’ />女

</td>

</tr>

<tr>

<td align=，，right，，>出生日ffi</td>

<td colspan= "2 "Xinput type="text" name= "birthday" size=" 60" /> </td> </tr> <tr>

<td width= "8 0" align=”right验证石马</七<1>

<td width="100"Xinput type="text" name="verifyCode" /> </td> <tdximg src="img/code . jpg" /> </td>

</tr>

</table>

我们将使用UI工程师经常使用DIV+CSS方式进行布局，这种布局方式更为灵活。

相关知识点:

2.2.1什么是div

div就是html —个普通标签，进行区域划分。特性：独自占一行。独自不能实现复杂效果。必 须结合CSS样式进行渲染。 div通常其是块级元素

＜div＞可定义文档中的分区或节(division/section)。

标签可以把文档分割为抽立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与 其关联。

如果用id或class来标记＜div＞，那么该标S的作用会変得更加有效。

CSS

案例分析

整个案例需要最外层提供一个div，用于作为父容器，方便这个页面的布局> 整个首页信息量比 较大，整个实现过程，将采用分步骤，一个区域一个区域独立完成。每一个区域布局完成之后，一 并填充数据。最终将整个页面编写完成。