HTML基础——网站首页显示页面
1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。
table表，tr行，td单元格
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<tr></tr>里面也能设置相应属性，且比<table></table>优先级高。
2、跨行跨列操作（针对单元格，写在td里面）
跨行：rowspan
跨列：colspan
3、下面实现网站首页显示页面（事先准备若干照片）
首先分析步骤：
1）创建一个七一列的表格
2）实现第一行（嵌套一个一行三列的表格，然后分别对单元格的内容进行填充）
3）实现第二行（暂时使用字体标签结合超链接完成导航栏，需要设置当前单元格的背景颜色为黑色）
4）实现第三行（直接放置一张广告图片）
5）实现第四行（嵌套一个三行七列的表格）
6）实现第五行（放置一张广告图片）
7）实现第六行（放置一张广告图片）
8）实现第七行（使用字体标签和超链接完成友情链接和版权信息）
然后写代码：
注意代码中<a href="#" ></a>表示页面不发生跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
</head>
<body>
<!--1.创建一个八行一列的表格-->
<table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px">
<!--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="../img/header.png" 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">
<a href="#"><font size="3" 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> <!--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">
<font size="5">最新商品</font>
<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">399</font>
</td> <td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small01.jpg" /></a><br />
<a href="#"><font color="gray">榨汁机</font></a><br /><br />
<font color="red">599</font>
</td> <td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small02.jpg" /></a><br />
<a href="#"><font color="gray">电视</font></a><br /><br />
<font color="red">2500</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small06.jpg" /></a><br />
<a href="#"><font color="gray">洗衣机</font></a><br /><br />
<font color="red">1800</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small08.jpg" /></a><br />
<a href="#"><font color="gray">压力锅</font></a><br /><br />
<font color="red">499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small09.jpg" /></a><br />
<a href="#"><font color="gray">微波炉</font></a><br /><br />
<font color="red">499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small07.jpg" /></a><br />
<a href="#"><font color="gray">扫地机器人</font></a><br /><br />
<font color="red">1500</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small04.jpg" /></a><br />
<a href="#"><font color="gray">面包机</font></a><br /><br />
<font color="red">800</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="../img/small05.jpg" /></a><br />
<a href="#"><font color="gray">咖啡机</font></a><br /><br />
<font color="red">1000</font>
</td>
</tr>
</table>
</td>
</tr> <!--6.广告图片-->
<tr>
<td>
<img src="../img/ad.jpg" width="100%" />
</td>
</tr> <!--7.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr> <!--8.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
在浏览器中运行，就能显示网站首页。
HTML基础——网站首页显示页面的更多相关文章
- HTML基础——网站后台显示页面
1.框架集标签:(作用:将页面进行区域的划分) <frameset rows="" cols=""> <frame src="&qu ...
- HTML基础——网站图片显示页面
1.图片标签 <img /> 属性: src:指的是图片显示的路径(位置) 绝对路径:D:\Pictures\Saved Pictures 相对路径: ①同一级:直接写文件名称或者./文件 ...
- WordPress基础：wp_list_pages显示页面信息列表
函数:wp_list_pages($args) 作用:列出某个分类下的分类项目 常见参数说明: 参数 用途 值 sort_column 排序方式 post_title 按标题排序 [默认] m ...
- 用HTML+CSS实现一个计科院网站首页静态页面
链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys
- HTML&CSS——使用DIV和CSS完成网站首页重构
1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...
- HTML基础——网站友情链接显示页面
1.列表标签 有序列表:type默认是1,2,3……,reserved指降序排列 <ol type="I" start="" reversed=" ...
- asp.net mvc后台操作之读写xml控制首页动态页面开关显示
一.背景 在asp.net mvc项目里,用户需要开拓几个活动版面,并以侧栏的方式呈现在首页右侧,几个活动时间不一致,为避免浏览者在活动未开放之时进入未开放的服务页面.因此不仅需要在活动代码中加入限制 ...
- 一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法！
一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法! 对于大中型网站,为了增强用户体验,往往需要根据不同城市站点的用户推送或展现相应个性化的内容,如对于一些大型门户网站的新闻会有 ...
- java的struts2项目实现网站首页只显示域名不显示index.do的做法
自己的网站快做完了,发现首页显示的时候总是跳转到http://www.xxxxxx.com/index.do 而我想让http://www.xxxxxx.com/ 这样的方式来访问,不想带有后边的in ...
随机推荐
- .NET CORE MVC网站体验
安装SDK https://www.microsoft.com/net/download/core 运行命令行工具 mkdir coremvc cd coremvc dotnet new 文件建立成功 ...
- 使用JS&jQuery改善用户体验
第一章 JavaScript基本语法 一.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&= ...
- 错误：java.lang.IllegalStateException: TimerTask is scheduled already
Process: com.multak.cookaraclient, PID: 27384 java.lang.RuntimeException: Unable to resume activity ...
- poj 2762 Going from u to v or from v to u? 【 强连通 拓扑排序】
给出n个点,m条边,问是否任意两点u,v,是否满足u能够到达v,或者v能够到达u 自己写的时候以为缩一下点,然后再判断一下能不能拓扑排序就可以了 但是--wa--- 后来看了这篇题解 http://e ...
- Prototype-based programming
Prototype-based programming is a style of object-oriented programming in which behaviour reuse (know ...
- dp入门—数塔
在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告诉你了,这是个DP的题 ...
- C# 基础复习 二 面向对象
继承:子承父业 子:子类 父:父类 业:所有非私有成员 好处:代码的复用 继承后,实例化子类时,不止子类的构造,父类的构造也会执行,而且父类的构造先于子类的构造执行 即使在子类可以看 ...
- Win10内核驱动强制签名，申请沃通 EV代码签名证书
2016年7月,微软在MSDN宣布从Windows 10的1607版本开始,强制要求所有新的Win10 内核驱动程序,必须获得Windows硬件开发者中心仪表盘门户的数字签名才能在系统中运行.这项政策 ...
- git diff patch方法
UNIX世界的软件开发大多都是协作式的,因此,Patch(补丁)是一个相当重要的东西,因为几乎所有的大型UNIX项目的普通贡献者,都是通过 Patch来提交代码的.作为最重要的开源项目之一,Linux ...
- BZOJ 3307 雨天的尾巴 (树上差分+线段树合并)
题目大意:给你一棵树,树上一共n个节点,共m次操作,每次操作给一条链上的所有节点分配一个权值,求所有节点被分配到所有的权值里,出现次数最多的权值是多少,如果出现次数相同就输出最小的. (我辣鸡bzoj ...