携程首页手机端-静态页面

把pin老师旧版的携程页面跟新版的结合一起编写

学到的内容有：

normolize初始化样式

flex布局

精灵图二倍图的图形更改

阿里iconfont字体图标的使用

三角的制作

手机端pc端百分比自适应图像变换

省略号的编写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><link rel="stylesheet" href="fonts/icomoon/style.css"><!-- <link rel="stylesheet" href="normalize.css"> --><link rel="stylesheet" href="iconfonts/iconfont.css">
</head><body><!-- 搜索框 --><div class="search"><div class="sc_input"><i class="iconfont icon-fangdajing"></i><span>搜索：目的地/酒店/景点/美食</span></div><div class="user"><i class="iconfont icon-yonghu"></i><span>我的</span></div></div><!-- 焦点图 --><div class="foucs"><img src="data:images/focus1.jpg" alt=""></div><!-- nav模块 --><div class="nav"><ul><li class="nav-hotel"><a href="#"><span class="nav_ig"></span><span class="nav_style">酒店</span></a></li><li class="nav-hotel"><a href="#"><span class="nav_ig"></span><span class="nav_style">民宿/酒店</span></a></li><li class="nav-hotel"><a href="#"><span class="nav_ig"></span><span class="nav_style">特价/爆款</span></a></li></ul><ul><li class="nav-flight"><a href="#"><span class="nav_ig"></span><span class="nav_style">机票</span></a></li><li class="nav-flight"><a href="#"><span class="nav_ig"></span><span class="nav_style">接送机/包车</span></a></li><li class="nav-flight"><a href="#"><span class="nav_ig"></span><span class="nav_style">航班助手</span></a></li></ul><ul><li class="nav-train"><a href="#"><span class="nav_ig"></span><span class="nav_style">火车票</span></a></li><li class="nav-train"><a href="#"><span class="nav_ig"></span><span class="nav_style">汽车/船票</span></a></li><li class="nav-train"><a href="#"><span class="nav_ig"></span><span class="nav_style">租车</span></a></li></ul><ul><li class="nav-vacation"><a href="#"><span class="nav_ig"></span><span class="nav_style">旅游</span></a></li><li class="nav-vacation"><a href="#"><span class="nav_ig"></span><span class="nav_style">门票/活动</span></a></li><li class="nav-vacation"><a href="#"><span class="nav_ig"></span><span class="nav_style">周边泳</span></a></li></ul><ul><li class="nav-gs"><a href="#"><span class="nav_ig"></span><span class="nav_style">攻略/景点</span></a></li><li class="nav-gs"><a href="#"><span class="nav_ig"></span><span class="nav_style">美食</span></a></li><li class="nav-gs"><a href="#"><span class="nav_ig"></span><span class="nav_style">购物/免税</span></a></li></ul></div><!-- banner模块 --><div class="sub-banner"><div class="banner"><a href="#" class="block-header"><img src="data:images/banner1.png" alt=""><div class="live-streaming">特价好货直播中</div></a><div class="slider"><div class="tag">酒店套餐</div><img src="data:images/banner2.jpg" alt=""><div class="product">上海万达瑞华酒店1晚</div><div class="footer-price"><div class="price"><i>￥2799</i><s>6760</s></div><div class="sub">立减￥480</div></div></div></div><div class="banner"><div class="block-header"><img src="data:images/banner2.png" alt=""><div class="ranking">权威排行榜</div></div><div class="rank-wrapper"><a href="#" class="rank-item"><img src="data:images/hotel1.jpg" alt=""><div class="tag">华东</div><div class="block-footer"><span class="rank-title"> 华东奢华酒店榜</span></div></a><a href="#" class="rank-item"><img src="data:images/hotel2.jpg" alt=""><div class="tag">华东</div><div class="block-footer"><span class="rank-title"> 华东奢华酒店榜</span></div></a></div></div></div><!-- 广告模块 --><div class="advertising"><img src="data:images/adv_banner.png" alt=""></div><!-- 工具模块 --><div class="toolbox"><div class="phone"><span class="iconfont icon-dianhua"></span>电话预定</div><div class="download"><span class="iconfont icon-xiazaidaoru"></span>下载携程</div><div class="language"><span class="iconfont icon-ditu_diqiu_o"></span>Language<span class="trangle"></span></div></div>
</body></html>

