H5&CSS学习总结

最新推荐文章于 2023-03-19 16:24:00 发布

今天的技术超过许嵩了吗？

最新推荐文章于 2023-03-19 16:24:00 发布

阅读量1.5k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/Marmara01/article/details/88617191

版权

本文总结了H5和CSS的学习，包括网站注册页面显示案例分析，深入探讨了表单标签、CSS布局技术和选择器应用，如浮动、盒子模型及清除浮动的方法。

摘要由CSDN通过智能技术生成

一、网站注册页面显示案例

1.需求分析

用户如果想要在改商城购买商品，必须成为该网站会员，首先得注册，这个注册页面显

示的效果如下：

2.技术分析

2.1 表单标签

表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来！

form 标签属性：

action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)

method,表单提交的方式(get/post/delete……等 7 种)

文本输入项

<input type=”text”

name=”” //提交到服务端必须指定的属性，其值可以任意，建议见文知意

size=”” //指定输入框的宽度

maxlenght=”” //指定输入内容的长度

readonly=”” //设置为只读

placehoder=””/> //输入内容的提示信息

密码输入项

<input type=”password” name=”” /> //提交到服务端必须指定的属性，其值可以任意，建议见文知意

单选按钮

<input type=”radio”

name=”” //分组

value=”” //提交到服务端必须指定的属性，其值可以任意，建议见文知意

checked=””/> //默认选中

多选按钮

<input type=”checkbox”

name=”” //分组

value=”” //提交到服务端必须指定的属性，其值可以任意，建议见文知意

checked=”” /> //默认选中

下拉列表

</select>

文件上传项

文本输入域

提交按钮

<input type=”submit” //具备将整个表单提交到服务器的功能

value=””/> //修改按钮上面的内容

普通按钮

重置按钮

隐藏项

<input type=”hidden” name=””/> //用于用户比较敏感的一些信息

面试题：

Get 与 post 提交方式的区别？【默认提交方式为 get】

Get 提交方式，所有的内容显示在地址栏，不够安全，长度有限制。

Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。

如果想了解其它属性查看相关的手册即可。

3.步骤分析

第一步：创建一个五行一列的表格，然后分别对每一行进行实现

第二步：直接复制之前的代码(第一行、第二行、第四行、第五行)

第三步：第三行(放置一个表单，通过表格标签进行布局)

4.代码实现

<html>

<head>

<meta charset="UTF-8">

<title>注册页面</title>

</head>

<body>

<table border="1px" width="1300px" cellpadding="0px"

cellspacing="0px" align="center">

<!--logo部分-->

<tr>

<td>

<!--嵌套一个一行三列的表格-->

<table border="0px" width="100%" cellpadding="0px"

cellspacing="0px">

<tr>

<td width="33.3%">

<img src="../img/logo2.png" />

</td>

<td width="33.3%">

<img src="../img/header.png" />

</td>

<td width="33.3%">

<a href="#">登录</a>

<a href="#">注册</a>

<a href="#">购物车</a>

</td>

</tr>

</table>

</td>

</tr>

<!--导航栏部分-->

<tr>

<td height="50px" bgcolor="black">

<a href="#"><font size="5" color="white">首页</font></a>

<a href="#"><font color="white">手机数码</font></a>

<a href="#"><font color="white">电脑办公</font></a>

<a href="#"><font color="white">鞋靴箱包</font></a>

<a href="#"><font color="white">孕婴保健</font></a>

</td>

</tr>

<!--注册表单-->

<tr>

<td height="600px" align="center"

background="../img/regist_bg.jpg">

<form action="#" method="get">

<table border="5px" width="800px" height="450px"

bgcolor="white">

<tr>

<td colspan="2">会员注册 USER REGISTER </td>

</tr>

<tr>

<td>用户名</td>

<td>

<input type="text" name="user"/>

</td>

</tr>

<tr>

<td>密码</td>

<td>

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

</td>

</tr>

<tr>

<td>确认密码</td>

<td>

<input type="password" name="repassword"/>

</td>

</tr>

<tr>

<td>Email</td>

<td>

<input type="text" name&#