携程移动端静态页面仿写

0x00 写在最前

这次并没有完全复刻，首先是顶图用svg做遮罩层的部分没做，然后是页脚也用到了svg，这部分也没做，之后学习了svg可能会重新更新一下本博客吧

携程移动端网址m.ctrip.com

0x01 HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Title</title>
</head>
<body>
<!--     顶部搜索--><div class="search-index"><div class="search-input"></div><a href="#" class="user">我 的</a></div>
<!--焦点图--><div class="focus"><img src="upload/focus.jpg" alt=""><svg viewBox="0 0 750 50" class="img_wrap_mask"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="img_mask_svgPath" d="M750,1.70530257e-13 L750,50 L0,50 L0,1.70530257e-13 C107.666667,33.3333333 232.666667,50 375,50 C517.333333,50 642.333333,33.3333333 750,1.70530257e-13 Z"></path></g></svg></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>
<!--主导航栏--><div class="nav-entry"><div class="nav-common"><a href="" class="nav-items nav-items-hotel"><span>酒店</span></a><a href="" class="nav-items nav-items-minsu"><span>民宿·客栈</span></a><a href="" class="nav-items nav-items-hot"><span>特价·爆款</span></a></div><div class="nav-common"><a href="" class="nav-items nav-items-flight"><span>机票</span></a><a href="" class="nav-items nav-items-train"><span>火车票</span></a><a href="" class="nav-items"><span>汽车·船票</span></a><a href="" class="nav-items"><span>专车·租车</span></a></div><div class="nav-common"><a href="" class="nav-items nav-items-travel"><span>旅游</span></a><a href="" class="nav-items nav-items-way"><span>高铁游</span></a><a href="" class="nav-items"><span>邮轮游</span></a><a href="" class="nav-items"><span>定制游</span></a></div></div>
<!--subnav-entry模块--><ul class="subnav-entry"><li><a href=""><span class="subnav-icon subnav-icon-icon1"></span><span>自由行</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon2"></span><span>WiFi电话卡</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon3"></span><span>保险·签证</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon4"></span><span>换钞·签证</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon5"></span><span>向导·包车</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon6"></span><span>特价机票</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon7"></span><span>礼品卡</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon8"></span><span>申卡·借钱</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-icon9"></span><span>旅拍</span></a></li><li><a href=""><span class="subnav-icon subnav-icon-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/p1.png" alt=""></a><a href="#"><img src="upload/p2.jpg" alt=""></a></div></div></div>
</body>
</html>

0x02 css