a{text-decoration: none;color: #000;
}
img,li,ul{padding: 0;margin: 0;
}
li{list-style: none;
}
body{max-width: 540px;min-width: 320px;margin: 0 auto;color: #000;background-color: #f4f4f4;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}
/* 搜索框模块 */
.search{position: fixed;display: flex;align-items: center;width: 100%;left: 50%;top: 0;transform: translateX(-50%);height: 44px;max-width: 540px;min-width: 320px;background-color: white;
}
.search .sc_input{flex: 1;height: 32px;border: 1.8px solid #0086f6;border-radius: 16px;margin-left: 10px;color: #999;text-align: center;line-height: 32px;font-size: 15px;
}
.sc_input i{font-size: 18px;
}
.search .user{width: 44px;height: 44px;text-align: center;color: #0086f6;
}
.search .user i{font-size: 18px;
}
.search .user span{display: inline-block;font-size: 14px;
}/* 焦点图 */
.foucs{width: 100%;margin-top: 44px;
}
.foucs img{width: 100%;height: 100px
}/* nav 模块 */
.nav{display: flex;margin-bottom: 15px;padding:0 8px 8px;background-color: white;
}
.nav ul{flex: 1;display: flex;flex-direction: column;margin-left: 2px;
}
.nav ul:first-child{margin-left: 0;
}
.nav ul li:first-child a{color: white;
}
.nav ul li a{display: block;padding-top: 10px;
}
.nav ul li{width: 100%;height: 58px;font-size: 12px;text-align: center;margin-bottom: 2px;
}
.nav ul li:last-child{margin-bottom: 0;
}
.nav ul li a .nav_ig{display: inline-block;width: 21px;height: 18px;background: url(images/jingling.png) 0 -66px;background-size: 21px 315px;
}
.nav .nav_style{display: block;
}
.nav-hotel:first-child{background-color: #fb8650;border-top-left-radius:8px;
}
.nav-hotel:nth-child(2) .nav_ig{background-position: 0 -255px;
}
.nav-hotel:nth-child(3) .nav_ig{background-position: 0 -3px;
}
.nav-hotel{background-color: #fff5f1;
}.nav-flight:first-child{background-color: #50b2fa;
}
.nav-flight:first-child .nav_ig{background-position: 0 -130px;
}
.nav-flight:nth-child(2) .nav_ig{background-position: 0 -44px;
}
.nav-flight:nth-child(3) .nav_ig{background-position: 0 -212px;
}
.nav-flight{background-color: #eff9ff;
}.nav-train:first-child{background-color: #5e80ff;
}
.nav-train:first-child .nav_ig{background-position: 0 -276px;
}
.nav-train:nth-child(2) .nav_ig{background-position: 0 -169px;
}
.nav-train:nth-child(3) .nav_ig{background-position: 0 -193px;
}
.nav-train{background-color: #f2f5ff;
}.nav-vacation:first-child{background-color: #52d9b3;
}
.nav-vacation:first-child .nav_ig{background-position: 0 -110px;
}
.nav-vacation:nth-child(2) .nav_ig{background-position: 0 -150px;
}
.nav-vacation:nth-child(3) .nav_ig{background-position: 0 -297px;
}
.nav-vacation{background-color: #ecfcf8;
}.nav-gs:first-child{background-color: #ff8939;border-top-right-radius: 8px;
}
.nav-gs:first-child .nav_ig{background-position: 0 -23px;
}
.nav-gs:nth-child(2) .nav_ig{background-position: 0 -86px;
}
.nav-gs:nth-child(3) .nav_ig{background-position: 0 -233px;
}
.nav-gs{background-color: #fff9f2;
}/* banner模块 */
.sub-banner{width: 100%;display: flex;}
.banner{flex: 1;width: 50%;padding:8px 0 8px 8px;margin-left:8px;background-color: white;border-radius: 10px;
}
.banner:nth-child(2){margin-right: 8px;
}
.banner .block-header{display: flex;justify-content: space-between;height: 20px;margin-bottom: 8px;
}
.banner .block-header .live-streaming{color: #ff4607;background-color: #ffebe3;font-size: 12px;
}
.slider{position: relative;padding-right: 8px;
}
.slider .tag{position: absolute;width: 55px;top: 0;left: 0;text-align: center;font-size: 12px;color: white;background-color: #000;
}
.slider img{width: 100%;height: 84px;border-radius: 3px;
}
.slider .product{position: relative;left: 0;bottom: 26px;color: white;font-weight: 600;font-size: 12px;
}
.footer-price{display: flex;
}
.footer-price .price{color: red;font-size: 14px;
}
.footer-price .price i{font-weight: 600;
}
.footer-price .price s{font-size: 12px;
}
.footer-price .sub{background-color: #fb8650;color: white;font-size: 12px;padding: 0 4px;margin-left: 5px;
}
.block-header .ranking{height: 16px;background-color: #fdefd2;color: #ae6e15;margin-left: 10px;border-radius: 2px;font-size: 10px;padding: 1px 4px;line-height: 16px;
}
.rank-wrapper{display: flex;padding-right: 8px;
}
.rank-wrapper .rank-item{flex: 1;position: relative;
}
.rank-item:nth-child(1){margin-right: 4px;
}
.rank-wrapper .rank-item img{width: 100%;border-radius: 5px;height: 84px;
}
.rank-item .tag{position: absolute;top: 0;left: 0;background-color: #e2c089;font-size: 10px;border-top-left-radius: 5px;border-bottom-right-radius: 5px;
}
.rank-item .block-footer{display: flex;margin-top: 17px;
}
.rank-item .block-footer .rank-title{font-size: 11px;width: 70px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}
/* 广告模块 */
.advertising{margin-top: 10px;padding: 0 8px;
}
.advertising img{width: 100%;height: 88px;border-radius: 8px;
}
/* 工具模块 */
.toolbox{display: flex;justify-content: space-around;margin-top: 10px;
}
.toolbox div{font-size: 13px;min-width: 100px;height: 30px;border-radius: 5px;border: 1px solid #999;line-height: 30px;text-align: center;
}
.toolbox span{margin-right: 3px;
}
.toolbox .language{position: relative;padding-right: 8px;
}
.toolbox .trangle{position: absolute;top: 15px;right: 0;border: 5px solid transparent;border-top: 5px solid black;
}

携程首页手机端-静态页面相关推荐

【无标题】关于携程旅行手机端网站分析：
关于携程旅行手机端网站分析:第一次写博客.. 作者是一名初阶爬虫人员遇到过很多大坑,因此发表出来,让小伙伴们避避雷 1.post请求,携带的参数必须是json字符串形式的上代码 res = req ...
织梦手机站生成html,织梦手机端静态页面生成教程
织梦自带的手机端是动态的,相对于静态网站来说 ,seo优化会不好点, 那dedecms织梦程序如何生成静态页面呢? 在这里我为大家推荐一款插件,轻轻松松就可以生成静态页面,对于不会代码的朋友也很简单, ...
用HTML和CSS做一个携程旅游手机端布局含源码分享
效果如下图所示: 文件夹内容如下: 源码分享:https://pan.baidu.com/s/1Rdt24sPEB9Rp8tnc9Udr3Q 提取码:3eka html: <!DOCTYPE ...
携程app 原生 html5,仿携程html5手机端UI（仅有首页的源码未实现业务逻辑）
属性大小日期时间名称 ----------- --------- ---------- ----- ---- 目录 0 201 ...
帝国cms手机端静态页面同步生成修改文件方法
本文需配合"移动端同步生成"插件使用,需要修改的文件为 e/class/functions.php ,修改的函数一共五个,分别是: ListHtml--生成栏目类列表函数: Lis ...
m install index.php,织梦dede手机端静态化终极解决方案
文章已经发布最新版本,经过简化测试可以正常使用,请仔细阅读,一步一完成即可,如有其他问题请联系站长QQ或加熊掌号. 大家都知道静态页面的好处多多,既有利于抓取收录而且打开速度也比较快,节省服务器CPU ...
Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
织梦手机端静态页生成插件带自动更新
织梦静态页面的好处多多,既有利于抓取收录而且打开速度也比较快,节省服务器CPU的时间,因此许多大型网站也进行静态化.由于dedecmsv5.7sp2版本没有提供手机端移动端网站静态生成的功能,今天分享 ...
微信小程序UI------实现携程首页顶部的界面（弹性布局）
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看 ...

携程首页手机端-静态页面

携程首页手机端-静态页面相关推荐

最新文章

热门文章