利用flex布局完成携程网首页页面

于 2023-11-07 22:09:27 发布
阅读量121 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62741661/article/details/134277332
版权

一、效果图

二、HTML部分

		<!--头部-->
		<div class="top">
			<div class="serach">搜索:目的地/酒店/景点/航班号</div>
			<a href="#" class="my">我的</a>
		</div>
		<!--轮播图-->
		<div class="slideshow">
			<img src="img/focus.jpg" />
		</div>
		<!-- 导航栏 -->
		<div class="navigation">
			<a href="">
				<span class="navigation1">
				</span>
				<span>景点·玩乐</span>
			</a>
			<a href="">
				<span class="navigation2"></span>
				<span>景点·玩乐</span>
			</a>
			<a href="">
				<span class="navigation3"></span>
				<span>景点·玩乐</span>
			</a>
			<a href="">
				<span class="navigation4"></span>
				<span>景点·玩乐</span>
			</a>
			<a href="">
				<span class="navigation5"></span>
				<span>景点·玩乐</span>
			</a>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="content1">
				<div>
					<div>海外酒店</div>
					<div>
						<img src="img/hotel.png" alt="">
					</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
			</div>
			<div class="content2">
				<div>
					<div>海外酒店</div>
					<div>
						<img src="img/hotel.png" alt="">
					</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
			</div>
			<div class="content3">
				<div>
					<div>海外酒店</div>
					<div>
						<img src="img/hotel.png" alt="">
					</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
				<div>
					<div>海外酒店</div>
					<div>特价酒店</div>
				</div>
			</div>
		</div>
		<!-- 其他图标 -->
		<div class="else">
			<div>
				<a href=""><span></span><span>电话费</span></a>
				<a href=""><span></span><span>保险</span></a>
				<a href=""><span></span><span>外币兑换</span></a>
				<a href=""><span></span><span>购物</span></a>
				<a href=""><span></span><span>当地向导</span></a>
			</div>
			<div>
				<a href=""><span></span><span>自由行</span></a>
				<a href=""><span></span><span>境外玩乐</span></a>
				<a href=""><span></span><span>礼品卡</span></a>
				<a href=""><span></span><span>信用卡</span></a>
				<a href=""><span></span><span>更多</span></a>
			</div>
		</div>
		<!-- 广告 -->
		<div class="advertise">
			<div><img src="img/pic5.jpg" alt=""></div>
			<div><img src="img/pic6.jpg" alt=""></div>
		</div>
		<!-- 标志 -->
		<div class="sign">©2023携去哪儿旅行备01001号</div>
		<!-- 底部 -->
		<div class="bottom">
			<a href="">
				<span></span>
				<span>首页</span>
			</a>
			<a href="">
				<span></span>
				<span>社区</span>
			</a>
			<a href="">
				<span></span>
				<span>消息</span>
			</a>
			<a href="">
				<span></span>
				<span>我的</span>
			</a>
		</div>

