伸缩布局flex、背景缩放实例、字体阴影—携程网手机app

最新推荐文章于 2023-12-07 17:11:36 发布
最新推荐文章于 2023-12-07 17:11:36 发布
阅读量711 收藏 1
点赞数
分类专栏： CSS 前端开发也蛮有意思的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036616/article/details/83549514
版权

要点：

1.将需要伸缩布局的父级元素添加display:flex显示效果，在子级元素中设置flex的值，然后按比例分。如一个子集元素是1，另一个是2，则一个占三分之一，另一个三分之二。

2.字体阴影非常占内存，不建议使用

3.背景图片的缩放，可以为px和百分比（如果自定义一个，另一个按原来图片的比例等比列缩放）

   另两个特殊的属性值，cover将图片等比例缩放，直到图片的高跟盒子的高一致

                                   contain跟盒子的宽一致

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		html,body{
			min-width: 320px;
			max-width: 540px;
			margin:0 auto;
		}
		header img{
			height: 108px;
			width: auto;
		}
		nav{
			border: 1px solid #ccc;
			padding: 4px;
		}
		nav a,nav em{
			text-decoration: none;
			font-size: 14px;
			text-shadow: 0 2px 1px rgba(0,0,0,.2);
			color: #fff;
			/*非常占内存*/
		}

		.row{
			height: 90px;
			display: flex;
			/*为父级盒子添加flex，可以完成伸缩布局*/
			border-radius: 5px;
			/*为父盒子添加圆角*/
			overflow: hidden;
			/*子元素会继续冒出来，要隐藏*/
			margin-bottom: 5px;
		}
		.row div{
			height: 100%;
			flex: 1;
			/*为父级盒子添加flex属性后，下面的子盒子每个占一份*/
			background-color: #ff697a;
			border-right: 1px solid #fff;
		}
		.row div:nth-child(3){
			border-right: 0;
		}
		.row div a{
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.row em{
			display: block;
			height: 45px;
			text-align: center;
			line-height: 45px;
			font-style: normal;
		}
		.row i{
			display: block;
			width: 43px;
			height: 43px;
			margin: -5px auto 0;
			background:url(img/ctrip.png) no-repeat 0 -127px;
			/*-webkit-background-size:104px;*/
			background-size: 104px;
			/*宽度改为原来的一半，第二项自动等比例缩放*/
		}
		.row div a .jipiao{
            background-position: 0 -288px;
		} 
		.row div a .ggg{
			background-position: 0 -190px;
		}
		.row3{
			display: flex;
			flex-direction: column;
			/*垂直动态分布*/
		}
		.row3 a{
            flex: 1;
            /*上下两个各占一半*/
            text-align: center;
            line-height: 45px;
            color: #fff;
		}
		.row3 a:first-child{
			border-bottom: 1px solid  #fff;
		}
	</style>
</head>
<body>
	<header>
		<img src="img/banner.jpg">
	</header>
	<nav>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i class="jipiao"></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div>
				<a href="#">
					<em>酒店</em>
					<i class="ggg"></i>
				</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
		<div class="row">
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">海外酒店</a>
				<a href="#">特价酒店</a>
			</div>
			<div class="row3">
				<a href="#">团购</a>
				<a href="#">特色民宿</a>
			</div>
		</div>
	</nav>
</body>
</html>

效果;

何迟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
携程网移动端flex布局案例
05-16
在本文中，我们将深入探讨如何运用Flex布局技术来构建携程网移动端的首页，结合CSS3样式、精灵图和渐变色等前端技术，实现头尾固定、中间自适应的页面设计。Flex布局（Flexible Box）是现代Web开发中的一个重要概念...
2.6-flex布局（重点）
qq_45059908的博客
07-31 1085
左右布局 (1)浮动 float:left/right; (2)行内块元素 display:inline-block; (3)flex布局:display:flex; Flex布局 --弹性容器：当内容过多会自适应调整宽度，元素等比例缩放 flex容器属性 1、display:flex、inline-flex; 在弹性容器中默认有两条轴： 主轴：默认情况是水平从左到右的一条轴 侧轴：垂直主轴的一条，默认就是垂直从上到下的一条 注意，设为 Flex 布局以后，子元素的flo...
伸缩布局flex
高高的博客
07-18 1185
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很
flex 中 flex缩放计算 以及 flex特殊值的总结
漫无目的猿猿的博客
03-18 975
Flex (flexible box) 从2009年发布到现在已经不知不觉的过了10年了，现在基本各家浏览器都以及支持了，一些在做项目的小伙伴为了兼容性，最终选择放弃了flex，但是无论是以后新项目的技术选型还是自己对于技术的追逐，flex 对于前端开发来说是必须要掌握的。 对于flex布局来说可用的属性也不多，总共分为两种：一种是应用于容器，另一种应用于容器内子元素。 用于容器的： fl...
一文看懂flex布局
前端成长之路
04-18 7484
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 flex布局做为前端最为常用的布局方式之一，它的重要性不言而喻，今天我们来分享flex布局的应用； 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib
Flex-缩放自适应布局
小白冲的博客
09-18 9072
flex- 自适应布局 *{ margin: 0; padding: 0; } body { height: 100%; width: 100%; overflow: hidden; background: gray; background-size: 100% 100%; font-size: 36px; transform-origin: left top; }
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
前端学习--用flex布局来写--携程首页
05-11
在前端开发领域，布局设计是至关重要的，而Flex布局（Flexible Box Layout）是现代Web页面布局的主流方式之一。本文将深入探讨如何使用Flex布局来重构携程首页，并结合HTML和CSS进行实现，不涉及JavaScript部分。 ...
uni-app flex布局
01-20
【uni-app flex布局详解】 uni-app 是一个基于Vue.js开发的多端统一的框架，它允许开发者编写一次代码，即可在iOS、Android、H5、微信小程序、支付宝小程序等多个平台上运行。在uni-app中，使用CSS3的flex布局能够...
flex-grow，flex-shrink 缩放比例详解
最新发布
m0_37158404的博客
12-07 311
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不同于flex-grow，如果设定了flex-shrink，当容器空间不足时， 每个项目收缩的空间，不仅跟项目设定的flex-shrink和总的收缩空间有关，还跟项目自身的大小有关。加入弹性元素本身大小作为计算方法的考虑因素，主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。son1最终渲染宽度 = 120px + 40*1.5/(1+1.5) = 144px。，即如果存在剩余空间，也不放大。
flex 图片缩放
06-30
发觉FLEX中Image组件载入图片后，虽然自动缩放了，但是是等比缩放的。比如图片是16:9的，Image设置的宽高是4:3的，它不会自动拉伸成4:3，而是上下留白依然16:9。这个问题VideoDisplay组件载入FLV也一样，都是等比缩放的，有没有办法强制让他拉伸成某个宽高，设多少width/height就多少一定这样。
flex 实现的图片预览 缩放 等功能
03-24
需flash palyer 10 及以上支持 博文链接：https://fengshantao.iteye.com/blog/1096090
Flex实现图片放大缩小
01-07
Flex应用zoom实现图片的放大缩小，很简单的实例，可以给新手一些思路
flex 字体自动放大缩小例子
12-03
flex 字体自动放大缩小例子，flex 字体自动放大缩小例子，flex 字体自动放大缩小例子
携程网首页主要利用flex布局实现
05-02
利用flex布局完成了对携程网首页的制作，主要是flex为主，其他为辅的一个源代码分享给大家，希望可以对大家有帮助
flex图片放大缩小
novelly的专栏
10-31 3694
<!--[CDATA[ import mx.effects.Zoom; import mx.controls.Alert; private var zoom:Zoom; private function init():void{ zoom = new Zo
Flex容器背景图的拉伸和重复，backgroundImage拉伸
Xiang
05-27 4533
<br />拉伸很简单，在设置backgroundImage的时候记得把backgroundSize设置成100%即可。如果是写在css文件中。 有个小问题，就是100%需要用双引号括起来，像这样：backgroundSize: "100%";，否则出错（真想骂娘啊）。背景的重复就是背景图片没有容器那么大时，会把同一个图片重复画在容器上。这个东西的原理当然就是自己去画那个图片了。不过幸好 Defrafa这个组件库有了这个功能，而且很好很强大。查看这里，http://www.degrafa.org/samp
FLEX中解决背景图片分辨率自适应的问题
yuefengyuan的专栏
02-26 3828
首先选择容器或者组件：例如选择vbox和canvas。设置图片分辨率自适应主要的一个属性是：backgroundSiez值设定位“100%”。           backgroundImage="images/background/servicebg.png" backgroundSize="100%" >                .........................
Flex伸缩布局，带你走进简洁的代码，一种新的体验
txq231254的博客
01-22 782
前言 简单来讲flex伸缩布局是咱们移动端布局比较经常使用的一种方式，移动端布局还有流式布局，less+rem+媒体查询布局这些都是单独制做移动端页面的一些布局方式。布局 这里主要介绍一下flex伸缩布局，由于它有不少优势，好比操做方便，布局很是简单，在移动端运用很普遍。 一、移动端基础 移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试 1、视口 视口( viewpor..
Flex 布局教程：实例篇
05-17
好的，下面我们来看一些Flex布局的实例。 ## 实例一：水平居中 让一个元素在父容器中水平居中，可以使用以下方法： ```html <div class="container"> <div class="box">Hello World</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background-color: #ccc; padding: 20px; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: center;`将子元素水平居中。 - `align-items: center;`将子元素垂直居中。 - `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。 ## 实例二：等分布局 让多个元素等分布局可以使用以下方法： ```html <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> ``` ```css .container { display: flex; justify-content: space-between; } .box { flex: 1; background-color: #ccc; padding: 20px; margin: 0 10px; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: space-between;`将子元素等间距排列。 - `flex: 1;`将子元素等分布局。 ## 实例三：垂直居中 让一个元素在父容器中垂直居中，可以使用以下方法： ```html <div class="container"> <div class="box">Hello World</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background-color: #ccc; padding: 20px; margin: auto; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: center;`将子元素水平居中。 - `align-items: center;`将子元素垂直居中。 - `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。 - `margin: auto;`使元素在水平方向上居中。 ## 实例四：项目排序 使用Flex布局可以很方便地对项目进行排序，例如： ```html <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> </div> ``` ```css .container { display: flex; flex-wrap: wrap; } .box { flex: 1 0 200px; height: 100px; background-color: #ccc; margin: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #fff; text-shadow: 1px 1px #000; } .box:nth-child(1) { order: 3; } .box:nth-child(2) { order: 1; } .box:nth-child(3) { order: 4; } .box:nth-child(4) { order: 2; } .box:nth-child(5) { order: 5; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `flex-wrap: wrap;`设置弹性容器的子元素在一行排不下时，自动换行。 - `flex: 1 0 200px;`设置子元素的伸缩比例为1，基准大小为0，最大值为200px。 - `margin: 10px;`设置子元素的外边距为10px。 - `order:`设置子元素的显示顺序。 以上就是一些Flex布局的实例，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值