如何使用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 的加载方式 ...
随机推荐
- 【JAVA】笔记（5）--- final；抽象方法；抽象类；接口；解析继承，关联，与实现；
final: 1.理解:凡是final修饰的东西都具有了不变的特性: 2.修饰对象: 1)final+类--->类无法被继承: 2)final+方法--->方法无法被覆盖: 3)final ...
- Django笔记&教程 1-2 二 常用配置
Django 自学笔记兼学习教程第1章第2节--二 常用配置 点击查看教程总目录 新手建议简单浏览本文,不理解的建议跳过,不要强行理解. Django的设置涉及多个模块,需要了解Django的一些相关 ...
- Solon 1.5.67 发布，增加 GraalVm Native 支持
Solon 已有120个生态扩展插件,此次更新主要为细节打磨: 添加 solon.extend.graalvm 插件,用于适配 graalvm native image 模式 从此,solon 进入 ...
- 面试官:咱们来聊一聊mysql主从延迟
背景 前段时间遇到一个线上问题,后来排查好久发现是因为主从同步延迟导致的,所以今天写一篇文章总结一下这个问题希望对你有用.如果觉得还不错,记得加个关注点个赞哦 思维导图 思维导图 常见的主从架构 随着 ...
- c++ 中vector 常见用法（给初学者）
c++ 中 vector vector有两个参数,一个是size,表示当前vector容器内存储的元素个数,一个是capacity,表示当前vector在内存中申请的这片区域所能容纳的元素个数. ca ...
- Android SeekBar 自定义thumb，thumb旋转动画效果
简介 某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(thumb)会显示一个转圈的效果. 资源加载完成后,又切换回静态效果.这个效果增强了用户体验. 一般来说有美术人员负责设计和切图. ...
- JavaScript Sanitizer API：原生WEB安全API出现啦
10月18号, W3C中网络平台孵化器小组(Web Platform Incubator Community Group)公布了HTML Sanitizer API的规范草案.这份草案用来解决浏览器如 ...
- 洛谷 P7620 - CF1431J Zero-XOR Array（状压 dp）
洛谷题面传送门 首先显然题目等价于求有多少个长度 \(n-1\) 的序列 \(b\) 满足 \(a_i\le b_i\le a_{i+1}\),满足 \(b_1\oplus b_2\oplus\cdo ...
- Peaks Gym 100365H
Peaks ( Gym 100365H ) 这题nk做法还挺正常的..后面那个循环就很恶心了 考虑 dp[i][j] 表示长度为i的排列,恰好有k个峰的方案数量. 然后转移就是把 i 插入 i-1 的 ...
- Discontinuous Galerkin method for steady transport problem
下面讨论如何使用 Discontinuous Galerkin 求解恒定对流问题. 1.简介 恒定状态对流方程 \[\begin{equation} a\cdot \nabla \mathbf{u} ...