<!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. JS 操作 checkbox（cc角色管理等）

    1.获取选中的权限的个数 var size=$("input[name='privileges']:checked").size();

  2. css声明的优先级

    选择器的特殊性 选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0 一个选择器的具体特殊性如下确定 1.对于选择器给定的ID属性值,加0,1,0,0 2.对于选择器中给 ...

  3. 复利计算C转java版

    import java.util.Scanner; public class Compound_int { public static void main(String[] args) { tip() ...

  4. crontab & php实现多进程思路

    <?php $startTime = time(); while(1) { if (time() - $startTime > 600) { exit; } // ... Do SomeT ...

  5. FastReport.Net 无限页高(连续纸小票)

    using System; using System.Collections; using System.Collections.Generic; using System.ComponentMode ...

  6. SharePoint 2016 Document Center Send To Connection

    General Application setting->configure send to connection then i had to choose web application&qu ...

  7. NIO网络编程中重复触发读（写）事件

    一.前言 公司最近要基于Netty构建一个TCP通讯框架, 因Netty是基于NIO的,为了更好的学习和使用Netty,特意去翻了之前记录的NIO的资料,以及重新实现了一遍NIO的网络通讯,不试不知道 ...

  8. Linux 查看端口占用情况

    转自:http://www.cnblogs.com/fabulousyoung/p/4071150.html 例子,查看80端口的占用情况: lsof -i:80   或者: netstat -apn ...

  9. 第145天：jQuery.touchSlider触屏满屏左右滚动幻灯片

    1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  10. DIH增量、定时导入并检索数据--转载

    原文地址:http://www.ifunit.com/984/solr%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89dih%E5%A2%9E%E9%87%8 ...