HTML_案例(首页制作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅行</title>
</head>
<body>
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<tb>
<img src="./image/top_banner.jpg">
</tb>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="./image/logo.jpg">
</td>
</tr>
</table>
</td>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="./image/search.png">
</td>
</tr>
</table>
</td>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="./image/hotel_tel.png">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<table width="100%" align="center" bgcolor="#b8860b">
<td>
<a href="">首页</a>
</td>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行
</td>
</table>
</tr>
<!-- 第4行 -->
<tr>
<table width="100%" align="center">
<img src="./image/banner_3.jpg">
</table>
</tr>
<!-- 第5行 -->
<tr>
<img src="./image/icon_5.jpg">
<b>黑马精选</b>
<hr color=#b8860b">
</tr>
<!-- 第6行 -->
<tr>
<table width="100%" align="center">
<tr>
<td>
<img src="./image/jiangxuan_1.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥899
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_1.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥899
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_1.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥899
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_1.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥899
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_1.jpg">
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p>
<p>
<font color="#a52a2a">
<b>
¥899
</b>
</font>
</p>
</td>
</tr>
</table>
</tr>
<!-- 第7行 -->
<tr>
<img src="./image/icon_6.jpg">
<b>
国内游
</b>
<hr color="#a52a2a">
</tr>
<!-- 第8行 -->
<tr>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="data:image/guonei_1.jpg" height="600">
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
</tr>
<tr>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_2.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
</tr>
</table>
</tr>
<!-- 第9行 -->
<tr>
<img src="data:image/icon_7.jpg">
<b>境外游</b>
<hr color="#b8860b">
</tr>
<!-- 第10行 -->
<tr>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="data:image/jiangwai_1.jpg" height="600">
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
</tr>
<tr>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
<td>
<img src="./image/jiangxuan_3.jpg"> <br>
<p>
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
</p><br>
<font color="#a52a2a">
<b>
¥699
</b>
</font>
</td>
</tr>
</table>
</tr>
<!-- 第10行 -->
<tr>
<img src="data:image/footer_service.png">
</tr>
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
HTML_案例(首页制作)的更多相关文章
- 网页首页制作总结（div+css+javascript）
一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...
- bootstrap首页制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...
- CSS样式案例(2)-制作一个简单的登录界面
首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- Android井字游戏（一）首页制作
创建一个新程序: 应用名: Tic Tac Toe 公司域名: example.org 尺寸: Phone and Tablet 最低SDK: API16: Android 4.1 添加活动: Emp ...
- HTML_案例(注册案例CSS版)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端js调用七牛制作评价页面案例
一.需求 公司所有的上传页面都用七牛,前端不免要直接调用七牛的代码进行上传,以下是一个实现七牛上传的案例,制作一个常见的商品评价页面,页面需求很常见当上传到第五章图片的时候,上传按钮消失,上传需要显示 ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- 微软BI SSRS 2012 Metro UI Win 8 风格的报表课程案例全展示
开篇介绍 微软BI SSRS 2012 Metro UI 高端报表视频教程 (http://www.hellobi.com/course/15)课程从2014年6月开始准备,于2014年9月在 天善B ...
- DOM学习控件定位和案例
Dom中有多种定位属性,下面是一个简单案例 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例--> <head> <title>doc ...
随机推荐
- Jquery的Ready方法加载为什么两次？
Ready方法会调用两次? 查看对应的页面是否存在<iframe src="#" --> 存在iframe加载这个页面的时候,页面就会加载两次. $(document) ...
- \t \r \n转义字符
t \r \n都是转义字符,空格就是单纯的空格,输入时可以输入空格 \t 的意思是 横向跳到下一制表符位置 \r 的意思是 回车 \n 的意思是回车换行 所有的转义字符和所对应的意义: 转义字符 意义 ...
- hql 语法与详细解释
HQL查询: Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此 Hi ...
- jQuery全部选择器总结（转载）
jQuery选择器总结 不知道为什么博客园不能转载文章?如果知道如何转载的朋友可以评论告诉我,我只能ctrl+C/V下来,转载自: http://www.cnblogs.com/mcgrady/arc ...
- Linux SSH证书登陆
创建证书 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 证书导入以后,执行 eval "$(ssh-agen ...
- 微信小程序开发系列之Hello World
第一步:注册 在微信公众平台官网首页,点击注册.(相关文档可以找到,这里不再累述,望见谅.) 微信小程序注册成功后界面 第二步:编辑器.开发工具 我们假定你已经申请注册好微信小程序了,我们选定一个代码 ...
- Oracle使用——PLSQL的中文乱码显示全是问号--Oracle查询中文乱码
问题 这两天刚将PLSQL与Oracle配置好,可是在PLSQL中插入数据时,出现一个问题,PLSQL中的表里无法显示中文,中文无法保存.无法输出,中文在表中显示问号,如图: 原因 经过一番查证, ...
- 打开桌面上的图标就会弹出"打开些文件可能会对您的计算机有害"解决方案
问题截图 方案步骤 运行 gpedit.msc 用户配置--管理模板--windows组件--附件管理器 找到中等危险文件类型抱含列表后右键-编辑 在指定中等风险扩展名中加入你文件的扩展名 应用, 确 ...
- Delphi之TPersistent类 -----ASSIGN
Delphi之TPersistent类 TPersistent类 TPersistent类是由TObject直接派生的.凡是由TPersistent派生的对象都能够进行流操作.因为所有的组件都是由TP ...
- 单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件)
单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 说实话很不想写这篇文章,因为这和我一贯推崇的最好全部编译并使用w ...