移动WEB布局使用less语法之header布局

      从今天开始小编会出一系列的移动web的常见布局类型的布局这里我们先来的是对于常见头部布局以及头部的一些细节问题的解决，首先先来一张图来解析一下我们要布局的头部，接下来要分布开始我们的讲解啦！

     

     1.视口属性的设置

    我们知道如果要想移动设备自动识别本机设备的一些参数我们需要设置一个视口属性，方便我们后来的一些参数的设置首先来介绍这个视口属性

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这里有几个参数width的值device-width获取的就是设备的宽度

   2.设置它的容器宽度

   专业一下我们必须要设置的是它的最大的容器方便以后设置一些属性，l_container

   

width: 100%;
	/*这里设置最小宽度*/
	max-width: 640px;
	/*这里是为了固定*/
	margin: 0 auto;

   3.开始头部

   首先我们可以使用css的语义标签header来进行布局

   首先开始的是html的布局

   

<span style="white-space:pre">		</span><a href="#" class="h_reback"></a>
    		<input type="text">
    		<a href="#" class="h_list"></a>

   接下来的是css，但是我们使用的是less的语法，以便于查错和一个属性的层次感

   

header{
	
	height: 44px;
	border-bottom: 1px solid #ccc;
	background-image: url("../images/header-bg.png");
	background-size: 1px 44px;
	background-repeat: repeat-x;
	position: relative;
	padding: 0 50px;
	line-height: 45px;
	.h_reback{
		
		height: 44px;
		width: 40px;
		display: block;
		position: absolute;
		background-image: url(../images/sprites.png);
		background-position: -20px 0;
		background-size: 200px 200px;
		padding: 10px 12px;

                /*这里的重点就是使用背景原点和背景切割来进行背景的设置*/
		background-origin: content-box;
		background-clip: content-box;
		top:0px;
		left: 0px;
	}
	.h_list{
		
		height: 44px;
		width: 40px;
		display: block;
		position: absolute;
		background-image: url(../images/sprites.png);
		background-position: -60px 0;
		background-size: 200px 200px;
		padding: 10px 12px;

		background-origin: content-box;
		background-clip: content-box;
		top:0px;
		right: 0px;
	}
	input{
		width: 100%;
		height: 30px;
		border-radius: 5px;
	}
}

我们这里的重点就是对于背景图片的设置这里将a标签改为一个块级元素的标签然后对这个标签设置宽高后在设置padding在将切割原点修改内内容区域中，原因就是为了将点击的区域放大而又不影响图标的位置效果！