移动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.先将项目环境搭建好。

移动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;
}

移动web开发之流式布局及案例练习_第2张图片
移动web开发之流式布局及案例练习_第3张图片
移动web开发之流式布局及案例练习_第4张图片

这里滑动图要js,用一张图代替,图片宽度设置为100%,即可。
nav导航部分是由10组的图标文字组合而成,具体介绍一组,其他一样布局,然后将这些组左浮动,图标文字不同啦,用一个a标签包含img标签以及span标签,在img标签里放图标,span标签放文字,每一个a标签宽度都设置为20%,里面的img标签宽度固定,给上面margin值,与下面文字隔开,span标签转换为块状元素即可。
下面品牌日,是三个部分组成,也是三张图片,给三个部分的div设置宽度为33.33%,左浮动成一行,里面图标宽度设置成100%跟随父级一样大即可,对啦,要用a标签将img标签包裹起来哟。
在下面的部分跟这练习的几个部分差别不大,有兴趣可继续往下做,大多都是最大盒子是继承body宽度为100%,里面分几部分,给每部分一个相应的百分比宽度即可。

你可能感兴趣的:(移动web,html,web)