cssbody {
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;
/* ul有默认的margin和padding */
}a {
text-decoration: none;
color: #222;
}div {
box-sizing: border-box;
}/* 搜索模块 */.search-index {
display: flex;
/* 固定定位跟父级没有关系 它以屏幕为准 */
/* 已经有定位，margin：auto无效 */
position: fixed;
top: 0;
left: 50%;
/* left相当于页面的一半，再往里走自己的一半，使用margin-left盒子一半的值，
但是我们这个盒子会进行缩放，不确定,transform: translateX(-50%);
translate
里面写百分比，相对于自身的宽度来说的 */
/* 不写left和 translate默认也是在中间的 */
/*下面这个属性注意两个顺序，兼容老版本，先写单独的，再写整个的*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
/* 固定的盒子必须有宽度 */
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
/* background-color: pink;
*/
background-color: #F6F6F6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}.search {
position: relative;
height: 26px;
line-height: 24px;
/* 行高等于高，垂直居中，但是css3包括border，所以这里是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);
/* 水平 垂直 模糊4px */
}/* before行内元素，转成块级元素才有大小 */
/*
第一步，缩放，2 选中，
宽度改为104px,也可以不写，或者auto
*/
.search::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 15px;
height: 15px;
background: url(../images/sprite.png) no-repeat -59px -279px;
/* 位置 */
/* 缩放2倍 */
background-size: 104px auto;
}.user {
width: 44px;
height: 44px;
/* background-color: purple;
*/
font-size: 12px;
text-align: center;
color: #2eaae0;
}.user::before {
/* before放大镜块级元素，会将文字挤下来，使用绝对定位，不占位置，自绝父相 */
content: "";
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) no-repeat -59px -194px;
background-size: 104px auto;
margin: 4px auto -2px;
/* 上 左右 下 */
}/* focus */.focus {
padding-top: 44px;
}.focus img {
width: 100%;
/* 图片和我们的父亲一样高，width设置为100% */
}/* local-nav */
/* 第三部分宽度不要给，高度定死 */
.local-nav {
display: flex;
height: 64px;
margin: 3px 4px;
background-color: #fff;
border-radius: 8px;
}.local-nav li {
flex: 1;
}.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 */nav {
overflow: hidden;
/* 我们给了nav小圆角，但是没有给div,
所以设置之后为直角，那么给nav在设置overflow：hidden就可以 */
border-radius: 8px;
margin: 0 4px 3px;
}.nav-common {
display: flex;
height: 88px;
background-color: pink;
}.nav-common:nth-child(2) {
margin: 3px 0;
}.nav-items {
/* 不冲突的 */
flex: 1;
display: flex;
flex-direction: column;
}.nav-items a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
font-size: 14px;
/* 文字阴影 */
text-shadow: 1px 1px rgba(0, 0, 0, .2);
}.nav-items a:nth-child(1) {
border-bottom: 1px solid #fff;
}.nav-items:nth-child(1) a {
border: 0;
background: url(../images/hotel.png) no-repeat bottom center;
background-size: 121px auto;
}/* -n+2就是选择前面两个元素 */.nav-items:nth-child(-n+2) {
/*
-n+2选中前两个n+2从第二个开始
*/
border-right: 1px solid #fff;
}.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);
}/* subnav-entry */.subnav-entry {
display: flex;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
/* 放不下盒子，这时候如果不设置换行的话，就会自动缩小里面盒子的大小，
但是这里，因为这里十个孩子都没有宽度，设置换行也没用，分成十份，每个孩
子领一份 */
/* 但是我们只想一行放5个，写百分比 */
/* 为了搜索引擎优化，给我们写了一个热门活动，让他出去就行 */
flex-wrap: wrap;
padding: 5px 0;
}.subnav-entry li {
/* 里面的子盒子可以写 % 相对于父级来说的 */
flex: 20%;
}.subnav-entry a {
display: flex;
flex-direction: column;
align-items: center;
}.subnav-entry-icon {
width: 28px;
height: 28px;
background-color: pink;
margin-top: 4px;
background: url(../images/subnav-bg.png) no-repeat;
background-size: 28px auto;
}/* sales-box */.sales-box {
border-top: 1px solid #bbb;
background-color: #fff;
margin: 4px;
}.sales-hd {
position: relative;
height: 44px;
border-bottom: 1px solid #ccc;
}.sales-hd h2 {
position: relative;
text-indent: -999px;
overflow: hidden;
}.sales-hd h2::after {
/* 这样就是上下加内容，因为它是display:block。这样使用的方法节省了我们的标签，
用于在css渲染中向元素逻辑上的头部或尾部添加内容，这些添加不会出现在DOM中，
不会改变文档内容，不可复制，仅仅是在css渲染层加入，所以不要用
before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。 */
position: absolute;
top: 5px;
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: 0px;
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%;
/*
宽度设置为100%和父元素一样宽
设置flex宽度自适应
*/
}
html
Document - 锐客网
搜索:目的地/酒店/景点/航班号
我的
文章图片
热门活动
获取更多福利
文章图片
文章图片
文章图片
文章图片
【携程旅行案例代码】
文章图片
推荐阅读
- 功能测试|接口测试流程
- 前端工程化之FaaS SSR方案
- 爱番番微前端框架落地实践
- 面试|编写selenium脚本的步骤
- 卡拉云|最好用的 7 款 Vue admin 后台管理系统测评
- Vue实战--电商后台管理系统|Vue实战之 3. 登录/退出功能
- 面试|前端面试宝典
- ECE 3105
- 前端面试资料整理【React篇】