【CSS-flex布局】携程主页制作笔记

学习资料来源：

bilibili CSS3-flex布局
github链接

flex 属性

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

1. flex-flow (flex-direction + flex-wrap):main axis方向 是否多行

   • nowrap
   • wrap

2. justify-content :主轴排列方式：

3. align-items（单行使用）:cross axis 排列方式

4. align-content(多行使用) ：cross axis 排列方式

   • flex-start
   • flex-end
   • center
   • space-around
   • space-between
   • stretch (子元素的height 不可以有，在cross axis方向上拉伸)

5. 子元素属性：

   • flex ：分配剩余的空间，比如：子元素三等分，可以子元素不设置高宽，仅仅flex:1 ;
   • order :子元素相对顺序，默认1 ，升序
   • align-self： 控制子项自己在侧轴上的排列方式

携程页面制作

向右的箭头

上边框，右边框，旋转45度

.more::after{
	content: "";
	position: absolute;
	top:8px;
	right: 10px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

导航栏

使用ul ，flex 对li平分行 ，里面包a的结构

<!-- 底部 -->
<ul class="nav-bottom">
	<li >
		<a href="#" > 
			<span class="nav-bot-icon1"></span>
			<span>电话预定</span>
		</a>
	</li>
	<li >
		<a href="#" >
			<span class="nav-bot-icon2"></span>
			<span>下载客户端</span>
		</a>
	</li>
	<li >
		<a href="#" > 
			<span class="nav-bot-icon3"></span>
			<span>我的</span>
		</a>
	</li>
</ul>

</div>

背景渐变色

background: -webkit-linear-gradient(left,#FF506C, #FF6BC6

伪元素

加图片 ::before 或者::after

1. content
2. 声明为块级元素 display:block 或者 position；absolute (父亲relative，后top等等）。使它拥有高宽
3. background 不要忘记 no-repeat
4. background-size : 宽数值 高auto
   

/*user*/
.user::before{
	content:"";
	display: block;
	height: 23px;
	width: 23px;
	background:url(../images/sprite.png) no-repeat -59px -194px;
	background-size: 104px auto;
	margin: 2px auto -2px;
}

span span 上图下文结构

1. span行内元素 父亲flex 让它有宽高
2. 父亲 竖直排列
3. 父亲 侧轴居中

<ul class="local-nav">
		<li>
			<a href="#" title="景点玩乐">
				<span class="local-nav-icon-icon1"></span>
				<span>景点玩乐</span>
			</a>
		</li>

.local-nav a{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
}

nth-child选择器 和 class^=“”

1. 【nth-child选择器】要把自己写在前面,比如下：对所有.nav-items里的第一个a添加底边框效果，把a写在了前面

.nav-items a:nth-child(1){
	border-bottom: 1px solid #fff;
}

2. 【class^=“”】 前面不写自己，只写父亲，比如下,对所有.local-nav li里面的类目以 local-nav-icon打头的元素执行xxx样式，其中只有定位进行单独修改
3. .local-nav li 都不能省略

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
/*    background-color: pink;*/
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{
	background-position: 0 -32px;
} 
.local-nav li .local-nav-icon-icon3{
	background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4{
	background-position: 0 -96px;
}

固定定位 position:fixed

1. 必须有宽度，固定定位与父亲无关，以屏幕为准-》限定 min max

.search-index{
	display: flex;
	position: fixed;/*不按照父级宽度*/
	top:0;
	left:50%;
/*	实现居中：距离左边一半屏幕宽度，同时以目前元素左上角为（0，0）坐标，水平向左移动本元素的50%*/
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	width:100%;
	max-width: 540px;
	min-width: 320px;
	height:44px;
	background-color: #F6F6F6;
	}

占屏幕一半的实现方法

1. 距离屏幕左边50%
2. 再transform 左移自己的50%
3. max-width和min-width 不要忘记

.search-index{
	display: flex;
	position: fixed;/*不按照父级宽度*/
	top:0;
	left:50%;
/*	实现居中：距离左边一半屏幕宽度，同时以目前元素左上角为（0，0）坐标，水平向左移动本元素的50%*/
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	width:100%;
	max-width: 540px;
	min-width: 320px;
	height:44px;
	background-color: #F6F6F6;
	}

通用属性 li a div

ul{
	list-style: none;
	margin:0;
	padding:0;
}
a{
	color:#222;
	text-decoration: none;
}
div{
	box-sizng:border-box;
}