三、CSS部分

			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			body {
				max-width: 800px;
				min-width: 300px;
				font-family: "微软雅黑";
				margin: 0 auto;
				background-color: lightgray;
			}

			.top {
				width: 100%;
				height: 50px;
				background-color: lightblue;
				position: fixed;
				top: 0;
				left: 0;
				display: flex;
			}

			.serach {
				flex: 1;
				color: gray;
				border: 1px solid gray;
				height: 30px;
				margin: 10px;
				border-radius: 15px;
				font-size: 10px;
				line-height: 30px;
				position: relative;
				padding-left: 25px;
			}

			.serach::before {
				content: "";
				width: 30px;
				height: 30px;
				background: url(img/sprite.png) no-repeat -58px -280px;
				position: absolute;
				background-size: 104px auto;
				top: 10px;
				left: 10px;
			}

			.my {
				width: 50px;
				height: 50px;
				line-height: 70px;
				text-align: center;
				font-size: 15px;
				color: white;
				position: relative;
				text-decoration: none;
			}

			.my::before {
				content: "";
				width: 25px;
				height: 22px;
				background: url(img/sprite.png) no-repeat -58px -193px;
				position: absolute;
				background-size: 104px auto;
				top: 2px;
				left: 12px;
			}

			.slideshow {
				width: 800px;
				margin: auto;

			}

			.slideshow img {
				margin-top: 50px;
				width: 100%;
			}

			.navigation {
				width: 800px;
				height: 80px;
				background-color: white;
				border-radius: 10px;
				display: flex;
			}

			.navigation a {
				width: 20%;
				text-decoration: none;
				font-size: 10px;
				color: black;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.navigation a span:nth-child(2) {
				margin: 0 auto;
			}
			.navigation a span:nth-child(1) {
				margin: 0 auto;
				display: inline-block;
				width: 32px;
				height: 32px;
				background-size: 32px auto;
			}
			.navigation1 {
				background: url(img/localnav_bg.png) no-repeat 0px 0px;
			}

			.navigation2 {
				background: url(img/localnav_bg.png) no-repeat 0px -32px;
			}

			.navigation3 {
				background: url(img/localnav_bg.png) no-repeat 0px -64px;
			}

			.navigation4 {
				background: url(img/localnav_bg.png) no-repeat 0px -96px;
			}

			.navigation5 {
				background: url(img/localnav_bg.png) no-repeat 0px -128px;
			}
			.content {
				background-color: white;
				color: white;
				border-radius: 10px;
			}
			.content1,
			.content2,
			.content3 {
				width: 800px;
				height: 90px;
				background-color: white;
				margin-top: 5px;
				overflow: hidden;
				display: flex;
			}
			.content1 {
				border-radius: 10px 10px 0px 0px;
			}
			.content3 {
				border-radius: 0px 0px 10px 10px;
			}
			.content>div>div {
				width: 33.3%;
				height: 90px;
			}
			.content>div div div {
				height: 50%;
				text-align: center;
				line-height: 45px;
			}

			.content>div>div:nth-child(2) div:nth-child(1),
			.content>div>div:nth-child(3) div:nth-child(1) {
				border-bottom: 1px solid;
			}

			.content>div>div:nth-child(1),
			.content>div>div:nth-child(2) {
				border-right: 1px solid;
			}

			.content img {
				height: 100%;
			}

			.content1 div div {
				background-color: #FA5A55;
			}

			.content2 div div {
				background-color: #FFC0CB;
			}

			.content3 div div {
				background-color: #34C2A9;
			}

			.else {
				margin-top: 5px;
				width: 800px;
				height: 120px;
				background-color: white;
				border-radius: 10px;
			}
			.else div {
				height: 60px;
				display: flex;

			}
			.else div a {
				text-decoration: none;
				color: black;
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 10px;
			}
			.else div a span{
				margin:0 auto;
			}
			.else div a span:nth-child(1){
				display: inline-block;
				width: 24px;
				height: 24px;
			}
			.else div:nth-child(1) a:nth-child(1) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px 0px;
				background-size: 24px auto;
			}
			.else div:nth-child(1) a:nth-child(2) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -24px;
				background-size: 24px auto;
			}
			.else div:nth-child(1) a:nth-child(3) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -52px;
				background-size: 24px auto;
			}
			.else div:nth-child(1) a:nth-child(4) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -84px;
				background-size: 24px auto;
			}
			.else div:nth-child(1) a:nth-child(5) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -112px;
				background-size: 24px auto;
			}
			.else div:nth-child(2) a:nth-child(1) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 5px -136px;
				background-size: 24px auto;
			}
			.else div:nth-child(2) a:nth-child(2) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -170px;
				background-size: 24px auto;
			}
			.else div:nth-child(2) a:nth-child(3) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -197px;
				background-size: 24px auto;
			}
			.else div:nth-child(2) a:nth-child(4) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 0px -222px;
				background-size: 24px auto;
			}
			.else div:nth-child(2) a:nth-child(5) span:nth-child(1){
				background: url(img/subnav-bg.png) no-repeat 3px -246px;
				background-size: 24px auto;
			}
			.advertise{
				width: 800px;
				display: flex;
				margin-top: 5px;
				overflow: hidden;
			}
			.advertise div{
				flex: 1;
			}
			.advertise div:nth-child(1){
				border-right: 1px solid lightgray;
			}
			.advertise div img{
				width: 100%;
			}
			.sign{
				width: 800px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				color: #555555;
				font-size: 10px;
				margin-bottom: 80px;
			}
			.bottom{
				width: 800px;
				height: 50px;
				background-color: lightblue;
				position: fixed;
				bottom: 0;
				left: auto;
				display: flex;
			}
			.bottom a{
				width: 25%;
				text-decoration: none;
				font-size: 13px;
				color: black;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.bottom a span{
				margin: 0 auto;
			}
			.bottom a span:nth-child(1){
				display: inline-block;
				width: 32px;
				height: 32px;
			}
			.bottom a:nth-child(1) span:nth-child(1){
				background: url(img/tabbar.png) no-repeat 0px 0px;
				background-size: 32px auto;
			}
			.bottom a:nth-child(2) span:nth-child(1){
				background: url(img/tabbar.png) no-repeat 0px -30px;
				background-size: 32px auto;
			}
			.bottom a:nth-child(3) span:nth-child(1){
				background: url(img/tabbar.png) no-repeat 0px -60px;
				background-size: 32px auto;
			}
			.bottom a:nth-child(4) span:nth-child(1){
				background: url(img/tabbar.png) no-repeat 0px -90px;
				background-size: 32px auto;
			}

提示：

相关图片请自行修改

一叶知秋856
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动WEB开发之flex布局--携程网首页案例制作
薛定谔的猫
11-30 807
做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size。起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top。方案：我们采取单独制作移动页面方案。要设置为主轴为y轴,侧轴居中。背景渐变必须添加浏览器私有前缀。技术：布局采取flex布局。利用属性选择器更换背景图片。sales-bd模块制作。第一个a要取消下边框。
携程网首页 +轮播图 原生js实现
05-22
携程首页
移动开发—详解flex布局之携程网首页案例制作
道阻且长，行则将至。
05-18 1066
移动开发—详解flex布局之携程网首页案例制作 学习内容 一、flex的布局原理 二、flex布局父项常见的属性 三、flex布局子项常见的属性 四、携程网首页案例制作 一、flex的布局原理 总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序 二、flex布局父项常见的属性 （一）、flex-direction设置主轴的方向 主轴与侧轴 在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴 默认主轴方向就是x轴方向，水平向右 默认侧轴方向就是y轴
H5 携程app官网首页用flex布局+css3详细教程
老段的CSDN的博客
08-15 2090
H5 携程app官网首页用flex布局+css3详细教程。
flex布局案例：携程首页
weixin_65635437的博客
06-07 300
flex布局案例：携程首页
HTML简单实现轮播图
热门推荐
qq_45225221的博客
01-09 9万+
html + js 简单实现轮播图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/82ed6054639544ae93ff737ecca71d49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGltYWtyaW3kuLY=,size_20,color_FFFFFF,t_70,g_se,x_16 附上代码： <!DOCTYPE html> <ht
携程网首页主要利用flex布局实现
05-02
本教程将深入探讨携程网首页如何利用Flex布局实现，以及Flex布局的基本概念和使用技巧。 Flex布局是CSS3中的一项新特性，旨在解决复杂的单行和多行布局问题，尤其是在不同屏幕尺寸和设备上保持良好的响应式表现。其...
flex布局-携程网-移动端
02-23
本项目“flex布局-携程网-移动端”旨在通过运用Flex布局，来构建携程网的主页面、我的页面以及登录页面，确保在不同设备上都能呈现出良好的用户体验。 Flex布局，全称为Flexible Box布局，它允许容器中的子元素在行...
携程网移动端flex布局案例
05-16
在本文中，我们将深入探讨如何运用Flex布局技术来构建携程网移动端的首页，结合CSS3样式、精灵图和渐变色等前端技术，实现头尾固定、中间自适应的页面设计。Flex布局（Flexible Box）是现代Web开发中的一个重要概念...
移动端的携程网静态首页制作，采用flex布局
10-20
在移动端的网页设计中，携程网的静态首页制作是一个典型的示例，它涉及到现代Web开发中的许多关键技术和最佳实践。本项目主要采用Flex布局来实现响应式设计，以确保页面在不同尺寸的移动设备上都能呈现出良好的用户...
html携程网首页，移动端css
07-03
一个简单的移动端携程网首页，交互性不大。
携程网评模板
05-05
携程网评模板
html5旅游酒店网站模板
11-23
html5旅游酒店网站模板是一款酒店饭店宾馆介绍网站模板下载。
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
【学习笔记56】轮播图的分析
yizhiyang
11-29 318
轮播图的分析
html5 06携程网案例、 全屏插件的使用
hu_wenya的博客
05-27 497
携程网案例 结构划分 头部 header a img 主体 main section div.left div.right a 最后一个section用类名单独区分 俩个a，包裹img 底部 footer nav 里面包裹三个a p 包裹三个a p 包裹文字 全屏插件的使用 引入jquery、引入jquery.fullPage.js 复制结构 ...
轮播图（含全部代码：html、css、javascript）
Cap07博客
07-31 6141
代码】轮播图（含全部代码html、css、javascript）
css学习：轮播图
m0_56424512的博客
11-29 1918
css学习
移动WEB开发之flex布局-携程网案例
qq_46199553的博客
09-09 562
1.1 传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 传统布局  兼容性好  布局繁琐  局限性，不能再移动端很好的布局 flex 弹性布局  操作方便，布局极为简单，移动端应用很广泛  PC 端浏览器支持情况较差  IE 11或更低版本，不支持或仅部分支持 2.1 布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器
flex布局 携程网首页
最新发布
10-26
携程网站的首页使用了flex布局来实现页面的排版和布局。通过设置父元素的display属性为flex，可以将子元素排列在一行或一列上，并通过设置align-items和justify-content属性来控制子元素的对齐方式。在携程网站的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值