前端基础网页
- 这个记录一下学的web皮毛的一个小作业
#商城首页实现#
效果图：
#老师讲解的思路大概就是，先规划，再写，思路是：
#商城首页步骤：
布局
使用表格进行布局 分为9行1列
第一行：存放logo信息 嵌套一个一行三列的表格
第二行：存放菜单信息 背景为黑色 超链接是白色的 每个超链接之前有距离
第三行：存放轮播图 图片
第四行：存放热门商品信息 嵌套一个三行七列的表格
第五行：存放图片信息
第六行：存放热门商品信息 嵌套一个三行七列的表格
第七行：存放物流图片
第八行：存放友情链接 超链接居中显示 并且需要控制距离
第九行：存放版权信息 居中显示
学了这些简单的代码后，我就开始了制作，打了很久做完了：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web作业3</title>
</head>
<body>
<table width="100%">
<!--
作者：offline
时间：2020-07-24
描述：第一行：存放logo信息 嵌套一个一行三列的表格
-->
<tr>
<td>
<table width="100%">
<tr>
<td><img src="../img/logo2.png"/></td>
<td><img src="../img/header.png"/></td>
<td>
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第二行：存放菜单信息 背景为黑色 超链接是白色的 每个超链接之前有距离
-->
<tr>
<td bgcolor="black" height="50px">
<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>
<!--
作者：offline
时间：2020-07-24
描述：第三行：存放轮播图 图片
-->
<tr>
<td>
<img src="../img/1.jpg" width="100%"/>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第四行：存放热门商品信息 嵌套一个三行七列的表格
-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<p><font size="6" >热门商品</font></p>
</td>
<td colspan="6">
<img src="../img/title2.jpg" align="left" />
</td>
</tr>
<tr>
<td rowspan="2">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
</tr>
<tr>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
</tr>
</table>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第五行：存放图片信息
-->
<tr>
<td>
<img src="../img/ad.jpg" width="100%"/>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第六行：存放热门商品信息 嵌套一个三行七列的表格
-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<p><font size="6" >热门商品</font></p>
</td>
<td colspan="6">
<img src="../img/title2.jpg" align="left" />
</td>
</tr>
<tr>
<td rowspan="2">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
</tr>
<tr>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
<td>
<p align="center">
<img src="../img/small03.jpg"/>
<a href=""><p align="center">电热锅</p></a>
<p align="center"><font color="red">￥299.9</font></p>
</p>
</td>
</tr>
</table>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第七行：存放物流图片
-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第八行：存放友情链接 超链接居中显示 并且需要控制距离
-->
<tr>
<td align="center">
<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>
</td>
</tr>
<!--
作者：offline
时间：2020-07-24
描述：第九行：存放版权信息 居中显示
-->
<tr>
<td align="center">
<p>Copyright © 2005-2016 中公商城 版权所有</p>
</td>
</tr>
</table>
</body>
</html>
<!--
商城首页步骤：
布局
使用表格进行布局 分为9行1列
第一行：存放logo信息 嵌套一个一行三列的表格
第二行：存放菜单信息 背景为黑色 超链接是白色的 每个超链接之前有距离
第三行：存放轮播图 图片
第四行：存放热门商品信息 嵌套一个三行七列的表格
第五行：存放图片信息
第六行：存放热门商品信息 嵌套一个三行七列的表格
第七行：存放物流图片
第八行：存放友情链接 超链接居中显示 并且需要控制距离
第九行：存放版权信息 居中显示
>
这些只是基础，冰山一角的千万角，希望接下来的路努力坚持下去，a
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
