前端基础网页
- 这个记录一下学的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