如何使用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 的加载方式 ...
随机推荐
- Part 29 AngularJS intellisense in visual studio
In the previous videos if you have noticed as we were typing the angular code in Script.js file we w ...
- [ccKILLKTH]Killjee and k-th letter
建立后缀树(即反序插入字符串的parent树),然后可以发现按照dfs序排列满足其反串按字典序从小到大排列,那么就可以维护出每一刻子树的串长和,然后直接在dfs序上二分确定节点,再在节点内部乱搞即可求 ...
- [atARC085F]NRE
令$(S_{a},S_{b})$表示$a_{i}\in S_{a}$且$b_{i}\in S_{b}$的i个数,那么答案相当于$S(0,1)+S(1,0)=S(0,1)+S(\{0,1\},0)-S( ...
- FastAPI（六十三）实战开发《在线课程学习系统》梳理系统需要接口
针对上一篇FastAPI(六十二)实战开发<在线课程学习系统>需求分析需求的功能,我们对需要的接口进行梳理,大概的规划出来现有的接口,作为我们第一版的接口的设计出版,然后我们根据设计的接口 ...
- gitee+typro+picgo搭建博客图床
gitee+typro+picgo搭建博客图床 前提环境 typro.picgo.nodejs 直接在官网下载即可 下载完成后,打开picgo 安装插件gitee-uploader 1.1-2即可显示 ...
- vue-通过name进行数据过滤
<template> <div> <h3>搜索列表</h3> <input type="text" placeholder=& ...
- HTML四种定位-粘滞定位
粘滞定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- 【树莓派】Python开发工控机急停设计
背景 我们在一些工业产品中使用树莓派替代了PLC和上位机,并借助树莓派的算力将AI和机器视觉引入工业领域. 以前的产品都不存在动作机构,仅仅将结果输出到指示灯.蜂鸣器或者显示器上,没有安全隐患, 现在 ...
- Augustus指南(Trainning部分)
Augustus指南 官方 Tutorial Index Augustus是一个真核生物基因预测软件,目前有网页服务端和本地版,它基于Hidden-Markov Model(隐马尔科夫链模型HMM)( ...
- CentOS6配置邮件发送
CentOS6配置邮件发送 注意:要启用邮箱的服务端授权代理功能,并从中获取授权码 \cp /etc/mail.rc{,.bak} # 备份配置文件 cat >>/etc/mail.rc& ...