flex综合 应用，制作携程旅游，主页面效果。

最新推荐文章于 2022-12-29 18:33:59 发布
最新推荐文章于 2022-12-29 18:33:59 发布
阅读量562 收藏 5
点赞数
分类专栏： h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqiitan/article/details/88535604
版权

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>携程网Demo</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			/* 顶部快的样式 */
			header {
				width: 100%;
				/* 设置伸缩盒子 */
				display: flex;
			}
			header>a {
				flex: 1;
			}
			header>a>img {
				/* 图片宽度，占据100% */
				width: 100%;
			}

			/* 主题内容块样式 */
			main {
				width: 100%;
				padding: 0 10px;
				/* 设置盒模型 */
				box-sizing: border-box;
			}
			/* 设置总高度，100px */
			main>.item {
				width: 100%;
				height: 100px;
				background-color: #7DFFE7;
				border-radius: 10px;
				margin-top: 10px;
				/* 设置为伸缩盒子 */
				display: flex;
			}

			/* 第二个元素，设置单独背景 */
			main>.item:nth-of-type(2) {
				background-color: pink;
			}
			main>.item:nth-of-type(3) {
				background-color: purple;
			}
			main>.item:nth-of-type(4) {
				background-color: #33ff66;
			}

			main>.item>.left {
				flex: 1;
			}
			main>.item>.right {
				flex: 2;
				/* 设置换行显示 */
				flex-wrap: wrap;
				/* 设置为伸缩盒子 */
				display: flex;
			}
			main>.item>.right>a {
				/* 如果想让子元素换行显示，必须为子元素设置宽度 */
				width: 50%;
				display: block;
				text-align: center;
				line-height: 50px;
				color: #fff;
				/* 去掉a标签的下划线 */
				text-decoration: none;
				border-left: 1px solid #fff;
				border-bottom: 1px solid #fff;
				box-sizing: border-box;
			}

			/* 拿到最后2个a元素(-n+2) */
			main>.item>.right>a:nth-last-of-type(-n+2) {
				/* 去掉最后2个的底部边框 */
				border-bottom: none;
			}
			main>.extra {
				width: 100%;
				display: flex;
			}
			main>.extra>a {
				flex: 1;
			}
			/* 图片分别占据50% */
			main>.extra>a>img {
				width: 100%;
			}

			/* 添加底部块的样式 */
			footer {
				width: 100%;
				font-size: 13px;
			}
			footer>nav {
				width: 100%;
				display: flex;
				border-top: 1px solid #CCCCCC;
				border-bottom: 1px solid #CCCCCC;
			}
			footer>nav>a {
				flex: 1;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				color: #888;
			}
			footer>.link {
				text-align: center;
				line-height: 25px;
			}
			footer>.copyRight {
				text-align: center;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<a href="">
					<img src="../images/banner.jpg" alt="">
				</a>
			</header>
			<main>
				<section class="item">
					<div class="left">

					</div>
					<div class="right">
						<a href="">海外酒店</a>
						<a href="">团购</a>
						<a href="">特惠</a>
						<a href="">客栈公寓</a>
					</div>
				</section>
				<section class="item">
					<div class="left">
					</div>
					<div class="right">
						<a href="">海外酒店</a>
						<a href="">团购</a>
						<a href="">特惠</a>
						<a href="">客栈公寓</a>
					</div>
				</section>
				<section class="item">
					<div class="left">
					</div>
					<div class="right">
						<a href="">海外酒店</a>
						<a href="">团购</a>
						<a href="">特惠</a>
						<a href="">客栈公寓</a>
					</div>
				</section>
				<section class="item">
					<div class="left">
					</div>
					<div class="right">
						<a href="">海外酒店</a>
						<a href="">团购</a>
						<a href="">特惠</a>
						<a href="">客栈公寓</a>
					</div>
				</section>
				<section class="extra">
					<a href="">
						<img src="../images/sub_banner01.png" alt="">
					</a>
					<a href="">
						<img src="../images/sub_banner02.png" alt="">
					</a>
				</section>
			</main>
			<footer>
				<nav>
					<a href="">电话预定</a>
					<a href="">下载客户端</a>
					<a href="">我的订单</a>
				</nav>
				<p class="link">
					<a href="">网站地图</a>
					<a href="">English</a>
					<a href="">电脑版</a>
				</p>
				<p class="copyRight">&copy;2015 携程旅行</p>
			</footer>
		</div>
	</body>
</html>

 

 

xqiitan
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局：携程网移动端首页案例
weixin_55701027的博客
12-21 953
html + css 前端flex布局基础案例
移动端携程网首页flex布局完整制做(详细代码版)含footer部分
周百万的博客
09-06 2135
主要思路： 1、让盒子的高度固定，只让他们的宽度随着屏幕的大小而变化！ 2、search-index 父盒子固定定位，固定定位的盒子必须有宽度，所以让他的宽度为100% 3、固定定位的盒子，是以屏幕为准的，所以body中的margin：0 auto;对他不管用 4、因此他使用left:50%;(让他的最左边移动到屏幕的一半位置)，再使用transform：translateX(-50%) (这里的50%是以当前移动的盒子为准的)，就是让这个盒子再往左移动盒子本身一半的长度
flex布局-携程网项目
最新发布
不定时分享最优质的网络技术与教程，满满的干货。
12-29 1313
flex布局中是默认不换行的（如果超过父盒子子元素会被压缩），项目都排在一条线（又称“轴线”） 上可使用flex-wrap进行调整。注意: 主轴和侧轴是会变化， flex-direction 设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的。设置子项在侧轴的排列方式，且只能用于子元素出现换行的情况下使用（多行），在单行下没有效果。该元素是控制子项在侧轴（默认Y轴）上的排列方式，在子元素为单项（单行）的时候使用。定义项目（子元素）在主轴上的对齐方式，在使用之前一定要。传统布局与flex弹性布局。
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的参考价值！采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
携程网首页主要利用flex布局实现
05-02
利用flex布局完成了对携程网首页的制作，主要是flex为主，其他为辅的一个源代码分享给大家，希望可以对大家有帮助
移动端的携程网静态首页制作，采用flex布局
10-20
综上所述，移动端的携程网静态首页制作是一个综合性的Web开发项目，涉及到前端布局、响应式设计、图像优化等多个领域。通过熟练掌握这些知识点，开发者可以创建出既美观又高效的移动网页，满足用户在不同设备上的...
Flex 透明效果，位于页面最底层
10-29
在Flex开发中，透明效果是一种常见的视觉设计手法，它能够使应用程序与网页背景更好地融合，提升用户体验。要实现Flex中的透明效果，主要涉及到以下几个关键点： 1. **backgroundAlpha属性**： Flex允许开发者通过...
携程网移动端项目制作.md
08-18
主要是使用flex制作的，对flex属性的一系列应用
flex布局-携程网-移动端
02-23
在携程网的主页面设计中，Flex布局可以用来优化导航栏、搜索框、推荐旅游产品等模块的排列。例如，导航栏的各个链接可以通过设置`justify-content`属性在一行内均匀分布，当屏幕宽度减小时，这些链接可以自动换行，...
前端学习--用flex布局来写--携程首页
05-11
9. **实际应用**：在重构携程首页时，可以将各个模块（如顶部导航、搜索框、推荐目的地等）设为Flex子元素，通过调整它们的Flex属性，达到预期的布局效果。 总之，使用Flex布局重构携程首页，能够有效地解决页面...
flex项目源码（本人亲自测试可用）
06-29
flex项目源码（本人亲自测试可用） 在网上下载的源码，有点小错误，我修改好了，现在可以直接使用 很好的项目例子，在flash builder中直接加载即可打开。
使用Flex布局实现携程APP首页布局
01-19
使用Flex布局实现携程APP首页布局
Flex布局实战(1) 携程旅游
banxiecang9548的博客
09-08 370
项目地址：https://github.com/C4az6/xiechen 在线演示地址：https://c4az6.github.io/xiechen/ 转载于:https://www.cnblogs.com/sauronblog/p/11487309.html
用flex布局实现携程网首页的制作
qq_44699174的博客
05-08 1226
flex为主其他为辅废话不多说上代码： 其中的图片都是去官网直接下载的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
CSS3Flex伸缩布局，携程网案例
前端小王子
09-12 422
<!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...
flex布局携程网案列
weixin_42378409的博客
04-03 431
<!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-...
携程网案例>>flex伸缩布局
qq_43537987的博客
04-19 488
效果展示： 目的：可以达到屏幕自适应的效果。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ pa...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值