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

最新推荐文章于 2024-11-11 00:01:33 发布
最新推荐文章于 2024-11-11 00:01:33 发布
阅读量101 收藏 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 745
flex实战
-CSS-笔记-
April_Aimer的博客
02-07 2246
目标: 学会使用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 197
flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
flex布局的应用 —— 模仿携程移动端的首页
爱前端的程序媛的博客
03-26 2693
写在前面 昨天已经过去，未来还未到来，所以当下是上天给的最好的恩赐，好好把握。 昨天又很仔细的看了看flex布局，今天下午动手用flex布局做了一个练习，就是模仿携程移动端首页。有一段时间没写html和css了，今天就是使用纯html和css搭建的一个首页，没有用到js。不过页面中确实有一个点可以用js做比较轻松，就是可以使用循环来生成精灵图，因为今天想写样式了，就没有用js写，下次再用js写...
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5538
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
5.flex布局练习-携程首页
虽然但是
12-28 217
flex布局练习-携程首页
Flex布局 - 仿携程网移动端首页案列练习
JHY97的博客
01-10 1809
一、搭建相关文件结构 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 857
放大： 伸缩布局的相关知识点： flex：none | flex-grow '> flex-shrink >'? || flex-basis '> none： none关键字的计算值为: 0 0 auto flex-grow '>： 用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在
React-Native学习指南
面向不对象的博客
05-31 934
React-Native学习指南 本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎提供给我们 目录 教程 React Native React.js ES6 系列教程 开源APP 图书 组件 工具 资源网站 业界讨论 教程 React Native 构建 Facebook F8 2016 App / React Nativ...
使用Flex布局实现携程APP首页布局
Lucivita的博客
01-19 2011
一、整体分析 这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分 二、具体样式实现 1、全局样式设置 导入normalize.css并设置一下body 2、搜索栏 <div class="short-search"> <div class="search"> <p>搜索:目的地/酒店/景点/航班号</p> </div> &.
html 练习素材
01-02
"flex携程"可能是指使用CSS3的Flexbox布局模型，这是一种用于处理容器内元素排列和对齐的强大工具，尤其适合单行或多行布局，如导航栏、页脚、卡片式布局等。"品优购"这样的电商网站很可能运用了Flexbox来创建灵活的...
CSS练习题——5.携程首页demo
qq1722377628的博客
10-24 658
目录 1.需求 2.代码 1.需求 2.代码（注释清晰） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>携程首页demo</title> <style> * { ...
CSS中常见文本居中技巧详解
最新发布
2301_76541209的博客
11-11 175
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
CSS弹性布局：灵活布局的终极指南
weixin_44520557的博客
11-06 1490
在网页设计中，CSS 弹性布局（Flexbox）是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素，尤其是在响应式设计中表现出色。今天，我们就来深入探讨一下 Flexbox 的各个属性，让你彻底掌握这个强大的布局工具。
HTML的文本样式（二）
2302_79986066的博客
11-06 936
巅峰礼赠</p><p id="p01">我喜欢HTML
前端八股文(二)CSS 持续更新中。。。
DogEgg_001的博客
11-06 919
新增属性选择器、伪类选择器新增text-shadow、box-shadow、border-radius新增transform、transition、动画@keyframes、animation新增flex、grid布局，媒体查询@media新增box-sizing：border-box怪异盒模型 content-box标准盒模型。
CSS的综合应用例子（网页制作）
d7210的博客
11-10 472
就会不断执行循环体中的代码。// 当expression的值不等于任何case的值时执行的代码块。// 当expression的值等于value1时执行的代码块。// 当expression的值等于value2时执行的代码块。当匹配成功时，就执行对应的代码块，直到遇到。// 当condition1为真时执行的代码块。// 当condition2为真时执行的代码块。// 当以上条件都不满足时执行的代码块。的值，否则可能会导致无限循环。// 当条件为真时执行的代码块。// 当条件为假时执行的代码块。
CSS教程（二）- CSS选择器
Oblning的博客
11-10 658
css选择器，标签选择器，ID选择器，类选择器，通用选择器，群组选择器，子代选择器，后代选择器，伪类选择器，focus，hover，activate
CSS 色彩魔法：打造绚丽网页风格
jht_520的博客
11-10 127
透明度的取值范围是0-1，0表示完全透明，1表示完全不透明。例如，rgba(255,0,0,0.5)表示半透明的红色。例如，hsla(0,100%,50%,0.5)表示半透明的红色。色调的取值范围是0-360，饱和度和亮度的取值范围是0-100。例如，rgb(255,0,0)表示红色，rgb(0,0,0)表示黑色。例如，选择三个等距离的颜色进行搭配，如红色、绿色和蓝色。色彩和谐原则：选择色彩在色轮上呈现和谐关系的颜色进行搭配，如使用三个相邻颜色或构成三角形的颜色。例如，红色和绿色、蓝色和橙色等。
Springboot与Mybatis-Flex集成及示例教程
资源摘要信息:"mybatis-flex是一个开源的ORM框架，主要用于简化和加速Mybatis的使用。它在传统Mybatis的基础上进行了封装和扩展，提供了更为便捷的数据库操作方式。mybatis-flex与SpringBoot的集成可以使得开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值