<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>商城首页</title>

    </head>

    <body>

        <!--1.创建一个八行一列的表格-->

        <table border="1px" width="1300px" align="center">

            <!--2.logo部分-->

            <tr>

                <td>

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

                    <table border="1px" width="100%">

                        <tr height="50px">

                            <td width="33.3%">

                                <img src="../img/logo2.png" height="47px" />

                            </td>

                            <td width="33.3%">

                                <img src="../image/header.jpg" height="47px" />

                            </td>

                            <td width="33.3%">

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

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

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

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

            <!--3.导航栏-->

            <tr height="50px">

                <td bgcolor="black">

                    &nbsp;&nbsp;&nbsp;

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

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

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

                    <a href="#"><font color="white">鞋靴皮包</font></a>&nbsp;&nbsp;&nbsp;&nbsp;

                    <a href="#"><font color="white">家用电器</font></a>&nbsp;&nbsp;&nbsp;&nbsp;

                </td>

            </tr>

            <!--4.轮播图-->

            <tr>

                <td>

                    <img src="../img/1.jpg" width="100%"/>

                </td>

            </tr>

            <!--5.最新商品-->

            <tr>

                <td>

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

                    <table border="1px" width="100%">

                        <tr height="50px">

                            <td colspan="7">

                                &nbsp;&nbsp;

                                <font size="5">最新商品</font>&nbsp;&nbsp;

                                <img src="../img/title2.jpg" />

                            </td>

                        </tr>

                        <tr>

                            <td rowspan="2" width="190px" height="500px">

                                <img src="../img/big01.jpg" width="100%" height="100%"/>

                            </td>

                            <td colspan="3" width="555px" height="250px">

                                <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                        </tr>

                        <tr>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                            <td width="185px" height="250px" align="center">

                                <a href="#"><img src="../img/small03.jpg" /></a><br />

                                <a href="#"><font color="gray">电炖锅</font></a><br /><br />

                                <font color="red">¥299.00</font>

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

            <!--6.广告图片-->

            <tr>

                <td>

                    <img src="../img/ad.jpg" width="100%" />

                </td>

            </tr>

            <!--7.热门商品-->

            <tr>

                <td>

                    热门商品

                </td>

            </tr>

            <!--8.广告图片-->

            <tr>

                <td>

                    <img src="../img/footer.jpg" width="100%"/>

                </td>

            </tr>

            <!--9.友情链接和版权-->

            <tr>

                <td align="center">

                    <a href="#">关于我们</a>&nbsp;

                    <a href="#">联系我们</a>&nbsp;

                    <a href="#">招贤纳士</a>&nbsp;

                    <a href="#">法律声明</a>&nbsp;

                    <a href="#">友情链接</a>&nbsp;

                    <a href="#">支付方式</a>&nbsp;

                    <a href="#">配送方式</a>&nbsp;

                    <a href="#">服务声明</a>&nbsp;

                    <a href="#">广告声明</a>&nbsp;

                    <p>

                        Copyright © 2005-2016 传智商城 版权所有

                    </p>

                </td>

            </tr>

        </table>

    </body>

</html>

HTML入门（二）表格_字体_超链接_布局的更多相关文章

  1. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  2. ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区 1 用ArcMap制作地图 作为ArcGIS for Deskto ...

  3. centos5.5字体为方块问题的解决_深入学习编程_百度空间

    centos5.5字体为方块问题的解决_深入学习编程_百度空间 centos5.5字体为方块问题的解决 一.yum -y install fonts-chinese二.yum -y install f ...

  4. ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 入门案例分析 在第一章里,我们已经对ArcGIS系列软件的体系结构有了一 ...

  5. ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 使用ArcGIS进行空间分析 1.1 GIS分析基础 G ...

  6. 二、多线程基础-乐观锁_悲观锁_重入锁_读写锁_CAS无锁机制_自旋锁

    1.10乐观锁_悲观锁_重入锁_读写锁_CAS无锁机制_自旋锁1)乐观锁:就像它的名字一样,对于并发间操作产生的线程安全问题持乐观状态,乐观锁认为竞争不总是会发生,因此它不需要持有锁,将 比较-设置 ...

  7. 脑残式网络编程入门(二)：我们在读写Socket时，究竟在读写什么？

    1.引言 本文接上篇<脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手>,继续脑残式的网络编程知识学习 ^_^. 套接字socket是大多数程序员都非常熟悉的概念,它是计算机 ...

  8. [转帖]脑残式网络编程入门(二)：我们在读写Socket时，究竟在读写什么？

    脑残式网络编程入门(二):我们在读写Socket时,究竟在读写什么?     http://www.52im.net/thread-1732-1-1.html   1.引言 本文接上篇<脑残式网 ...

  9. C#线程学习笔记九：async & await入门二

    一.异步方法返回类型 只能返回3种类型(void.Task和Task<T>). 1.1.void返回类型:调用方法执行异步方法,但又不需要做进一步的交互. class Program { ...

  10. 轻奢请向历史SAY NO_重青网_重庆青年报_重庆青年报电子版_重庆青年报网站_重庆青年报官方网站

    轻奢请向历史SAY NO_重青网_重庆青年报_重庆青年报电子版_重庆青年报网站_重庆青年报官方网站 轻奢请向历史SAY NO 经济学家George Taylor在他著名的"裙摆指数" ...

随机推荐

  1. 【转】node.js框架比较

    我偶然间看到这篇文章,转这个文章并没有什么含义,仅仅是感觉总结的不错,对于新学node的友友们来说希望这篇文章为大家对 Node.js 后端框架选型带来一些帮助,学习不再迷茫,也是让我有个保存,以后参 ...

  2. 2018软工实践—Alpha冲刺(8)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 多次测试软件运行 学习OPENMP ...

  3. 18软工实践-第八次作业（课堂实战）-项目UML设计（团队）

    目录 团队信息 分工选择 课上分工 课下分工 ToDolist alpha版本要做的事情 燃尽图 UML 用例图 状态图 活动图 类图 部署图 实例图 对象图 时序图 包图 通信图 贡献分评定 课上贡 ...

  4. equals()和hashcode()详解

    转载自http://www.cnblogs.com/Qian123/p/5703507.html java.lang.Object类中有两个非常重要的方法:   public boolean equa ...

  5. 正规文法转化DFA

    #include<string.h>#include<stdio.h>#include<stdlib.h>int main(){    char p[30][30] ...

  6. c 读取文本

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define max 10 #define ...

  7. 【Python】python操作mysql

    pymysql模块对mysql进行 import pymysql # 创建连接 conn = pymysql.connect(host=, user='root', passwd='root', db ...

  8. 迭代器 每迭代一次 指针往下面移动一次 除非JVM回收了内存 否则 他的指针不会回到原地

    迭代器 每迭代一次 指针往下面移动一次 除非JVM回收了内存 否则 他的指针不会回到原地

  9. WordPress忘记密码找回登录密码的四种行之有效的方法

    WordPress忘记密码找回登录密码的四种行之有效的方法 PS:20170214更新,感谢SuperDoge同学提供的方法,登入phpMyAdmin后,先从左边选自己的数据库,然后点上面的 SQL ...

  10. P1053 篝火晚会

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有nnn个同学,编号从111到nnn.一开始 ...