携程旅行网的实现

- 日理万妓 2022-05-13 00:38 206阅读 0赞

携程旅行网的实现

**实验****1** **完成头部内容制作**

![70][]

步骤1：创建main.html页面，写结构代码(html)如下：

![70 1][]

步骤2：写样式代码(css)

1、创建common.css样式文件和main.css样式文件，将该文件链接到main.html页面中，代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

![70 2][]

2、在main.css样式文件中编写如下样式代码：

![70 3][]

**实验****2** **完成头部下方内容制作（****3****个）**

![70 4][]

步骤1：接着写结构代码(html)如下：

![70 5][]

2、在main.css样式文件中接着编写如下样式代码：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:267.05pt;"> <p style="margin-left:0cm;"><img alt="" height="597" src="https://img-blog.csdn.net/20180909090601897?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="514"></p> </td> 
   <td style="vertical-align:top;width:267.05pt;"> <p style="margin-left:0cm;"><img alt="" height="509" src="https://img-blog.csdn.net/20180909090601906?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="390"></p> </td> 
  </tr> 
 </tbody> 
</table>

![70 6][]

**实验****3** **完成头部下方内容制作（****9****个）**

步骤1：接着写结构代码(html)如下：

![70 7][]![70 8][]

2、在main.css样式文件中接着编写如下样式代码：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:8cm;"> <p style="margin-left:0cm;"><img alt="" height="575" src="https://img-blog.csdn.net/2018090909060292?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="428"></p> </td> 
   <td style="vertical-align:top;width:268.35pt;"> <p style="margin-left:0cm;"><img alt="" height="555" src="https://img-blog.csdn.net/20180909090602271?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="444"></p> </td> 
  </tr> 
 </tbody> 
</table>

![70 9][]

**实验****4** **完成底部内容制作**

![70 10][]

步骤1：接着写结构代码(html)如下：

![70 11][]

2、在main.css样式文件中接着编写如下样式代码：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:267.05pt;"> <p style="margin-left:0cm;"><img alt="" height="468" src="https://img-blog.csdn.net/20180909090602466?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="505"></p> </td> 
   <td style="vertical-align:top;width:267.05pt;"> <p style="margin-left:0cm;"><img alt="" height="560" src="https://img-blog.csdn.net/20180909090602521?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="419"></p> </td> 
  </tr> 
 </tbody> 
</table>

![70 12][]

**实验****5** **完成侧边栏内容制作**

![70 13][]

步骤1：接着写结构代码(html)如下：

![70 14][]

2、在main.css样式文件中接着编写如下样式代码：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:239.3pt;"> <p style="margin-left:0cm;"><img alt="" height="403" src="https://img-blog.csdn.net/20180909090602817?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="406"></p> </td> 
   <td style="vertical-align:top;width:8cm;"> <p style="margin-left:0cm;"><img alt="" height="448" src="https://img-blog.csdn.net/20180909090602877?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="465"></p> </td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220513/8cde125af7064d92bafe29946fcf0e08.png
[70 1]: /images/20220513/da734a24bf0f4337aa94930bc663efec.png
[70 2]: /images/20220513/c1a0e0b385d04fb7825314ac5a511858.png
[70 3]: /images/20220513/3af41d638962494489fdc11e3e3df115.png
[70 4]: /images/20220513/9199f279cf6948b0ba0a0f96b5de5dbf.png
[70 5]: /images/20220513/f85a02345db949ebba3d98e5264eac1a.png
[70 6]: /images/20220513/4b0da66736b14953b3ea8e103ffcbbbb.png
[70 7]: https://img-blog.csdn.net/20180909090601945?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdsdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: /images/20220513/1b5d9a2d1ae34dc2bc213a0ae09afdc3.png
[70 9]: /images/20220513/a29135e3bc214ccd909b11b7d840efcd.png
[70 10]: /images/20220513/b24b2734d5364b10a9acb4b76de2f0a0.png
[70 11]: /images/20220513/1e0ab5275fee4eb9be7aa8f84d15efd7.png
[70 12]: /images/20220513/a1164e77865140fd9061ab7b0e16e9e6.png
[70 13]: /images/20220513/f5bdb0c9198c4e63b0503939a82bf0e1.png
[70 14]: /images/20220513/b5520bc9384743ceb260feee52b9a4d8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3Flex伸缩布局，携程网案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

妖狐艹你老母/ 2024年04月18日 21:40/ 0 赞/ 80 阅读

相关日流量200亿，携程网关的架构设计

说在前面在40岁老架构师尼恩的读者社区(50+)中，很多小伙伴拿到一线互联网企业如阿里、网易、有赞、希音、百度、滴滴的面试资格。就在昨天，尼恩指导一个小伙伴简历，

一时失言乱红尘/ 2024年03月26日 23:13/ 0 赞/ 81 阅读

相关 Flutter +携程=？

目录主要页面，包括首页、搜索、旅拍和我的四个主页面依赖库实际效果主要页面整体框架采用PageView + BottomNavig

今天药忘吃喽~/ 2023年07月15日 08:45/ 0 赞/ 56 阅读

相关 python 携程登陆,Python爬取携程信息

python爬取携程景点评论信息今天要分析的网站是携程网，获取景点的用户评论，评论信息通过json返回API，页面是这个样子的 ![17dbbd8eb320][] 按下

「爱情、让人受尽委屈。」/ 2023年01月17日 03:21/ 0 赞/ 263 阅读

相关 python爬虫：案例二:携程网酒店价格信息

这个案例可能不太智能，有个朋友和我说他们公司让他爬携程的酒店价格信息，我当时去看了一下，发现携程的信息爬起来挺麻烦，城市是必输项，酒店名是选输项，跳转的url中城市后面带一个数

梦里梦外;/ 2022年08月22日 01:12/ 0 赞/ 667 阅读

相关笔试携程经验

1.10（题目数量）x10(题目时间)数字找规律 2.10X10图形推理 3.7X10判断推理，文字推理计算题 4.22X90(13单选.2多选.7简答)专业知识 cs

红太狼/ 2022年07月26日 01:28/ 0 赞/ 218 阅读

相关分布式配置中心——携程Apollo（阿波罗）的实现

分布式配置中心有很多，springcloud的config、百度的disconfig、携程的apollo、淘宝的diamond。由于携程的apollo极少的侵入性，以及面对s

冷不防/ 2022年05月18日 08:39/ 0 赞/ 537 阅读

相关携程旅行网的实现

携程旅行网的实现实验1 完成头部内容制作 ![70][] 步骤1：创建main.html页面，写结构代码(html)如下： ![70 1][] 步骤2：写样式代码(

- 日理万妓/ 2022年05月13日 00:38/ 0 赞/ 207 阅读

相关 springboot 使用携程 apollo

maven 依赖 apollo 服务未搭建点击https://blog.csdn.net/fengchen0123456789/article/details/86605

以你之姓@/ 2022年04月23日 02:24/ 0 赞/ 261 阅读

相关携程移动端案例

采用rem适配各种移动端,只需要计算rem,通用(375/750)\100=50px;即将下列的px数值变成,数值/50rem;即可 html文件: <htm

Myth丶恋晨/ 2021年07月24日 11:57/ 0 赞/ 480 阅读