一、网站注册页面显示案例
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 name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>
文件上传项
<input type=”file” name=””/>
文本输入域
<textarea name=””></textarea>
提交按钮
<input type=”submit” //具备将整个表单提交到服务器的功能
value=””/> //修改按钮上面的内容
普通按钮
<input type=”button” value=””/>
重置按钮
<input type=”reset” 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="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%" />
</td>
</tr>
<!--友情链接-->
<tr>
<td align="center">
<p>
<a href="../案例一：网站信息显示页面/网站信息显示页
面.html">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明 </a>
<a href="../案例三：网站友情链接显示页面/网站友情链接显示
页面.html">友情链接 </a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明 </a>
</p>
Copyright © 2005-2016 商城 版权所有
</td>
</tr>
</table>
</body>
</html>二、使用 CSS 完成网站首页重构
1.需求分析
昨天我们已经使用 table 进行首页的一个布局，但是使用 table 进行布局存在缺陷，
而一般的布局都会采用 DIV+CSS 来进行布局。显示的效果如下：
2.技术分析
2.1 DIV 相关的技术
Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，
必须结合 CSS 来使用。它主要用于页面的布局。
Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必
须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
2.2 CSS 相关的知识
什么是 CSS？
CSS 的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
CSS 如何使用？
语法和规范
选择器{
属性名 1:属性值 1; //此处分号不能省略
属性名 2:属性值 2;
属性名 3:属性值 3; //此处的分号可以省略，建议写
上
}CSS 的引入方式
CSS 的引入方式分为三种
第一种：行内引入
<div style="color:red;font-size: 100px;">
java
</div>第二种：内部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>第三种方式：外部引入
如果<style type=”text/css”></style>优先级问题:
谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则)
CSS 的选择器
CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
ID 选择器
#id 属性名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}Id 保证唯一。
元素选择器
元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}如果多个相同的元素设置相同的样式，使用此种方式最为合适。
类选择器.
类名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}对多个元素设置相同的样式，此时使用类选择器比较合适。
CSS 的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为
止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在
一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到
包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使
框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左
浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向
下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它
浮动元素“卡住”：
清除浮动
我们要对网站进行布局，显示效果希望是上图左边的效果，此时我们会将框 1 和框 2 向
左进行浮动，由于使用了浮动，它们已经脱离了文档流，框 3 会上移至原来框 1 的位置，导
致的现象是框 3 隐藏在框 1 下面。
那么此时，我们可以清除浮动来清除之前框 1 和框 2 使用浮动后造成的问题！
解决办法：
在框 3 的前面定义一个 div(<div id=”three”></div>)
定义 CSS 样式：
#three{
clear:both;
}CSS 中如何让块级元素成为内联元素
我们可以使用个 CSS 中的 display 属性(inline)进行设置
3.步骤分析
第一步：先定义个大的 div，然后嵌套 8 个小的 div。
第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div
第三步：(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)
第四步：(第三行)在小 div 里面放置一张图片
第五步：(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div，最后一在右边的 div 里面嵌套 10 个 div)
第六步：(第五行)在小 div 里面放置一张广告图片
第七步：(第六行)复制第四行的代码
第八步：(第七行)在小 div 里面放置一张广告图片
第九步：(第八行) 在小 div 里面放置超链接和文字内容。
4.代码实现
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style type="text/css">
#logo{
border: 1px solid red;
width: 1300px;
height: 50px;
}
.top{
border: 1px solid blue;
width: 33.1%;
height: 48px;
float: left;
}
#menu{
border: 1px solid black;
width: 1300px;
height: 50px;
background-color: black;
}
ul li{
display: inline;
color: white;
}
#product{
border: 1px solid red;
width: 1300px;
height: 564px;
}
#product_top{
border: 1px solid blue;
width: 1300px;
height: 60px;
}
#product_botttom{
border: 1px solid black;
width: 1300px;
height: 500px;
}
#product_botttom_left{
border: 1px solid green;
width: 190px;
height: 500px;
float: left;
}
#product_botttom_right{
border: 1px solid red;
width: 1105px;
height: 500px;
float: left;
}
#big{
border: 1px solid black;
width: 550px;
height: 248px;
float: left;
}
.small{
border: 1px solid blue;
width:182px ;
height: 248px;
float: left;
/*让块级元素文本内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
/*去掉超链接的下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--整体大div-->
<div id="">
<!--logo部分div-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="../img/heade`r.png" height="46px" />
</div>
<div class="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--导航栏部分div-->
<div id="menu">
<ul>
<li style="font-size: 25px;">首页</li>
<li>手机数码</li>
<li>电脑办公</li>
<li>鞋靴箱包</li>
<li>充值点卡</li>
</ul>
</div>
<!--轮播图div-->
<div id="">
<img src="../img/1.jpg" width="1300px" />
</div>
<!--最新商品div-->
<div id="product">
<div id="product_top">
<span style="font-size: 30px;">最新商品
</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_botttom">
<div id="product_botttom_left">
<img src="../img/big01.jpg" width="100%" height="100%"
/>
</div>
<div id="product_botttom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg"
width="100%" height="100%"/></a>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--广告图片div-->
<div id="">
<img src="../img/ad.jpg" width="1300px"/>
</div>
<!--热门商品div-->
<div id="product">
<div id="product_top">
<span style="font-size: 30px;">热门商品
</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_botttom">
<div id="product_botttom_left">
<img src="../img/big01.jpg" width="100%" height="100%"
/>
</div>
<div id="product_botttom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg"
width="100%" height="100%"/></a>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg"/></a>
<p><a href="#" style="color: gray;">电炖锅</a></p>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--广告图片div-->
<div id="">
<img src="../img/footer.jpg" width="1300px" />
</div>
<!--链接和版权信息div-->
<div id="bottom">
<p>
<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关
于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明 </a>
<a href="../案例三：网站友情链接显示页面/网站友情链接显示页
面.html">友情链接 </a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明 </a>
</p>
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>此案例使用了 CSS 的哪些内容：
去掉超链接的下划线：
a{
text-decoration: none;
}让 div 居中
margin：0px auto;
让块级元素成为内联元素
display:inline;
块级元素内容居中
text-align:center;
5.总结
5.1 盒子模型
1.盒子的组成
单个盒子
白话解说：
上图中，红色边框为手机的外包装盒，而且外包装盒有一定的厚度(border)，为了保护手机在运送的过程中不被磕坏，我们在盒子里面四周填充了一层泡沫，并且泡沫也有一定的厚度(padding)，这层泡沫将手机包裹住，手机就是整个盒子的核心内容(content)。
可以这么对比记忆：
手机------>>>内容(content)
泡沫------>>>padding
包装盒---->>>boder
外包装间距-->>>margin
多个盒子：
2.盒子取值计算
我们在修改页面元素位置的时候，需要设定它相对于盒子的位置，那么我们有必要清楚
关于盒子模型里面的取值相关问题。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边
距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和
外边距的值均为 0.
占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border
均为 0，假如我们设定了区域内容的 width 和 height，那么此时整个元素框的总尺寸就是
该区域内容的宽高了，此时，如果设定了 margin 值，那么整个元素框的总尺寸会发生变化
(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原
有大小减去设定的 margin 值)。
附：图解说明盒子模型取值问题
5.2 其它选择器
层级选择器
可以使用层级选择器设置列表的样式
元素名 子元素名{
属性名 1:属性值 1; // 此处分号不能省略
属性名 2:属性值 2;
属性名 3:属性值 3; //此处的分号可以省略，建议写
上。
}属性选择器
语法：
元素名[属性名=”属性值”]{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
</style>
</head>
<body>
用户名：<input type="text" name="username"/><br />
密码：<input type="password" name="password" />
</body>
</html>显示效果：