移动web开发之流式布局及案例练习
开始学习移动web开发布局，给自己做一些总结。
移动端技术解决方案
1.移动端浏览器兼容问题.
移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可.
2.移动端公共样式
这里推荐使用normalize.css/
官网地址
移动端大量使用 CSS3盒子模型box-sizin
我们在传统模式里宽度计算是：盒子的宽度 = CSS中设置的width + border + padding
在css3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了。
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
注意：移动端可以全部CSS3 盒子模型，PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型。
移动端特殊样式
这里在介绍一些除去移动端特有的特殊样式的方法，更多的结合百度进行解决哟。
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动端常见布局
移动端单独制作：
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
响应式：
- 媒体查询
- bootstarp
流式布局以京东手机端案例练习
流式布局：
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
京东手机端案例练习：
1.先将项目环境搭建好。
img用于存放背景图，upload用于存放产品图片等。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<!--视图标签 设置手机端和pc端一比一，不允许用户缩放，最大和最小缩放都是1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入css初始化文件 -->
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<!-- 引入首页css样式文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title></title>
</head>
<body>
</body>
</html>
给body结合具体需求方案添加默认样式，以及其他一些标签默认样式。
body {
/* 采用流试布局,给主体body设置成在320px到640px之间100%的宽度,并居中,在设置字体大小,风格等样式. */
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
color: #666;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
img {
/* 去除默认图片空隙 */
vertical-align: middle;
}
2.制作首页头部app部分。
html部分：
<!-- 首页头部打开app部分 -->
<header class="app-header">
<ul>
<li>
<img src="img/5ac9d730N04e6d766.png" >
</li>
<li>
<img src="img/5b850ecaN644d2983.png" >
</li>
<li>打开京东App，购物更轻松</li>
<li>立即打开</li>
</ul>
</header>
css部分：
/* 首页头部打开app部分 */
.app-header {
height: 45px;
}
.app-header ul li {
float: left;
height: 45px;
line-height: 45px;
color: #fff;
background-color: #333;
text-align: center;
}
.app-header ul li:nth-child(1) {
width: 8%;
}
.app-header ul li:nth-child(1) img {
width: 10px;
}
.app-header ul li:nth-child(2) {
width: 10%;
}
.app-header ul li:nth-child(2) img {
width: 30px;
/* 默认图片和文字是基线对齐,我们要进行改变,将文字与图片进行中部对齐 */
vertical-align: middle;
}
.app-header ul li:nth-child(3) {
width: 57%;
}
.app-header ul li:nth-child(4) {
width: 25%;
background-color: #F63515;
}
这里是建一个大盒子做容器，宽度继承父级body为100%，给一个固定高度，里面分为四个部分，用一个ul下面四个li设置浮动就可以一行，每个里设置各自的宽度百分比，居中对齐，垂直对齐，还有调整图片的对齐方式，等等即可。
3.制作搜索栏部分
html部分：
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
<div class="fdj-icon"></div>
</div>
<div class="search-login">登录</div>
</div>
css部分：
/* 搜索栏部分 */
.search-wrap {
position: fixed;
overflow: hidden;
width: 100%;
max-width: 640px;
min-width: 320px;
height: 44px;
color: #fff;
}
/* 因为二边部分是固定不变的,使用我们需要让这二个脱离普通文档结构流,防止机构出差 */
.search-btn {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
}
/* 这里我们是在左边盒子里插入一个盒子,然后给盒子背景作为一个按钮 */
.search-btn::before {
content: '';
display: block;
width: 20px;
height: 18px;
margin: 14px 0 0 15px;
background: url(../img/xia.png) no-repeat;
background-size: 20px 18px;
}
.search-login {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 44px;
line-height: 44px;
}
/* 中间搜索框因为是流动的,所以我们让他和父元素一样宽度是100%,但是我们两边是有东西的,所以要给二边margin值,让二边位置空出来 */
.search {
position: relative;
margin: 0 50px;
margin-top: 7px; /*这里发生了外边距塌陷,因为这是子元素,和父元素相互嵌套,给子元素外边距父元素也会带下来,给父元素设置hidden即可.*/
height: 30px;
border-radius: 25px;
background-color: #fff;
}
.search .jd-icon {
position: absolute;
top: 8px;
left: 15px;
width: 20px;
height: 15px;
background: url(../img/jd-ico.png) no-repeat;
background-size: 20px 15px;
}
.search .jd-icon::after {
content: "";
position: absolute;
display: block;
border-right: 1px solid #ddd;
top: 0;
left: 26px;
height: 16px;
}
.search .fdj-icon {
position: absolute;
top: 8px;
left: 41px;
width: 18px;
height: 15px;
background: url(../img/jd-sprites.png) no-repeat;
background-position: -80px 0; /*这里运用到了精灵图，注意我们在量取精灵图位置时，要先将精灵图等比例缩小2倍再量， */
background-size: 200px auto; /*我们量的是缩小二倍的距离，所以在页面中也要把精灵图也就是背景图缩小二倍*/
}
这一部分结构是一个大盒子里先分为三部分，中间一个部分在分为三个部分。
这里有一个难点，二边部分是固定的，中间部分是自适应式的，我们的方法是将二边用绝对定位脱离普通流，然后给让中间部分宽度和父级一样是100%，但是设置左右margin值，这样就可以将中间部分挤到中间来，这样就可以实现了这种效果。
这里还运用到了精灵图来实现放大镜的图标，结合手机端的二倍图，我们要先将精灵图等比例缩小到2倍，在量精灵图中放大镜的位置，页面中也要讲图片缩小，这样在手机端图像显示就会很清晰正常。
4.主题内容部分
html部分：
<!-- 主题内容部分 -->
<div class="min-content">
<!-- 滑动图 -->
<div class="huadong">
<img src="upload/jd-0.dpg" >
</div>
<!-- nav -->
<nav>
<a href="#">
<img src="upload/nav-1.png" >
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav-2.png" >
<span>数码家电</span>
</a>
<a href="#">
<img src="upload/nav-4.png" >
<span>京东服饰</span>
</a>
<a href="#">
<img src="upload/nav-5.png" >
<span>京东生鲜</span>
</a>
<a href="#">
<img src="upload/nav-3.png" >
<span>京东到家</span>
</a>
<a href="#">
<img src="upload/nav-6.png" >
<span>充值缴费</span>
</a>
<a href="#">
<img src="upload/nav-7.png" >
<span>9.9元拼</span>
</a>
<a href="#">
<img src="upload/nav-8.png" >
<span>领劵</span>
</a>
<a href="#">
<img src="upload/nav-9.png" >
<span>赚钱</span>
</a>
<a href="#">
<img src="upload/nav-10.png" >
<span>PLUS会员</span>
</a>
</nav>
<!-- 超级品牌日 -->
<div class="pingpai">
<div>
<a href="#"><img src="upload/jd-2.dpg" ></a>
</div>
<div>
<a href="#"><img src="upload/jd-3.dpg" ></a>
</div>
<div>
<a href="#"><img src="upload/jd-1.dpg" ></a>
</div>
</div>
</div>
css部分：
/* 主体部分 */
/* 滑动图 */
.huadong img{
width: 100%
}
/* 品牌日 */
.pingpai div {
float: left;
width: 33.33%;
}
.pingpai div img{
width: 100%;
}
/* nav */
nav {
overflow: hidden;
padding: 10px 0;
background-color: #000000;
background: url(../upload/nav-bg.dpg) no-repeat;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
margin: 10px 0;
width: 44px;
}
nav a span {
display: block;
}
这里滑动图要js，用一张图代替，图片宽度设置为100%，即可。
nav导航部分是由10组的图标文字组合而成，具体介绍一组，其他一样布局，然后将这些组左浮动，图标文字不同啦，用一个a标签包含img标签以及span标签，在img标签里放图标，span标签放文字,每一个a标签宽度都设置为20%，里面的img标签宽度固定，给上面margin值，与下面文字隔开，span标签转换为块状元素即可。
下面品牌日，是三个部分组成，也是三张图片，给三个部分的div设置宽度为33.33%,左浮动成一行，里面图标宽度设置成100%跟随父级一样大即可，对啦，要用a标签将img标签包裹起来哟。
在下面的部分跟这练习的几个部分差别不大，有兴趣可继续往下做，大多都是最大盒子是继承body宽度为100%，里面分几部分，给每部分一个相应的百分比宽度即可。