29-lao-58案例：弹性盒子实现移动导航布局

最新推荐文章于 2022-04-08 22:06:50 发布
最新推荐文章于 2022-04-08 22:06:50 发布
阅读量382 收藏 2
点赞数 
<head>
		<meta charset="UTF-8">
		<title>汽车之家 两侧固定，中间可伸缩</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.top-wrap {
				display: flex;
				/*将整个div设置为弹性盒子*/
			}
			/*头部的左边和右边同时设置*/
			
			.top-wrap .top-l,
			.top-wrap .top-r {
				font: 16px/1.5 "微软雅黑";
				height: 40px;
				flex: 0 0 70px;
				line-height: 40px;
				border: 1px solid #CCCCCC;
				box-sizing: border-box;
				/*预防边框溢出,将其设置为新型的盒模型*/
			}
			
			.top-wrap .top-m {
				flex: 1;
				/*设置其放大的倍数*/
				height: 40px;
				text-align: center;
			}
			
			.top-wrap .top-m input {
				height: 36px;
				line-height: 36px;
				border-radius: 20px;
				/* 将文本框设置成圆角形状*/
				width: 90%;
			}
			
			a {
				text-decoration: none;
				color: #030303;
			}
			
			ul {
				list-style: none;
			}
			
			.top-nav-wrap .top-nav {
				display: flex;
				justify-content: space-around;
			}
			
			.top-nav-wrap .top-nav .top-nav-item {
				/*flex: 1;*/
			}

			/*.car-list-wrap{
				display: flex;
			}*/
			.car-list-wrap .car-list{
				display: flex;
				justify-content: space-around; /*调整每一个子盒子的布局*/
				align-content: space-around;  /* 调整多列子盒子的布局*/
				flex-flow: row wrap;   /*将盒子正常行排放,强制换行*/
				height: 200px;      
				border: 1px solid #ccc;
				box-sizing: border-box;
				width: 100%;
			}
			
			.car-list-wrap .car-list .car-litem{
				flex: 1 0 20%;  /*设置每一个盒子的占位大小*/
			}
			.car-list-wrap .car-list .car-litem a{
				display: block;
				margin: 0 auto;  /*图片文字整体水平居中对齐*/
				width: 80%;
				text-align: center;  /*文字居中*/
			}
			.car-list-wrap .car-list .car-litem .img{
				background: url(img/EB65028F4711386404F411FD77F8A2D6.jpg);
				box-sizing: border-box;  
				background-size: cover;  /*设置新型盒模型并将图片填充*/
				border-radius: 50%;
				height: 50px;
				width: 50px;
				margin: 0 auto;  /*将图片水平居中*/
			}
		</style>
	</head>

	<body>
		<div class="top-wrap">
			<div class="top-l">汽车之家</div>
			<div class="top-m">
				<input type="text" class="search-text" name="" id="" value="" />
			</div>
			<div class="top-r">用户</div>
		</div>
		<div class="top-nav-wrap">
			<ul class="top-nav">
				<!--(li.top-nav-item>a[herf=#]{链接})*5-->
				<li class="top-nav-item">
					<a href="#" herf="#">链接1</a>
				</li>
				<li class="top-nav-item">
					<a href="#" herf="#">链接2</a>
				</li>
				<li class="top-nav-item">
					<a href="#" herf="#">链接3</a>
				</li>
				<li class="top-nav-item">
					<a href="#" herf="#">链接4</a>
				</li>
				<li class="top-nav-item">
					<a href="#" herf="#">链接5</a>
				</li>
			</ul>
		</div>
		<div class="car-list-wrap">
			<ul class="car-list">
				<!--	(li.car-litem>a[href=#]>div.img+span.car-name{福特#})*10-->
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
				<!--如果最后一个为空时，设置一个li标签就可以了-->
				<li class="car-litem">
					<a href="#">
						<div class="img"></div>
						<span class="car-name">福特#</span>
					</a>
				</li>
			</ul>
		</div>
	</body>

嘻嘻哈哈，
关注
flex弹性盒子布局实例
11-08
flex弹性盒子布局实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
CSS3 flexbox弹性布局实例
weixin_30778805的博客
02-05 107
我认为当flexbox支持所有的浏览器时，由于它比浮动布局更加的简单和强大性，它将彻底的改变我们的CSS布局方式。例如我们可以很容易的写出一个元素在未知比例下的居中对齐布局。当然css3新增的其它属性，例如grid也可以给前端开发带来更多的布局方式。 下面给出一些例子来证明为什么web开发者应该使用flexbox布局。 在前面的文章里面：flexbox基础教程，flexbox完整版教程。我...
弹性盒布局案例
ZYN_8620的博客
04-08 570
新的布局方式，适合移动端布局，仅实现前端页面，无具体功能 页面效果（缩放后） 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-.
P89-前端基础高级布局flex-弹性盒布局导航栏练习
Bruce小鬼
02-02 1127
P89-前端基础高级布局flex-弹性盒布局导航栏练习 1.概述 我们使用新学习的布局方式来做个导航栏，弹性盒导航栏。体验下弹性盒的优点 2.弹性盒布局导航栏 2.1.未开启弹性盒代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹性盒导航栏</title> <link rel="stylesheet" href="css/reset.c
sf-sealion-2015-chat:绝密聊天应用
06-09
"SF Sea Lion 2015 聊天应用程序"是一个由Matt Lao和Curtis Seaton共同构建的项目，旨在作为一个Firebase教程的一部分，帮助开发者学习如何创建一个实时、安全的聊天应用。这个应用程序的核心功能是允许用户进行即时...
Go-Lao-SiJi-一个针对老司机的o(golang)CLI爬虫
08-14
"Go-Lao-SiJi-一个针对老司机的o(golang)CLI爬虫" 是一个基于 Go 语言（Golang）开发的命令行界面（CLI）爬虫工具，专门设计用于老司机群体的需求。这个项目的核心是利用 Go 语言的强大性能和简洁的语法来实现高效的...
JavaScript常用函数工具集-lao-utils_.docx
07-05
`lao-utils` 是一个JavaScript函数工具库，它提供了一系列常用的方法，用于简化常见的编程任务。这个库旨在作为其他大型库如jQuery、YUI等的补充，提供了许多实用的工具函数，适用于Node.js环境和浏览器环境。以下是...
google-noto-sans-lao-fonts-20141117-5.el7.noarch.rpm
11-30
离线安装包，亲测可用
google-noto-serif-lao-fonts-20141117-5.el7.noarch.rpm
11-30
离线安装包，亲测可用
弹性盒案例支付宝首页源码
08-05
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
webApp flex弹性盒子
12-05
web app flex弹性盒子布局教程，很丰富的布局案例
14-弹性盒导航.html
09-04
1)弹性盒也叫伸缩布局盒模型 它是**<span>css3</span>**引入的一种新的布局模式——**<span>flexbox</span>**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。 2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。 3)专业术语解释 a、主轴-水平方向或者X轴 b、侧轴-垂直方向或者Y轴 c、伸缩容器（父元素）和伸缩项目（子元素）
弹性盒布局方法示例
Mr_qinyivue的博客
09-20 334
弹性盒多布局方法 1.flex-direction：row; 默认x主轴 column 为y轴 ，row-reverse x轴为主轴，并反向排列 ，column-reverse Y轴为主轴并反向排列。 2.主轴对齐方式 justify-content: center 居中 space-between 两端对齐 space-around 自动间距对齐，flex-start开始位置 flex-end 结束位置 3.侧轴对齐方式 align-items 属性值常用center 居中 ，fl
弹性盒布局案列
weixin_46421045的博客
03-22 145
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ ...
20、实例 使用盒模型布局之自适应窗口的弹性盒布局
xuxianmei的专栏
07-04 758
使用盒模型布局之自适应窗口的弹性盒布局 /*主要属性：box-flex;*/ body { margin:0px; } div#container { display:box; display:-moz-box; display:-webkit-box; text-align:left;} #left { border:1px solid #aaf; width:280px;
弹性盒模型常见例子
ciguanpeng7618的博客
06-20 213
这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比， 感受Flexbox布局带来的便捷开发体验。 1 垂直居中对齐 不使用Flexbox <style> .main1 { posi...
移动端上下导航布局二: 弹性盒
等待のL先森的博客
12-03 122
移动端上下导航布局二: 弹性盒 第二种就可以用flex弹性盒来写： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端上下导航布局二: 弹性盒</title&g
CSS布局技巧：如何控制UL LI样式
罗马/upper-roman/hebrew/arabic-indic/bengali/gujarati/gurmukhi/kannada/tamil/telugu/thai/lao/ethiopic-halehame/ethiopic-halehame-am/ethiopic-halehame-ti-er/ethiopic-halehame-ti-et/ethiopic-numeric ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值