用HTML和CSS做一个携程旅游手机端布局含源码分享

效果如下图所示：

文件夹内容如下：

源码分享：https://pan.baidu.com/s/1Rdt24sPEB9Rp8tnc9Udr3Q 提取码：3eka

html：

<!DOCTYPE html>
<html lang="en"></html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/nor.css"><link rel="stylesheet" href="css/index.css"><title>携程在手，说走就走</title>
</head><body><div class="search-index"><div class="search">搜索:目的地/酒店/景点/航班号</div><a href="#" class="user">我 的</a></div><div class="focus"><img src="data:images/xc.jpg" alt=""></div><ul class="local-nav"><li><a href="#" title="攻略·景点"><span class="local-nav-icon-icon1"></span><span>攻略·景点</span></a></li><li><a href="#" title="门票·玩乐"><span class="local-nav-icon-icon2"></span><span>门票·玩乐</span></a></li><li><a href="#" title="美食林"><span class="local-nav-icon-icon3"></span><span>美食林</span></a></li><li><a href="#" title="周边游"><span class="local-nav-icon-icon4"></span><span>周边游</span></a></li><li><a href="#" title="一日游"><span class="local-nav-icon-icon5"></span><span>一日游</span></a></li></ul><nav><div class="nav-common"><div class="nav-items"><a href="#">酒店</a></div><div class="nav-items"><a href="#">民宿·客栈</a></div><div class="nav-items"><a href="#">特价·爆款</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">机票</a></div><div class="nav-items"><a href="#">火车票</a></div><div class="nav-items"><a href="#">汽车·船票</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">旅游</a></div><div class="nav-items"><a href="#">高铁游</a></div><div class="nav-items"><a href="#">定制游</a></div></div></nav><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-icon"></span><span>自由行</span></a></li><li><a href="#"><span class="subnav-entry-icon2"></span><span>WiFi电话卡</span></a></li><li><a href="#"><span class="subnav-entry-icon3"></span><span>保险·签证</span></a></li><li><a href="#"><span class="subnav-entry-icon4"></span><span>换钞·购物</span></a></li><li><a href="#"><span class="subnav-entry-icon5"></span><span>向导·包车</span></a></li><li><a href="#"><span class="subnav-entry-icon6"></span><span>特价机票</span></a></li><li><a href="#"><span class="subnav-entry-icon7"></span><span>礼品卡</span></a></li><li><a href="#"><span class="subnav-entry-icon8"></span><span>申卡·借钱</span></a></li><li><a href="#"><span class="subnav-entry-icon9"></span><span>旅拍</span></a></li><li><a href="#"><span class="subnav-entry-icon10"></span><span>更多</span></a></li></ul><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="sales-bd"><div class="row"><a href="#"><img src="upload/pic1.jpg" alt=""></a><a href="#"><img src="upload/pic2.jpg" alt=""></a></div><div class="row"><a href="#"><img src="upload/pic3.jpg" alt=""></a><a href="#"><img src="upload/pic4.jpg" alt=""></a></div><div class="row"><a href="#"><img src="upload/pic5.jpg" alt=""></a><a href="#"><img src="upload/pic6.jpg" alt=""></a></div></div></div>
</body></html>

用HTML和CSS做一个携程旅游手机端布局含源码分享相关推荐

用HTML和CSS做一个简单的静态京东手机端页面含源码分享
10分钟内的时间可以完成,具体完成效果如下: 百度链接:https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg 提取码:42jq 整体文件为: 代码部分: i ...
【无标题】关于携程旅行手机端网站分析：
关于携程旅行手机端网站分析:第一次写博客.. 作者是一名初阶爬虫人员遇到过很多大坑,因此发表出来,让小伙伴们避避雷 1.post请求,携带的参数必须是json字符串形式的上代码 res = req ...
用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享
效果如下所示: less需要事先下载node,具体下载过程百度搜索安装即可整体文件夹如下: 源码分享:https://pan.baidu.com/s/1IqhFh7V3SoTW8KShGP7kgA ...
携程首页手机端-静态页面
把pin老师旧版的携程页面跟新版的结合一起编写学到的内容有: normolize初始化样式 flex布局精灵图二倍图的图形更改阿里iconfont字体图标的使用三角的制作手机端 ...
程序员带你回味童年，一起用C语言做一个“推箱子”玩！【文末源码】
这篇文章是用C语言做了一个推箱子小游戏,实现起来比较简单,和大家一起回味一下童年捧着按键机玩推箱子的日子!文末附带万字源码! 目录一.写在前面二.设计思路 1.主界面函数介绍 2.选择界面函数 3 ...
手把手教你做一个非常酷的PoV显示器（附源码）
关注+星标公众号,不错过精彩内容来源 | DF创客社区作者 | Amal Shajan 今天为大家分享一个DIY产品,如下: 前两天天我在浏览购物网站的时候,被一个购物清单吸引住了, 5个ATti ...
用java的二维数组做一个简易计算优惠小程序（附带源码）
要求: 1.单点: 溜肥肠24元酱肘子32 米饭3元 2.订单满30打八折 3.优惠价: 溜肥肠18元 4.打八折与优惠价不能同时使用,点这三样,最少多少钱? 思路: 首先定义一个 String 类 ...
自己写的一个抢票加速的Python小程序源码分享-----纯属娱乐
最近这段时间频频看到微信群里发什么抢票加速,智行.携程.飞猪.美团,对于我这能坐客车就不坐火车的人来说,无所谓靠谱不靠谱突发奇想的整理了下整个抢票加速的逻辑,写了这个小程序,代码很low,拒绝批评 ...
python抢票软件源代码_自己写的一个抢票加速的Python小程序源码分享-----纯属娱乐...
最近这段时间频频看到微信群里发什么抢票加速,智行.携程.飞猪.美团,对于我这能坐客车就不坐火车的人来说,无所谓靠谱不靠谱突发奇想的整理了下整个抢票加速的逻辑,写了这个小程序,代码很low,拒绝批评 ...

用HTML和CSS做一个携程旅游手机端布局含源码分享

效果如下图所示：

用HTML和CSS做一个携程旅游手机端布局含源码分享相关推荐

最新文章

热门文章