flex练习-------携程

最新推荐文章于 2024-09-17 00:54:14 发布
最新推荐文章于 2024-09-17 00:54:14 发布
阅读量87 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45746811/article/details/127953782
版权

效果图

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手，说走就走</title>
</head>

<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>
    
	<!-- 局部导航栏local-nav -->
	<ul class="local-nav">
		<li>
			<a href="#" title="景点.玩乐">
				<span class="local-nav-icon-icon1"></span>
				<span>景点.玩乐</span>
			</a>
		</li>
		<li>
			<a href="#" title="周边游">
				<span class="local-nav-icon-icon2"></span>
				<span>周边游</span>
			</a>
		</li>
		<li>
			<a href="#" title="美食杯">
				<span class="local-nav-icon-icon3"></span>
				<span>美食杯</span>
			</a>
		</li>
		<li>
			<a href="#" title="一日游">
				<span class="local-nav-icon-icon4"></span>
				<span>一日游</span>
			</a>
		</li>
		<li>
			<a href="#" title="当地攻略">
				<span class="local-nav-icon-icon5"></span>
				<span>当地攻略</span>
			</a>
		</li>
	</ul>
	
	<!-- 主导航栏 -->
	<nav>
		<div class="nav-common">
			<div class="nav-items">
				<a href="#">酒店</a>
			</div>
			<div class="nav-items">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="nav-items">
				<a href="#">团购</a>
				<a href="#">民宿客栈</a>
			</div>
		</div>
		<div class="nav-common">
			<div class="nav-items">
				<a href="#">机票</a>
			</div>
			<div class="nav-items">
				<a href="#">火车票</a>
				<a href="#">特价机票</a>
			</div>
			<div class="nav-items">
				<a href="#">汽车票.船票</a>
				<a href="#">专车.租车</a>
			</div>
		</div>
		<div class="nav-common">
			<div class="nav-items">
				<a href="#">旅游</a>
			</div>
			<div class="nav-items">
				<a href="#">门票</a>
				<a href="#">目的地攻略</a>
			</div>
			<div class="nav-items">
				<a href="#">邮轮旅行</a>
				<a href="#">定制旅行</a>
			</div>
		</div>
	</nav>
	<!-- 侧导航栏 -->
	<ul class="subnav-entry">
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="subnav-entry-icon"></span>
				<span>电话费</span>
			</a>
		</li>
		
	</ul>
	
	<!-- 销售区域 -->
	<div class="sales-box">
		<div class="sales-hd">
		    <h2>热门活动</h2>
		    <a href="#" class="more">获取更多福利</a>
		</div>
		<div class="sales-bd">
			<div class="row">
				<a href="#">
					<img src="upload/pic1.jpg" alt=""/>
				</a>
				<a href="#">
					<img src="upload/pic2.jpg" />
				</a>
			</div>
			<div class="row">
				<a href="#">
					<img src="upload/pic3.jpg" alt=""/>
				</a>
				<a href="#">
					<img src="upload/pic4.jpg" />
				</a>
			</div>
			<div class="row">
				<a href="#">
					<img src="upload/pic5.jpg" alt=""/>
				</a>
				<a href="#">
					<img src="upload/pic6.jpg" />
				</a>
			</div>
		</div>
	</div>
	
	
</body>

</html>

index.css

body{
max-width: 540px;
min-width:320px;
margin:0 auto;
font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"MicrosoftYahei",STXihei,hei;
color:#000;
background:#f2f2f2;
overflow-x:hidden;
-webkit-tap-highlight-color:transparent;
height: 2000px;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a{
	color: #222;
	text-decoration: none;
}

div{
	box-sizing: border-box;
}

/* 搜索模块 */
.search-index{
	display: flex;
	position: fixed;
	/* 固定定位和父级没有关系,它以屏幕为准 */
	top: 0;
	left: 50%;
	/* 固定的盒子应该有宽度 */
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	width: 100%;
	min-width: 320px;
	max-width: 540px;
	height: 44px;
	background-color: #F6F6F6;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc
}

.search{
	position: relative;
	height: 26px;
	line-height: 24px;
	border: 1px solid #ccc;
	flex: 1;
	margin: 6px 10px;
	border-radius: 5px;
	padding-left: 25px;
	color: #666;
	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/sprite.png) -59px -279px;
	background-size: 104px auto;
}
.user{
	width: 44px;
	height: 44px;
	/* background-color: beige; */
	font-size: 12px;
	text-align: center;
	color: #2eaae0;
}
.user::before{
	content: "";
	display: block;
	width: 23px;
	height: 23px;
	background: url(../images/sprite.png) no-repeat -59px -194px;
	background-size: 104px auto;
	margin: 5px auto -2px;
}

