<!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. 【每日scrum】NO.8

    (1) 在图的设计过程中掌握了图的基本运算函数的算法的理解和程序的有效吸收,包括图的深度和广度优先的遍历,对图的联通分量的求解,图的最小生成树,图的拓扑排序,图的关键路径, (2)在迪杰斯特拉算法的基 ...

  2. 本周WEB技术学习情况

    相较于之前本周有了明显的进步    之前不熟悉的知识点在多次的实机中得到巩固加深,用得越来越得心应手 我认为只要多用功更加自主的学习  web其实并不难 希望自己天天进步

  3. unix系统内核优点

    1.可靠性高 unix的可靠性2.伸缩性强 unix的伸缩性3.开放性好 unix的开放性4.网络功能强 unix的网络功能这是UNIX系统的又一重要特色,特别是作为Internet网络技术基础的TC ...

  4. Spark Shuffle之Sort Shuffle

    源文件放在github,随着理解的深入,不断更新,如有谬误之处,欢迎指正.原文链接https://github.com/jacksu/utils4s/blob/master/spark-knowled ...

  5. 复利计算C语言转java的相关代码

    static void principal()// 计算本金 { int N, m; double i, F, P; System.out.printf("复利终值:"); F = ...

  6. 爬虫学习之-Python list 和 str 互转

      一.list转字符串 命令:''.join(list)其中,引号中是字符之间的分割符,如“,”,“;”,“\t”等等如:list = [1, 2, 3, 4, 5]''.join(list) 结果 ...

  7. 【Python】tuple and list 练习

    Tuple: 1.       __add__ a = (,,,,,,,,,) b = (,,,,,,,), c = (,,,,), result = a.__add__(b) print(resul ...

  8. CF697D-Puzzles

    题目 一棵树,从根节点开始dfs,每层以随机顺序进入每个子节点,问走到每个点的时候期望经过了多少个点. (这里经过多少个点指的是经过多少个不同的点,即经过一个点多次算一个) (其实这个题不如说求期望d ...

  9. Android四大组件之Intent(续)

  10. 精通android学习笔记（一）---广播

    普通广播:sendBroadcast 有序广播:sendOrderedBroadcast,有序广播优先级可以再manifest中设置,数值越大,最先收到.-1000~1000 <receiver ...