如何使用table布局静态网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hope旅游网</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" align="center">
<!--第一行-->
<tr>
<td>
<img src="data:image/top_banner.jpg" alt="" width="100%">
</td>
</tr>
<!--第二行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="data:image/logo.jpg" alt="logo">
</td>
<td>
<img src="data:image/search.png" alt="查询">
</td>
<td>
<img src="data:image/hotel_tel.png" alt="联系方式">
</td>
</tr>
</table>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center" >
<tr bgcolor="orange" align="center" height="35">
<td >
<a href="https://www.baidu.com">
首页
</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>
<!--第四行-->
<tr>
<td>
<img src="data:image/banner_1.jpg" alt="轮播图" width="100%">
</td>
</tr>
<!--第五行-->
<tr>
<td>
<img src="data:image/icon_5.jpg" alt="" align="left">
黑马精选
<hr color="orange">
</td>
</tr>
<!--第六行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="data:image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥899</font>
</td>
<td>
<img src="data:image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥899</font>
</td>
<td>
<img src="data:image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥899</font>
</td>
<td>
<img src="data:image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="data:image/icon_6.jpg" alt="" align="left">
国内游
<hr color="orange">
</td>
</tr>
<!--第八行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="data:image/guonei_1.jpg" alt="">
</td>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥899</font>
</td>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥699</font>
</td>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥699</font>
</td>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥699</font>
</td>
<td>
<img src="data:image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第九行-->
<tr>
<td>
<img src="data:image/icon_7.jpg" alt="" >
境外游
<hr color="orange">
</td>
</tr>
<!--第十行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="data:image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
</tr>
<tr>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
<td>
<img src="data:image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">¥1099</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第十一行-->
<tr>
<td>
<img src="data:image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!--第十二行-->
<tr >
<td align="center" bgcolor="orange" height="10px">
<font color="gray" size="2" >
江苏衡谱检测有限公司 版权所有Copyright 2006-2019
© All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
如何使用table布局静态网页的更多相关文章
- 浅谈table和DIV网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...
- 网页设计——5.table布局
今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...
- 网页布局——table布局
table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...
- div+css模式编写html静态网页例子_仿照网页制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java Web开发技术教程入门-静态网页技术
昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...
- HTML静态网页 标签、表格
HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin ...
- 通过jekyll建立静态网页
部署一个网站需要三个步骤:(1) generating the site, (2) deploying it to the public Internet, and (3) assigning it ...
- HTML静态网页（标签、表格）
HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
随机推荐
- Flink 实践教程：入门（6）：读取 PG 数据写入 ClickHouse
作者:腾讯云流计算 Oceanus 团队 流计算 Oceanus 简介 流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的具备一站开发.无缝连接.亚 ...
- [bzoj1081]超级格雷码
手动模拟一组样例,可以理解大致应该如何操作具体实现中,记录每一位当前应该+1还是-1,然后操作最低的位并将后面的+1和-1全部取反即可 1 #include<bits/stdc++.h> ...
- dart系列之:时间你慢点走,我要在dart中抓住你
目录 简介 DateTime Duration 总结 简介 时间和日期是我们经常会在程序中使用到的对象.但是对时间和日期的处理因为有不同时区的原因,所以一直以来都不是很好用.就像在java中,为时间和 ...
- 【基因组注释】ncRNA注释
目录 1. ncRNA 2. 软件 tRNA注释 rRNA注释 其他ncRNA注释 3. 注释 tRNA rRNA snRNA.miRNA等 4. snRNA.miRNA等结果的统计 1. ncRNA ...
- 【百奥云GS专栏】1-全基因组选择介绍
目录 什么是基因组选择? 基因组选择技术的发展 基因组选择的原理和流程 基因组选择的模型 基因组选择的展望 参考资料 什么是基因组选择? 基因组选择(Genomic Selection,简称GS)这一 ...
- 问题记录：SNP 标记 phasing
GATK4 检测的SNP标记,有些位点会在检测过程中完成 phasing,在后续做基因型填充的时候有坑. GATK4 phasing 结果的缺失位点不是 ./. 也不是 .|. 而是直接变成一个单独 ...
- MySQL深层理解，执行流程
MySQL是一个关系型数据库,关联的数据保存在不同的表中,增加了数据操作的灵活性. 执行流程 MySQL是一个单进程服务,每一个请求用线程来响应, 流程: 1,客户请求,服务器开辟一个线程响应用户. ...
- C语言中的main函数的参数解析
main()函数既可以是无参函数,也可以是有参的函数.对于有参的形式来说,就需要向其传递参数.但是其它任何函数均不能调用main()函数.当然也同样无法向main()函数传递,只能由程序之外传递而来. ...
- 学习java 6.30
学习内容:Java的运算符与C中类似,虽是类似,还是有点区别,在这里详细说明一下,即字符以及字符串的+操作,字符的+操作执行后需要赋值给表达式中数据范围最大的类型, 字符串的+操作,当+中有字符串,则 ...
- 日常Java 2021/9/26 （二柱升级版）
package m; import java.util.Scanner;import java.util.Random; public class di_er { static int number= ...