body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}
ul {list-style: none;margin: 0;padding: 0;
}a {text-decoration: none;color: #222;
}div {box-sizing: border-box;
}
.search-index {position: fixed;display: flex;width: 100%;height: 44px;top: 0;left: 50%;transform: translateX(-50%);max-width: 540px;min-width: 320px;/*background-color: aqua;*/
}
.search-input {position: relative;height: 26px;/*因为使用了c3的盒子模型，所以这里line-height减去了border*/line-height: 24px;border: 1px solid #ccc;flex: 1;font-size: 12px;color: #666;margin: 7px 10px;padding-left: 25px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search-input::before {content: "";display: block;position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../images/sprite.png) no-repeat -59px -279px;background-size: 104px auto;
}/*定义search-input的flex为1，所以user会占到父元素的最右边*/
.user {width: 44px;height: 44px;text-align: center;font-size: 12px;color: #2eaae0;/*background-color: black;*/
}
.user::before {content: "";display: block;width: 23px;height: 23px;background: url(../images/sprite.png) no-repeat -59px -194px;background-size: 104px auto;margin: 5px auto -2px;
}
.focus {width: 100%;position: relative;z-index: -2;
}
.focus img {width: 100%;
}
.img_wrap_mask {position: absolute;left:0;right:0;bottom: -2px;z-index: -1;max-height: 36px;width: 100%;
}
/*局部导航栏*/
.local-nav {height: 64px;display: flex;margin: -52px 12px 10px;background-color: #fff;border-radius: 8px;justify-content: space-around;box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.local-nav a {display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.local-nav li [class^="local-nav-icon"] {width: 32px;height: 32px;background-color: pink;margin-top: 8px;background: url(../images/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {background-position: 0 -32px;
}.local-nav li .local-nav-icon-icon3 {background-position: 0 -64px;
}.local-nav li .local-nav-icon-icon4 {background-position: 0 -96px;
}.local-nav li .local-nav-icon-icon5 {background-position: 0 -128px;
}
/*主导航栏*/
.nav-entry {overflow: hidden;border-radius: 8px;margin: 0 12px 1px;
}
.nav-common {display: flex;height: 66px;border-bottom: 2px solid #f2f2f2;
}
.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}.nav-common:nth-child(2) {background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
.nav-common a {text-align: center;line-height: 66px;color: #fff;font-size: 14px;/* 文字阴影 */text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
.nav-items {border-left: 1px solid #f2f2f2;flex: 0 1 23%;
}
.nav-common .nav-items:first-child {border: 0;text-align: left;box-sizing: border-box;padding: 0 1.6rem;
}
.nav-items-hotel {flex: 0 1 31%;background: url(../images/nav-items-hotel.png) bottom right no-repeat;background-size: 73px auto;
}
.nav-items-minsu {background: url(../images/nav-items-minsu.png) bottom left no-repeat;background-size: 37px auto;
}
.nav-items-hot {flex: 0 1 46%;background: url(../images/nav-items-hot.png) bottom right no-repeat;background-size: 232px auto;
}
.nav-items-flight {flex: 0 1 31%;background: url(../images/nav-items-flight.png) bottom right no-repeat;background-size: 79px auto;
}
.nav-items-train {background: url(../images/nav-items-train.png) bottom left no-repeat;background-size: 37px auto;
}
.nav-items-travel {flex: 0 1 31%;background: url(../images/nav-items-travel.png) bottom right no-repeat;background-size: 94px auto;
}
.nav-items-way {background: url(../images/nav-items-dingzhi.png) bottom left no-repeat;background-size: 61px auto;
}
/*subnav-entry模块*/
.subnav-entry {display: flex;flex-wrap: wrap;margin: 0 12px 12px;overflow: hidden;
}
.subnav-entry li {flex: 0 1 20%;
}
.subnav-entry a {display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.subnav-icon {display: block;height: 28px;width: 28px;margin-top: .63rem;margin-bottom: .31rem;
}
.subnav-icon-icon1 {background: url(../images/subnav-bg.png) 0 0 no-repeat;background-size: 28px auto;
}
.subnav-icon-icon2 {background: url(../images/subnav-bg.png) 0 -28px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon3 {background: url(../images/subnav-bg.png) 0 -56px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon4 {background: url(../images/subnav-bg.png) 0 -84px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon5 {background: url(../images/subnav-bg.png) 0 -112px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon6 {background: url(../images/subnav-bg.png) 0 -140px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon7 {background: url(../images/subnav-bg.png) 0 -168px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon8 {background: url(../images/subnav-bg.png) 0 -196px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon9 {background: url(../images/subnav-bg.png) 0 -224px no-repeat;background-size: 28px auto;
}
.subnav-icon-icon10 {background: url(../images/subnav-bg.png) 0 -252px no-repeat;background-size: 28px auto;
}
/*销售模块*/
.sales-box {border-top: 1px solid #dbdbdb;background-color: #fff;margin: 4px 4px 8px 4px;
}.sales-hd {position: relative;height: 44px;border-bottom: 1px solid #ccc;
}.sales-hd h2 {position: relative;text-indent: -999px;overflow: hidden;margin: 0;height: 44px;
}.sales-hd h2::after {position: absolute;top: 50%;transform: translateY(-50%);left: 8px;content: "";width: 79px;height: 15px;background: url(../images/hot.png) no-repeat 0 -20px;background-size: 79px auto;
}.more {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;
}.more::after {content: "";position: absolute;top: 9px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}.row {display: flex;
}.row a {flex: 1;border-bottom: 1px solid #eee;
}.row a:nth-child(1) {border-right: 1px solid #eee;
}.row a img {width: 100%;
}

除此之外还用了normalize.css来进行初始化，这个代码随便在网上下一份就好了

0x03 效果图

携程移动端静态页面仿写相关推荐

搭建 H5携程移动端页面（一）
1.携程移动端网址:m.ctrip.com 2.创建项目以及配置不同的浏览器在渲染网页元素的时候形式更统一 index.css页面样式 body{max-width: 540px;min-width: ...
flex布局的应用 —— 模仿携程移动端的首页
写在前面昨天已经过去,未来还未到来,所以当下是上天给的最好的恩赐,好好把握. 昨天又很仔细的看了看flex布局,今天下午动手用flex布局做了一个练习,就是模仿携程移动端首页.有一段时间没写html ...
html写静态页面容易写错总结
html写静态页面容易写错总结写静态页面的注意点,避免页面崩溃 1.整个页面在写之前首先应该先把大的框架搭出来,在去写里面小的细节.保证大的框架没有问题,里面有问题,大不了删了重写.(给大的框架加上 ...
教务管理系统登录页面仿写
注:仅用于学习效果图.尺寸以及主要颜色如下: 主要颜色: 左边蓝色背景颜色:#d2d6f9.或者采用线性渐变色.css为:background: linear-gradient(#f5f5f8,#d ...
仿写携程旅游手机浏览器页面
xiecheng.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
携程移动端 UI 界面性能优化实践
UI 卡顿原理和原因人类大脑与眼睛对一个画面的连贯性感知其实是有一个界限的,譬如我们看电影会觉得画面很自然连贯,其帧率通常为 24fps:那么,用手机当然也需要感知屏幕操作的连贯性(尤其是动画过渡) ...
携程移动端架构演进与优化之路
导读: 目前携程 75% 以上订单来自移动端,App 几乎承载了整个集团的所有业务形态.那么无线服务端和客户端底层架构如何支撑如此复杂灵活多样多变的业务,并顺利接入整个集团十几个不同研发团队开发的代码 ...
Android携程高级用法,Android真正仿携程首页view实现
一需求:实现view的点击缩放效果,类似于携程首页. 二需求分析:对于单纯的view的缩放还是比较简单的,我们使用单纯的android缩放动画就可以实现.但是按照携程首页的view来做的话,里面是 ...
基于HTML和css的静态网页仿写
具体效果为: 采用的技术主要有: position定位浮动布局弹性盒子布局 a链接伪类表格表单等等首先全局设置为: *{margin: 0%;padding: 0%;}ul,ol{list- ...

携程移动端静态页面仿写

携程移动端静态页面仿写相关推荐

最新文章

热门文章