master

分支 (1)

管理

管理

master

xiecheng
/
index-amend.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>携程首页</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/index-amend.css"/>
	</head>
	<body>
		<div class="view">
			<!--所有的结构代码都写在这个view盒子里面-->
			<!--酒店，机票，旅游模块-->
			<div class="xc_service">
				<div class="xc_common">
					<div class="hotel_img hotel_bg">
						<a href="#">
							<span>酒店</span>
							<span class="hotel_bg"></span>
						</a>
					</div>
					<div class="hotel_nav hotel_bg">
						<a href="#">海外酒店</a>
						<a href="#">团购</a>
						<a href="#">特价酒店</a>
						<a href="#">名宿•客栈</a>
					</div>
				</div>
				<div class="xc_common ">
					<div class="hotel_img fare_bg">
						<a href="#">
							<span>机票</span>
							<span class="hotel_bg"></span>
						</a>
					</div>
					<div class="hotel_nav fare_bg">
						<a href="#">火车票</a>
						<a href="#">汽车票•船票</a>
						<a href="#">特价机票</a>
						<a href="#">专车•租车</a>
					</div>
				</div>
				<div class="xc_common ">
					<div class="hotel_img travel_bg">
						<a href="#">
							<span>旅游</span>
							<span class="hotel_bg"></span>
						</a>
					</div>
					<div class="hotel_nav travel_bg">
						<a href="#">门票</a>
						<a href="#">邮轮旅行</a>
						<a href="#">目的地攻略</a>
						<a href="#">定制旅游</a>
					</div>
				</div>
			</div>
			<!--携程导航部分-->
			<div class="xc_nav">
					<a href="#"><span></span><span>WiFi电话卡</span></a>
					<a href="#"><span class="insure_bg"></span><span>保险·签证</span></a>
					<a href="#"><span class="money_bg"></span><span>外币兑换</span></a>
					<a href="#"><span class="shop_bg"></span><span>购物</span></a>
					<a href="#"><span class="guide_bg"></span><span>当地向导</span></a>
					<a href="#"><span class="free_bg"></span><span>自由行</span></a>
					<a href="#"><span class="overseas_bg"></span><span>境外玩乐</span></a>
					<a href="#"><span class="gift_bg"></span><span>礼品卡</span></a>
					<a href="#"><span class="card_bg"></span><span>信用卡</span></a>
					<a href="#"><span class="more_bg"></span><span>更多</span></a>

			</div>
			<!--特卖汇部分-->
			<div class="sell">
				<div class="sell_title">
					<em>特卖汇</em>
					<a href="#">领红包再下单 &gt; </a>
				</div>
				<div class="sell_content">
					<div class="content_left">
						<a href="#"><img src="img/hot_sell_1.png"/></a>
						<a href="#">呼和浩特+希拉穆仁草原+响沙湾4日跟团游·携程自营·【春季预售·特卖双飞】2晚五星锦江+主题蒙古包东航直飞 特色美食 踏草迎春</a>
						<div class="price">
							<span>¥999起</span>
							<span>省 ¥ 800</span>
						</div>
					</div>
					<div class="content_right">
						<a href="#">
							<span>千款特价</span>
							<p>走过路过不错过</p>
							<img src="img/pic-tmh-02.png"/>
						</a>
						<a href="#">
							<span>境外精选</span>
							<p>百元出境游</p>
							<img src="img/pic-tmh-04.png"/>
						</a>
						<a href="#">
							<span>周边玩</span>
							<p>十元度周末</p>
							<img src="img/pic-tmh-03.png"/>
						</a>
					</div>
				</div>
			</div>
			<!--热门活动-->
			<div class="hot_active">
				<div class="active_title">
					<em>热门活动</em>
					<a href="#">获取更多福利&gt;</a>
				</div>
				<div class="active_content">
					<a href="#"><img src="img/hot_activity (4).jpg"/></a>
					<a href="#"><img src="img/hot_activity (3).jpg"/></a>
					<a href="#"><img src="img/hot_activity (1).jpg"/></a>
					<a href="#"><img src="img/hot_activity (2).jpg"/></a>
					<a href="#"><img src="img/hot_activity (5).jpg"/></a>
					<a href="#"><img src="img/hot_activity (6).jpg"/></a>
				</div>
			</div>
			<!--页脚部分-->
			<div class="footer">
				<div class="way">
					<a href="#">
						<span>☎</span>
						<span>预定电话</span>
					</a>
					<a href="#">
						<span>☎</span>
						<span>预定电话</span>
					</a>
					<a href="#">
						<span>☎</span>
						<span>预定电话</span>
					</a>
				</div>
				<p><a href="#">网站地图 </a> | <a href="#">语音</a> | <a href="#">电脑版</a></p>
				<p>&copy;2018携程旅行｜沪ICP备08023580号</p>
			</div>
		</div>
	</body>
</html>

<!--flex-direction  设置主轴的方向
	flex-direction:row; row就是默认值 从左到右
	flex-direction:row-reverse; 从右到左
	flex-direction:column; 从上到下
	flex-direciton:column-reverse;从下到上

justify-content  设置主轴上的子元素排列方式
	justify-content:flex-start;	默认值 从开头开始排序
	justify-content:flex-end; 从尾部开始排序
	justify-content:center; 挤在一起居中
	justify-content:space-around; 平分剩余空间
	justify-content:space-between; 先两边再评分剩余空间

flex-wrap 设置子元素是否换行

align-content 设置侧轴上的子元素的排列方式（多行）
	align-content:flex-start; 在侧轴的头部开始排列
	align-content:flex-end; 在侧轴的尾部开始排列
	align-content:center; 在侧轴中间显示
	align-content:space-around; 子项在侧轴平分剩余空间
	align-content:space-between; 子项在侧轴 先分布在两头，再评分剩余空间
	align-content:stretch; 设置子项元素高度评分父元素高度
align-items  设置侧轴上的子元素排列方式（单行行）
	align-item:flex-start;
	align-item:flex-eng;
	align-item:center;
	align-item:stretchl


flex-flow 复合属性 相同于同时设置了flex-direction和flex-wrao
flex-flow:<'flex-direction'> || <'flex-wrap'>

align-self 控制子项自己在侧轴上的排列方式
order 默认值都是0 谁的order值越小，谁就越靠前
flex 设置子项宽度占父元素宽度的比例-->