移动web开发之流式布局及案例练习

最新推荐文章于 2022-10-30 18:05:46 发布

夏灿y

最新推荐文章于 2022-10-30 18:05:46 发布

阅读量1.3k

点赞数

分类专栏：移动web 文章标签： html web

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/105908610

版权

移动web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

开始学习移动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%，里面分几部分，给每部分一个相应的百分比宽度即可。