您的位置：首页 > Web前端 > CSS

Java Web 2.2.3 案例——利用CSS对注册页面实现修饰

2017-09-20 20:32 417 查看
【例2-8】2-9的注册页面，没有修饰，，不够美观，采用CSS修饰页面，重新设计页面。

【分析】采用三步逐步实现，完善设计

第一步：按所给出的原始界面，设计HTML文档：2_8_register.html。

第二步：设计CSS文档：2_8_Css.css，在该文档中包含所需要的格式控制，从而形成修饰后的页面。

第三步：利用2_8_Css.css中定义的样式，重新设计2_8_register.html，形成新网页2_8_rigsterCss.html。

【实现1】HTML文档的实现

<html>

    <head><title>注册页面</title></head>

    <body>

      <form action="">

<table border="0" align="center" width="600">

  <tr><td colspan"3" align="center" height="40">填写注册信息</td></tr>

  <tr><td align="right">用户名：*</td>

<td><input type="text" name="username"/></td>

<td>用户名由字母开头，后跟字母。数字或下划线！</td>

  </tr>

  <tr><td align="right">密码：*</td>

<td><input type="password" name="userPwd"/></td>

<td>设置登录密码，至少六位！</td>

  </tr>

<tr><td align="right">确认密码：*</td>

<td><input type="password" name="userPwd1"/></td>

<td>请再次输入密码！</td>

  </tr>

<tr><td align="right">性别：*</td>

<td><input type="raido" name="userSex" value="男" checked/>男

<td><input type="raido" name="userSex" value="女"/>女</td>

<td>选择你的性别！</td>

  </tr>

<tr><td align="right">邮箱地址：*</td>

<td><input type="text" name="userEmail"/></td>

<td>请填写邮箱，用来找回密码！</td>

  </tr>

<tr><td align="right" valign="top">基本情况：*</td>

<td colspan="2">

<textarea name="userBasicInfo"rows="5" cols="50" /></textarea></td>

  </tr>

<tr><td colspan="3" slign="center" height="40">
<input type="checkbox" name="accept" value="yes"/>

我已经仔细阅读并同意接受用户使用协议</td>

</tr>

<tr><td colspan="3" align="center" height="40">

<input type="submit" value="确认"/> 

<input type="reset" value="取消"/>

</td>

</tr>

</table>

</form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航