首先请老师原谅，我今天没有写那个公文案例，因为我以前学习不精，然后就算写了，也是在有模板的情况下写的。
我现在每天在刻苦学，通过案例在一点一点的学每一块知识。
今天先报告进度：html+css 学完，是通过一个主界面以及注册页面来学。
先给大家看下结果：
用两种方法 1、table 表格便签来实现 2、div+css 实现
分别贴上代码：1、table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="1300px" align="center">
<tr>
<td>
<table width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" alt="" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="4" 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>
<img src="../img/1.jpg" width="100%" alt="" />
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr height="50px">
<td colspan="7">
<font size="5"> 最新商品
<img src="../img/title2.jpg" alt="" />
</font>
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="../img/big01.jpg" height="100%" alt="" />
</td>
<td colspan="3" width="555px" height="250px">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" alt="" /></a>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="../img/ad.jpg" width="100%" alt="" /></td>
</tr>
<tr>
<td>
<table width="100%">
<tr height="50px">
<td colspan="7">
<font size="5"> 热门商品
<img src="../img/title2.jpg" alt="" />
</font>
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="../img/big01.jpg" height="100%" alt="" />
</td>
<td colspan="3" width="555px" height="250px">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" alt="" /></a>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small03.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" alt="" /></a><br />
<a href="#">
<font color="gray">电炖锅</font>
</a>
</a><br /><br />
<font color="red">￥499</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="../img/footer.jpg" width="100%" alt="" /></td>
</tr>
<tr>
<td align="center">
<font>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a> <br /><br />
Copyright ©2005-2016传智商城 版权所有
</font>
</td>
</tr>
</table>
</body>
</html>
2、div+css
(稍等，马上就贴）
主要遇到的问题是：
1、标签的使用规则，就是哪个标签不能嵌套哪个
2、遇到问题需要查询手册对应的标签，我相信通过熟练的运用，会一点一点熟悉的
来源：https://www.cnblogs.com/022414ls/p/12012466.html