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 ...
随机推荐
- 4、通过uiautomatorviewer实现appium元素定位
熟悉selenium自动化的小伙伴应该知道WebDriver 提供了八种元素定位方法: idnameclass nametag namelink textpartial link textxpathc ...
- 9.3.1 The assign and deassign procedural statements
IEEE Std 1364™-2001, IEEE Standard Verilog® Hardware Description Language The assign procedural cont ...
- 结合Intel Manual和libdasm学习汇编指令
参考:http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manuals.html h ...
- 简单介绍Collection框架的结构
Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection 是单列集合 List 元素是有序的.可重复 有序的 collect ...
- Chrome调试小技巧
前言: 除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率. Sources页 command + p 文件跳转 使用Sublime的人或习惯用comm ...
- 数据整理A
- JS面向对象(二)---继承
一.面向对象的继承 1.解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能 2.如何添加继承---拷贝继承 属性:call 方法: for in /* 继承:子类不影响父类 ...
- 在Nginx/Tengine服务器上安装证书
可以从SSL证书服务控制台下载证书安装到Nginx/Tengine服务器上. 环境:以CentOS 7.Nginx 1.15.6为例. 证书名称以domain name为示例,如证书文件名称为doma ...
- 关于windows cmd的一些便捷应用
在同事的指点下,我学会了一种非常方便的进入路径的方法 在windows文件夹中直接打开到要执行的文件的位置,然后在我的电脑那个路径当中输入cmd 之后,cmd的对话框会弹出来,并且显示在当前路径下,这 ...
- 几种数据类型的常用API
数字 int() 字符串 #==========join===========在字符串前后插入字符 li = 'alexericrain' new_li = '_'.join(li) print(ne ...