<!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. 03 JAVA IO

    java.io包中定义了多个流类型来实现输入输出功能,以不同的角度进行分类: 按数据流的方向不同可以分为输入流和输出流 按处理数据单位不通可以分为字节流和字符流 按照功能不同可以分为节点流和处理流 所 ...

  2. ubuntu下配置ss并设置PAC模式

    一.安装ss 1. sudo apt-get update(更新源) 2. sudo apt-get install python-pip(安装pip) 3. sudo pip install sha ...

  3. lintcode-480-二叉树的所有路径

    480-二叉树的所有路径 给一棵二叉树,找出从根节点到叶子节点的所有路径. 您在真实的面试中是否遇到过这个题? Yes 样例 给出下面这棵二叉树: 所有根到叶子的路径为: [ "1-> ...

  4. 微信小程序 功能函数 地图定位相对直线距离

      GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / ...

  5. windows下的coreseek安装及PHP调用入门

    转载:http://zhan.renren.com/longmensoft?gid=3602888498043096197&checked=true 把我的运行环境简单说一下:windows ...

  6. libmnl

    https://www.netfilter.org/projects/libmnl/doxygen/modules.html 1,tar xvf libmnl-1.0.4.tar.gz 2,cd li ...

  7. mysql中一些表选项

    表选项列表 表选项就是,创建一个表的时候,对该表的整体设定,主要有如下几个: charset = 要使用的字符编码, engine = 要使用的存储引擎(也叫表类型), auto_increment ...

  8. HDU4646_Laser Beam

    题目是这样的,一个等边三角形,三边都是有镜子组成的. 现在要你从一个点射入一条光线,问你如果要求光线在三角形里面反射n次然后从入点射出来的话,入射的方向可能有多少种? 这.....其实不难.关键是要搞 ...

  9. Android 分Dex (MultiDex)

    需要分Dex的理由想必大家都知道了.正是在ART以前的Android系统中,Dex文件对于方法索引是用一个short类型的数据来存放的.而short的最大值是65535,因此当项目足够大包含方法数目足 ...

  10. 802.1p 优先级与内部优先级的映射关系

    缺省情况下,所有华为 S 系列交换机的 802.1P 优先级 与内部优先级的映射关系是 一 样的,如表 10-3 所示.从中可以看出,这些交换机中 802.1p 优先级与内部优先级的缺省映射关系是按等 ...