如何使用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 的加载方式 ...
随机推荐
- sqlalchemy 执行sql
关键需要使用text from sqlalchemy import create_engine, text sql = 'SELECT * FROM my_table WHERE account_id ...
- building sasl.wrapper extention
yum install gcc-c++ python-devel.x86_64 cyrus-sasl-devel.x86_64 pip install pyhs2 ref: https://www.o ...
- java eclipse调试提示Source not found 或 一闪而过 解决方法
Web工程Eclipse debug方式启动,在断点的位置被成功拦截,但是没有跳转到工程的代码处,提示如下: 当然这个时候如果我继续按F5的话呢,程序又会接着正常运行了.到这里那就是说程序本身是没有 ...
- Kafka面试题总结
1.Kafka 都有哪些特点? 高吞吐量.低延迟:kafka每秒可以处理几十万条消息,它的延迟最低只有几毫秒,每个topic可以分多个partition, consumer group 对partit ...
- Part 19 AngularJS Services
What is a service in AngularJSBefore we talk about what a service is in Angular. Let's talk about a ...
- jsonpath语法的基本使用
jsonpath的安装及使用方式: pip安装: Python3.7\Scripts> pip install jsonpath jsonpath的使用: obj = json.load(ope ...
- Python 爬取 猫眼
1. import requests import re import pymongo MONGO_URL='localhost'#建立连接 MONGO_DB='Maoyan'#创建数据库 clien ...
- [atAGC106E]Medals
暴力二分答案+网络流,点数为$o(nk)$,无法通过 考虑Hall定理,即有完美匹配当且仅当$\forall S\subseteq V_{left}$,令$S'=\{x|\exists y\in V_ ...
- GIT Bash 简单讲解-git如何推/拉代码
GIT Bash 简单讲解 一. 注册/登录GIT账号 注册(或者登录) GitHub地址:https://github.com/ 注册不做详细的讲解,按照注册指示进行注册就可以 ...
- Codeforces 633F - The Chocolate Spree（树形 dp）
Codeforces 题目传送门 & 洛谷题目传送门 看来我这个蒟蒻现在也只配刷刷 *2600 左右的题了/dk 这里提供一个奇奇怪怪的大常数做法. 首先还是考虑分析"两条不相交路径 ...