/* focus */
.focus{
	 padding-top: 44px;
}
.focus img{
	width: 100%;
}

/* 局部导航栏 */
.local-nav{
	display: flex;
	height: 64px;
	background-color: #fff;
	margin: 3px 4px;
	border-radius: 8px;
}
.local-nav li{
	flex: 1;
}
.local-nav a{
	display: flex;
	/* 以y轴为主轴 */
	flex-direction: column;
	/* 侧轴居中对齐 因为是单行 */
	align-items: center;
	font-size: 12px;
}
.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;
}
/* 图片的位置,x轴为0,y轴为复数,图标大小为32*32 */
.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;
}
.local-nav li .local-nav-icon-icon5{
	background-position: 0 -128px;
}

/* nav */
nav{
	overflow: hidden;
	border-radius: 8px;
	margin: 0 4px 3px;
}
.nav-common{
	display: flex;
	height: 88px;
	background-color: pink;
}
.nav-common:nth-child(2){
	margin: 3px 0;
}
.nav-items{
	/* 相对于父元素平分 ,不冲突*/
	flex:1;
	display: flex;
	flex-direction: column;
}
.nav-items a{
	text-align: center;
	flex:1;
	line-height: 44px;
	color: #fff;
	font-size: 14px;
	/* 文字阴影 */
	text-shadow: 1px 1px rgba(0,0,0,.2);
}
.nav-items a:nth-child(1){
	border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a{
	border: 0 ;
	/* 图片缩放三分之一并且居中bottom center */
	background: url(../images/hotel.png) no-repeat bottom center;
	background-size: 121px auto;
}
/* -n+2就是选择前两个元素 */
.nav-items:nth-child(-n+2){
	border-right: 1px solid #fff;
}
.nav-common:nth-child(1){
	background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2){
	background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3){
	background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}

/* 侧导航栏 */
.subnav-entry{
	display: flex;
	border-radius: 8px;
	background-color: #fff;
	margin: 0 4px;
	flex-wrap: wrap;
	padding: 5px 0;
	box-shadow: 1px 1px rgba(0,0,0,.2);;
}
.subnav-entry li{
	/* flex:1; */
	/* 里面的子盒子相对于父级而言可以用百分比 */
	width: 20%;
	
}
.subnav-entry a{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.subnav-entry-icon{
	width: 28px;
	height: 28px;
	background-color: #00FFFF;
	margin-top: 4px;
	background:url(../images/subnav-bg.png) no-repeat;
	background-size: 28px auto;
}
/* 销售区域 */
.sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}

.sales-hd {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}

.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    position: absolute;
    top: 5px;
    left: 8px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

.more {
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}
/* 画右边的小三角,画直角旋转 */
.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.row{
	display: flex;

}
.row a{
	flex:1;
	border-bottom: 1px solid #ccc;
}
.row a:nth-child(1){
	border-right: 1px solid #ccc;
}
.row a img{
	width: 100%;
}

 项目源于黑马程序员

通过百度网盘分享的文件：05_移动WEB…
链接:https://pan.baidu.com/s/1aDip5KL641Zb99VGXFhTrg 
提取码:jjjj
复制这段内容打开「百度网盘APP 即可获取」

 

Rrenr
关注
【CSS】flex实战 - 移动版携程网首页制作 - CSS3 - flex布局
YK菌的博客
08-07 716
flex实战
-CSS-笔记-
April_Aimer的博客
02-07 2177
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
移动开发——学习Flex布局及案例携程网，不用浮动的感觉真香
weixin_45511236的博客
10-24 185
flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
flex布局的应用 —— 模仿携程移动端的首页
爱前端的程序媛的博客
03-26 2667
写在前面 昨天已经过去，未来还未到来，所以当下是上天给的最好的恩赐，好好把握。 昨天又很仔细的看了看flex布局，今天下午动手用flex布局做了一个练习，就是模仿携程移动端首页。有一段时间没写html和css了，今天就是使用纯html和css搭建的一个首页，没有用到js。不过页面中确实有一个点可以用js做比较轻松，就是可以使用循环来生成精灵图，因为今天想写样式了，就没有用js写，下次再用js写...
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5397
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
5.flex布局练习-携程首页
虽然但是
12-28 207
flex布局练习-携程首页
Flex布局 - 仿携程网移动端首页案列练习
JHY97的博客
01-10 1785
一、搭建相关文件结构 1.1 文件结构 创建相关存储文件夹以及搭建index.html文件结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.
伸缩布局案例-携程
irouduoduo的博客
05-01 845
放大： 伸缩布局的相关知识点： flex：none | flex-grow '> flex-shrink >'? || flex-basis '> none： none关键字的计算值为: 0 0 auto flex-grow '>： 用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在
React-Native学习指南
面向不对象的博客
05-31 917
React-Native学习指南 本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎提供给我们 目录 教程 React Native React.js ES6 系列教程 开源APP 图书 组件 工具 资源网站 业界讨论 教程 React Native 构建 Facebook F8 2016 App / React Nativ...
使用Flex布局实现携程APP首页布局
Lucivita的博客
01-19 1954
一、整体分析 这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分 二、具体样式实现 1、全局样式设置 导入normalize.css并设置一下body 2、搜索栏 <div class="short-search"> <div class="search"> <p>搜索:目的地/酒店/景点/航班号</p> </div> &.
CSS练习题——5.携程首页demo
qq1722377628的博客
10-24 649
目录 1.需求 2.代码 1.需求 2.代码（注释清晰） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>携程首页demo</title> <style> * { ...
前端技术—9.flex布局
不放手，不错过的博客
08-02 325
flex布局基本属性及概念
【CSS|第1期】网页设计的演变：从表格布局到Grid布局
Commas的博客
09-15 873
互联网的兴起带来了网页设计的革命，经历了数十年的发展和演变。从最初的简单文本和图像展示，到如今的复杂交互和响应式设计，网页设计的技术和方法不断进步。今天，让我们一起回顾网页设计的发展历程，探索从表格布局到CSS、Flex布局，再到Grid布局的演变。
表格标记＜table＞
qq_74861982的博客
09-13 487
table标记是表格中最外层标记，tr表示表格中的行标记，一对表示表格中的一行，在中可以嵌套几对标记或几对标记。valign：设置单元格垂直对齐方式，可取top bottom middle baseline。align：设置表格或者单元格中，文字水平对齐方式。border:设置边框的值，默认为0，表示不可见。height：设置表格或者单元格的高度。width：设置表格或者单元格的宽度。4.td:表格中数据单元格标记。1table：表格标记。这里直接贴上代码了哦。
【CSS Tricks】如何做一个粒子效果的logo
qbbmnnnnnn的博客
09-14 345
分享一些有趣的前端效果，本文为可交互的粒子效果的logo展现
vue 实现tab菜单切换
最新发布
weixin_57334661的博客
09-17 465
实现切换tab菜单，激活状态，按钮高亮，显示对应的菜单内容。
css scrollbar-width: none 隐藏默认滚动条
qq_27806371的博客
09-14 324
scrollbar-width: none; 隐藏默认滚动条
CSS中如何实现鼠标悬停效果？
z16638522031的博客
09-14 588
在这个例子中，我们创建了一个名为.hover-effect的类，并在其中设置了默认的文本颜色（color: black;）和背景颜色（background-color: white;接着，我们使用:hover伪类为悬停时的文本颜色和背景颜色分别设置为白色和蓝色。当您将鼠标悬停在<div>元素上时，将看到这些颜色的变化。在选择器所匹配的元素上时应用指定的样式。在CSS中，您可以使用。来实现鼠标悬停效果。
flex flex-col
02-01
flex和flex-col是CSS中用于布局的属性。 flex属性用于设置弹性盒子的伸缩性，它决定了弹性盒子内项目的伸缩比例。flex属性有三个值：flex-grow、flex-shrink和flex-basis。其中，flex-grow决定了项目在剩余空间中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值