伸缩布局flex、背景缩放实例、字体阴影—携程网手机app

要点：

1.将需要伸缩布局的父级元素添加display:flex显示效果，在子级元素中设置flex的值，然后按比例分。如一个子集元素是1，另一个是2，则一个占三分之一，另一个三分之二。

2.字体阴影非常占内存，不建议使用

3.背景图片的缩放，可以为px和百分比（如果自定义一个，另一个按原来图片的比例等比列缩放）

另两个特殊的属性值，cover将图片等比例缩放，直到图片的高跟盒子的高一致

contain跟盒子的宽一致

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		html,body{
			min-width: 320px;
			max-width: 540px;
			margin:0 auto;
		}
		header img{
			height: 108px;
			width: auto;
		}
		nav{
			border: 1px solid #ccc;
			padding: 4px;
		}
		nav a,nav em{
			text-decoration: none;
			font-size: 14px;
			text-shadow: 0 2px 1px rgba(0,0,0,.2);
			color: #fff;
			/*非常占内存*/
		}

		.row{
			height: 90px;
			display: flex;
			/*为父级盒子添加flex，可以完成伸缩布局*/
			border-radius: 5px;
			/*为父盒子添加圆角*/
			overflow: hidden;
			/*子元素会继续冒出来，要隐藏*/
			margin-bottom: 5px;
		}
		.row div{
			height: 100%;
			flex: 1;
			/*为父级盒子添加flex属性后，下面的子盒子每个占一份*/
			background-color: #ff697a;
			border-right: 1px solid #fff;
		}
		.row div:nth-child(3){
			border-right: 0;
		}
		.row div a{
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.row em{
			display: block;
			height: 45px;
			text-align: center;
			line-height: 45px;
			font-style: normal;
		}
		.row i{
			display: block;
			width: 43px;
			height: 43px;
			margin: -5px auto 0;
			background:url(img/ctrip.png) no-repeat 0 -127px;
			/*-webkit-background-size:104px;*/
			background-size: 104px;
			/*宽度改为原来的一半，第二项自动等比例缩放*/
		}
		.row div a .jipiao{
            background-position: 0 -288px;
		} 
		.row div a .ggg{
			background-position: 0 -190px;
		}
		.row3{
			display: flex;
			flex-direction: column;
			/*垂直动态分布*/
		}
		.row3 a{
            flex: 1;
            /*上下两个各占一半*/
            text-align: center;
            line-height: 45px;
            color: #fff;
		}
		.row3 a:first-child{
			border-bottom: 1px solid  #fff;
		}
	</style>
</head>
<body>
	<header>
		<img src="img/banner.jpg">
	</header>
	<nav>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i class="jipiao"></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i class="ggg"></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
	</nav>
</body>
</html>

效果;

伸缩布局flex、背景缩放实例、字体阴影—携程网手机app

要点：

猜你喜欢