当前位置：首页 > news >正文

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

news 来源：原创 2024/9/23 5:16:13

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

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()。。

如下图:

.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图片三步骤: