伸缩布局案例-携程

最新推荐文章于 2022-09-07 16:05:48 发布

姑娘的代码

最新推荐文章于 2022-09-07 16:05:48 发布

阅读量832

点赞数

分类专栏： html5+css 文章标签：伸缩布局携程伸缩布局 flex常用属性 flex练习伸缩布局案例

本文链接：https://blog.csdn.net/irouduoduo/article/details/71056507

版权

html5+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

放大：

伸缩布局的相关知识点：

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

none：

none关键字的计算值为: 0 0 auto

<' flex-grow '>：

用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」

<' flex-shrink '>：

用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」

<' flex-basis '>：

用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       * {
       	margin: 0;
       	padding: 0;
       	list-style: none;
       }
       a {
       	text-decoration: none;
       	color: #333;
       	
       }
       img {
       	display: block;
       	width: 100%;
       
         
       }
       /*导航模块*/
       .item {
       	height: 90px;
       	display: flex;
       	background-color: deeppink;
       	margin:10px;
       	border-radius: 15px;
       }
       .item .pub {
       	flex:1;
       	width: 200px;
       	border-right: 1px solid #fff;
       	border-bottom: 1px solid #fff;
       	border-top: 1px solid #fff;
       }
        .item .sub {
       	flex:2;
       }
       .item .sub a {
       	height: 45px;
       	line-height: 45px;
       	width: 50%;
       	float: left;
       	border: 1px solid #fff;
       	/*设置盒子的内减模式*/
       	box-sizing: border-box;
       }
       
       .item:nth-child(2) {
       	background-color: lightyellow;
       }
       .item:nth-child(3) {
       	background-color: lightblue;
       }
       .item:nth-child(4) {
       	background-color: lightgreen;
       }
       .extre {
       	display: flex;
       }
       .extre a {
       margin: 5px;
       height: 100px;
       overflow: hidden;
       	flex:1;
       }
       .f-nav {
       	margin: 5px;
       	height: 40px;
       	line-height: 40px;
       	border-top: 1px solid #ccc;
       	border-bottom: 1px solid #ccc;
       	display: flex;
       	text-align: center;
       }
       .f-nav li {
       	flex:1;
       }
       .footer p {
       	text-align: center;
       	font-size: 16px;
       	color: #999;
       	line-height: 30px;
       }
       .item:nth-child(4) .pub a{
       	display: block;
       	width: 100%;
       	height: 45px;
       	line-height: 45px;
       	box-sizing: border-box;
       		border-bottom: 2px solid #fff;
       	
       }

	</style>

</head>
<body>
	<div class="layout">
		<div class="banner">
			<a href="#"><img src="banner.png"></a>
		</div>
		<div class="nav">
			<div class="item">
				<div class="pub"></div>
				<div class="sub">
					<a href="javascript:;">海外酒店</a>
					<a href="">团购</a>
					<a href="">特惠酒店</a>
					<a href="">客栈公寓</a>
				</div>
			</div>
			<div class="item">
				<div class="pub"></div>
				<div class="sub">
					<a href="javascript:;">海外酒店</a>
					<a href="">团购</a>
					<a href="">特惠酒店</a>
					<a href="">客栈公寓</a>
				</div>
			</div>
			<div class="item">
				<div class="pub"></div>
				<div class="sub">
					<a href="javascript:;">海外酒店</a>
					<a href="">团购</a>
					<a href="">特惠酒店</a>
					<a href="">客栈公寓</a>
				</div>
			</div>
			<div class="item">
				<div class="pub">
					<a href="#">门票</a>
					<a href="#">10000</a>
				</div>
				<div class="sub">
					<a href="javascript:;">海外酒店</a>
					<a href="">团购</a>
					<a href="">特惠酒店</a>
					<a href="">客栈公寓</a>
				</div>
			</div>
        <div class="extre">
        	<a href="#"><img src="a_03.jpg"></a>
        	<a href="#"><img src="a_06.jpg"></a>
        </div>
        <div class="footer">
        	<ul class="f-nav">
        		<li>客户端</li>
        		<li>关于</li>
        		<li>联系我们</li>
        	</ul>
        	<p>欢迎 | 欢迎 | 欢迎</p>
        	<p>@2015 携程旅行

        </div>
		</div>
	</div>
	
</body>
</html>

姑娘的代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伸缩布局案例-携程

放大：伸缩布局的相关知识点：flex：none | flex-grow '> flex-shrink >'? || flex-basis '>none：none关键字的计算值为: 0 0 autoflex-grow '>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。在
复制链接

扫一扫