仿携程首页项目的静态页面布局项目

时间 2020-06-23 标签首页项目静态页面布局

布局实现思路项目https://m.ctrip.com/html5/css

1.从整体布局分析

body{
	 max-width:540px;
	 min-width:320px;
	 margin: 0  auto;
	 font: normal  14px/1.5 Tahoma, "Lucida  Grande",  Verdana,"Microsoft Yahei",STXihei, hei;
	 color:#000;
	 background:#f2f2f2;
	 overflow-x:hidden;
	 -webkit--webkit-tap-highlight-color:transparent;
}

通常设置最大宽度和最小宽度业界定位540px和320px
实现居中确定少不了 margin 0 auto;
深度讲解下 -webkit--webkit-tap-highlight-color:transparent;是防止元素点击后发生高亮

2.开始头部search的布局分析

<!DOCTYPE html>
<html>
<head>
    <meta charset="UFT-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"  content="ie=edge">
    <title>携程网</title>
		<link rel="stylesheet"  href="css/index.css" />
		<link rel="stylesheet"  href="css/normalize.css" />
	</head>
	<body>
		  <div class="search-index">
			  <div class="search">搜索:目的地/酒店/景点</div>
			  <a href="#" class="user">我 的</a>
		  </div>
	</body>
</html>

/* 搜索模块start */
.search-index {
	  display:flex;
	/* 固定定位和父没有关系  以屏幕为准 */
        position:fixed;
		top:0;
		left:50%;
		/* 兼容老版浏览器 */
	    -webkit-transform:translatex(-50%); 
		 /* //偏移50%居中 */
		transform:translatex(-50%);  
		/* 固定盒子应该有宽度 */
		 width:100%;
		 height:44px;
		 max-width:540px;
		 min-width:320px;
		 background-color:#f6f6f6;
		 border-top:1px  solid  #ccc;
		 border-bottom:  1px  solid  #ccc;
		 
		 
}

首先定义一个父div>search-index 因为页面滚动的时候是固定不变的故而使用位置布局fixed(相对于浏览器窗口)
div>search-index居中的话是使用left:50% 再使用css3的tranlatex:(-50%) 故而达到居中。注意兼容其余浏览器
父div>search-index宽度天然是100% 同时定义最大宽度和最小宽度。设置上边框和下边框

3.搜索框里面的子元素分析

.search{
	position:relative;
	height:26px;
	line-height:24px;
	border:1px solid  #ccc;
	flex:1;
	font-size:12px;
	color:#666;
	padding-left:25px;
	/* //小圆角 */
	border-radius:5px;
	box-shadow: 0 2px  4px  rgba(0,0,0,.2)
}
.search::before{
	content:"";
    position:absolute;
  top:5px;
  left:5px;
	width:15px;
	height:15px;
	background:url(../images/spitea.png)  no-repeat   -59px   -279px;
	background-size:104px  auto;
	
}


.user{
	width:44px;
	height:44px;
	font-size:12px;
	text-align:center;
	color:#2eaae0;
}

/* 找到图片的位置设置大小 */
.user::before {
	content:"";
	display:block;
	width:23px;
	height:23px;
	background:url(../images/spitea.png)  no-repeat   -59px   -194px;
	background-size:104px  auto;
	margin:4px auto    -2px ;
}

/* 搜索模块end */

因为里面（个人）是固定的宽高，右边的输入框是自适应则考虑技术栈flex布局
要实现里面的搜索图片和个人里面的图片使用标签里面的::before元素来实现
通常::before里面的图片实现是2倍图能够在fw里面设置通常的宽度,使用切割工具衡量大小来决定background:url()。。

以下图:html

.search::before{
	content:"";
    position:absolute;
  top:5px;
  left:5px;
	width:15px;
	height:15px;
	background:url(../images/spitea.png)  no-repeat   -59px   -279px;
	background-size:104px  auto;
	
}

能够看出通常将元素设置为块状用before图片三步骤:html5

将设计图宽度在fw里面修改成一半使用切割工具衡量
设置background-size: 为原来的一半 auto;
设置background 一半为负的