從今天開始小編會出一系列的移動web的常見佈局型別的佈局這裡我們先來的是對於常見頭部佈局以及頭部的一些細節問題的解決，首先先來一張圖來解析一下我們要佈局的頭部，接下來要分佈開始我們的講解啦！

     1.視口屬性的設定

    我們知道如果要想移動裝置自動識別本機裝置的一些引數我們需要設定一個視口屬性，方便我們後來的一些引數的設定首先來介紹這個視口屬性

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

   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>
 

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