移动端网页布局（携程网）

HTML部分

<!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="css/normalize.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/iconfont.css">
</head><body><div class="search-index"><div class="search">搜索:目的地/酒店/景点/航班号</div><a href="" class="user">我的</a></div><!-- 焦点 --><div class="focus"><img src="uplode/focus.png" alt=""></div><!-- 局部导航栏 --><ul class="local-nav"><li><a href="" title="景点 游玩"><!-- title作用是当鼠标停留在图标上的时候，自动出现图标的标题 --><span class="local-nav-icon"></span><span>景点 游玩</span></a></li><li><a href="" title="景点 游玩"><span class="local-nav-icon"></span><span>景点 游玩</span></a></li><li><a href="" title="景点 游玩"><span class="local-nav-icon"></span><span>景点 游玩</span></a></li><li><a href="" title="景点 游玩"><span class="local-nav-icon"></span><span>景点 游玩</span></a></li><li><a href="" title="景点 游玩"><span class="local-nav-icon"></span><span>景点 游玩</span></a></li></ul><!-- 主导航栏 --><nav><div class="nav-commen"><div class="nav-items"><div class="nav-items"><a href="">海外酒店</a></div></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div><div class="nav-commen"><div class="nav-items"><div class="nav-items"><a href="">海外酒店</a></div></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div><div class="nav-commen"><div class="nav-items"><div class="nav-items"><a href="">海外酒店</a></div></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div></nav><!-- subnav-entry --><ul class="subnav-entry"><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></span><span>话费充值</span></a></li><li><a href=""><span class="subnav-entry-icon"></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="data:images/板块1.png" alt=""></a><a href="#"><img src="data:images/板块2.png" alt=""></a></div><div class="row"><a href="#"><img src="data:images/板块3.png" alt=""></a><a href="#"><img src="data:images/板块4.png" alt=""></a></div><div class="row"><a href="#"><img src="data:images/板块5.png" alt=""></a><a href="#"><img src="data:images/板块6.png" alt=""></a></div></div></div><!-- 底部footer --><ul class="subnav-entry"><li><a href=""><span class="footer-item-icon"></span><span>首页</span></a></li><li><a href=""><span class="footer-item-icon"></span><span>社区</span></a></li><li><a href=""><span class="footer-item-icon"></span><span>消息</span></a></li><li><a href=""><span class="footer-item-icon"></span><span>我的</span></a></li></ul></body></html>

CSS部分


body{Max-width:540px;min-width: 320px;margin:0 auto;font:normal 14px/1.5 Tahoma,"Lucida Grande";color:#000;background-color: #f2f2f2;overflow-x:hidden;-webkit-tap-highlight-color:transparent;height: 1000px;
}
ul {margin:0;padding:0;list-style:none;
}
a{text-decoration:none;text-align:center;color:#666;
}ul li a{text-decoration:none;color:#666;
}
div{box-sizing:border-box;
}
.search-index{display:flex;position:fixed;top:0;left:50%;-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;flex:1;height: 26px;border:1px solid #ccc;font-size:12px;color:#666;line-height:24px;margin:15px 10px;padding-left:25px;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.2);}
.search::before{content:"";position:absolute;top:5px;left:5px;width: 15px;height: 15px;background:url(../images/1.png) no-repeat -59px -279PX;background-size: 104px auto;}
.user{width: 44px;height: 44px;/*  background-color:purple; */text-decoration:none;background-color: pink;border-radius:50%;color:#666;
}
.user::before{content:"";display:block;width: 23px;height: 23px;background-image: url("../images/2.png") no-repaet -59 ;background-size:104px auto;
}
.focus{margin-top:5px;padding-top:44px;
}
.focus img{width: 100%;
}
.local-nav{display:flex;height: 64px;background-color: #fff;margin:3px 4px;border-radius:8px;
}
.local-nav li{flex:1;list-style:none;}.local-nav a{display:flex;flex-direction:column;/* 侧轴居中对齐 */align-items:center;font-size:12px;
}
.local-nav-icon{width: 32px;height: 32px;background-color:pink;border-radius:50%;
}
/* 主导航栏 */
nav{overflow:hidden;border-radius:8px;margin:0 4px 3px;
}
.nav-commen{display:flex;height: 88px;background-color: pink;}
.nav-commen:nth-child(2){margin:3px 0;
}.nav-items{flex:1;display:flex;flex-direction:column;}
/* -n+2就是选择前面两个 */
.nav-items:nth-child(-n+2){border-right:1px solid white;
}
.nav-items a{flex:1;text-decoration:none;color:#fff;text-align:center;line-height:44px;text-shadow:1px 1px black;
}
.nav-items a:nth-child(1){border-bottom:1px solid white;
}
.nav-items a:nth-child(1) a{border:0;background:url("../images/酒店.png") no-repeat;}.nav-commen:nth-child(1){background:-webkit-linear-gradient(left,#FA5A554D,#FA99);
}
.nav-commen:nth-child(2){background:-webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-commen:nth-child(3){background:-webkit-linear-gradient(left,#34C2A9,#6CD559);
}/* subnav-entry */
.subnav-entry{display:flex;flex-wrap:wrap;border-radius:8px;background-color: #fff;margin:0 4px;box-shadow:inset;}
.subnav-entry li{flex-direction:column;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:5px;
}
/* 销售模块 */
.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{position:absolute;top:0px;left:20px;content:"";width: 79px;height: 15px;background-color: pink;background:url("../images/销售.png") no-repeat ;background-size:73px 15px;
}
.more{position:absolute;right:5px;top:8px;background:-webkit-linear-gradient(left,#FF506C,#FF6BC6);border-radius:18px;padding:3px 20px 3px 10px;}
.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 sloid red;
}
.row a:nth-child(1){border-right: 1px solid #eee;
}
.row a img{width: 100%;
}
/* 底部 */
.footer-item-icon {width: 28px;height: 28px;background-color: rgb(238, 22, 227);margin-top:5px;border-radius:50%;
}
ul li a{margin:0;padding:0;
}

成品

移动端网页布局（携程网）相关推荐

移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录一.移动端浏览器二.移动端屏幕分辨率三.移动端网页调试方法一.移动端浏览器移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...
【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )
文章目录一.视网膜屏技术二.二倍图概念三.代码示例一.视网膜屏技术 PC 端和早期的移动端网页中 , CSS 中配置的 1 像素对应的就是物理屏幕中的 1 像素 ; Retina 视 ...
rem适配的浏览器_移动端网页布局适配rem方案小结
前言根据 W3C 规范中对 1rem 的定义: 1rem 与等于根元素 font-size 的计算值.当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照. 这就意味着 1 ...
PC端网页布局——世纪佳缘（二）页面初搭建
咱们首先来搭建一下整体的大结构: 效果如下: 每一块呢,都是使用div块做的,并不难理解除了头部之外,每一块都是外面一个大的div,里面再包一个小的div,也就是所谓的通栏和版心(由于个人问题,版心 ...
PC端网页布局——世纪佳缘（三）头部
来看头部,做好的效果图如下: 接下来就进入主题吧~~ 先来分析一下: 有两张图片,一个填写账号密码和登录按钮的登录框,其他登录方式,(因为海外登录方式与前面纯图标的不太一样,这里又是只做了个大致的样式 ...

移动端网页布局（携程网）

移动端网页布局（携程网）

HTML部分

CSS部分

成品

移动端网页布局（携程网）相关推荐

最新文章

热门文章