【HTML5】弹性盒子实现导航栏和留言框

news2025/1/14 1:12:20

调CSS就像上方那样，代码逐渐变得扭曲，情绪逐渐变得暴躁。

 目录

弹性盒子的核心属性

1、display设置元素生成框

2、弹性盒子比例划分

2.1flex-basis基本宽度

2.2flex-grow放大宽度

2.3flex-shrink缩小宽度

2.4单独的一个flex用法

3、flex-direction属性

3.1row排列

3.2row-reverse排列

3.3column排列

3.4column-reverse排列

4、flex的两种对齐方式

5、列表

5.1列表的用法

5.2列表超链接的用法

6、弹性盒子实现导航栏

6.1html源码 

7、表单实现留言框

7.1html源码 

7.2css源码 

前言：

大家好，我是拳击哥。在我们日常生活中，我们点击一个网页PC端显示的是一个状态用手机看是另外一种状态，这时候需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。那么这时候我们可以用到弹性盒子。下面我就来讲解弹性盒子的各个属性用法。

我任意打开一个网站，PC端显示时，我拖动检查框发现整个页面只能显示一半。那如果不进行弹性设置，当PC端的尺寸应用到手机上的时候，手机上显示的也是页面的一半。

当我切换切换设备为手机端后，我把检查框往左拖动发现页面随着尺寸自适应生成了适合屏幕的大小，这就是弹性盒子的用法。

以上页面只是随机查找的，里面的功能不一定是使用弹性盒子。但我想告诉大家的是弹性盒子能使一个网页在PC端显示一种状态，在手机端显示根据PC端自适应生成适合手机端的状态。我们可以这样理解大屏显示是什么样子，小屏显示是什么样子。这样就不难理解了。

弹性盒子的核心属性

外层容器里面有三个弹性项：

  • 由弹性容器(Flex container)和弹性子元素(Flex item)组成
  • 通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器
  • 包含了一个或多个弹性子元素

1、display设置元素生成框

我们需要将显示函数display设置成flex，display属性是规定元素生成框是什么样的类型的，比如我要设置成flex弹性盒子我可以这样做：display:flex。

如以下程序：

    <style>
		.test 
		{
			display: flex;
		}
    </style>
	<div class="test">测试</div>

2、弹性盒子比例划分

  • flex-grow 放大
  • flex-shrink 缩小
  • flex-basis 自然宽度
  • flex-wrap 换行

今天我们讲常用的三个属性：flex-grow 放大、flex-shrink 缩小、flex-basis 自然宽度。

2.1flex-basis基本宽度

我设置父类宽度为400px，四个“孩子”的基本宽度分别为10px、50px、100px、120px。这些px是什么呢？就是四个“孩子”各自盒子占的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<style>
		.box {
			width: 400px;
			height: 50px;
			display: flex;
			flex-direction:row;	
			flex-grow: ;
			background-color: whitesmoke;
		}
		.test {
			height: 50px;
		}
		.test:nth-child(1) {
            width: 10px;
			background: red;
		}
		.test:nth-child(2) {
			width: 50px;
			flex-basis: auto;
			background: skyblue;
		}
		.test:nth-child(3) {
			width: 100px;
			flex-basis: auto;
			background: green;
		}
		.test:nth-child(4) {
			width: 120px;
			flex-basis: auto;
			background: palegreen;
		}
	</style>
	<div class="box">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test">3</div>
	<div class="test">4</div>
	</div>
	</body>
</html>

 显示效果：

我们可以看到1、2、3、4区域后面有一块多余的灰色区域。那么我在第2个child里加上flex-grow:2会发生什么呢

2.2flex-grow放大宽度

在2.1代码上修改，将flex-grow:2语句加入child2中：

		.test:nth-child(2) {
			width: 50px;
			flex-basis: auto;
			flex-grow: 2;
			background: skyblue;
		}

 实现结果：

flex-grow:2使第2块区域占了170px，因此第3块区域和第4块区域被挤出原来的区域，直到整个灰色区域被填满。

2.3flex-shrink缩小宽度

在2.1的基础上我把第1个child的width设置300px，第2个child设置flex-grow:2和第3个child设置flex-shrink:3，会发生什么呢？

		.test:nth-child(1) {
			
			width: 300px;
			background: red;
		}
		.test:nth-child(3) {
			
			width: 120px;
			flex-basis: auto;
			flex-shrink: 2;
			background: green;
			
		}
		.test:nth-child(4) {
		
			width: 150px;
			flex-basis: auto;
			flex-shrink: 2;
			background: palegreen;
		}

实现效果：

我们可以发现， childe1设置300px超出的空间被吸收了child3和child4吸收了。也就是child1犯的错childe3和child4买单。因此我们认为flex-shrink是用来吸收超出空间的。

2.4单独的一个flex用法

单独的一个flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。它后两个属性可选。

比如我要设置放大5份缩小0份基本宽度为100px可以设置为：flex:5 0 100px;。

相信大家在理解上述三个flex属性，再进行单独的一个flex用法就很容易理解了吧。

3、flex-direction属性

flex-direction属性指定了弹性子元素在父选择器中的位置，它有四个值：

  • row横向从左往右
  • row-reverse横向从右往左
  • column纵向从上往下
  • column-reverse纵向从下往上

3.1row排列

row是默认的排列方式，根据你设置的元素横向从最左往右排列，

<style>
  .test {
			display: flex;
			flex-direction:row;
		}
</style>
	<body>
		<form>
			<div class="test">
				账号<input type="text" name="tex"/>
			</div>
			<div class="test">
				密码<input type="password" name="pass"/>
			</div>
		</form>
	</body>

显示效果：

格式为：flex-direction:row 

3.2row-reverse排列

row-reverse是反向的row的排列排列方式，根据你设置的元素横向从最右往左排列，

<style>
  .test {
			display: flex;
			flex-direction:row-reverse;
		}
</style>
	<body>
		<form>
			<div class="test">
				账号<input type="text" name="tex"/>
			</div>
			<div class="test">
				密码<input type="password" name="pass"/>
			</div>
		</form>
	</body>

显示结果：

格式为：flex-direction:row-reverse 

3.3column排列

column是纵向排列方式，根据你设置的元素纵向从最上方往下排列，第一项元素在最上面。如下图所示：

<style>
  .test {
			display: flex;
			flex-direction:column;
		}
</style>
	<body>
		<form>
			<div class="test">
				账号<input type="text" name="tex"/>
			</div>
			<div class="test">
				密码<input type="password" name="pass"/>
			</div>
		</form>
	</body>

显示效果：

格式为：flex-direction:column 

3.4column-reverse排列

column-reverse是反向column的排列方式。根据你设置的元素从下往上纵向排列，从下往上，最后一项排在最上面。

<style>
  .test {
			display: flex;
			flex-direction:column-reverse;
		}
</style>
	<body>
		<form>
			<div class="test">
				账号<input type="text" name="tex"/>
			</div>
			<div class="test">
				密码<input type="password" name="pass"/>
			</div>
		</form>
	</body>

显示效果：

格式为：flex-direction:column-reverse

4、flex的两种对齐方式

flex的两种对齐方式为：水平对齐方式和垂直对齐方式：

  • justify-content水平对齐方式
  • align-items垂直对齐方式

有一程序，实现一段文字的水平居中和垂直居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
	</head>
	<body>
		   <style>
				.for {
					display: flex;
					flex-direction: column;
					align-items: center;
                    justify-content: center;
					margin: auto;
				}
		    </style>
			<body>
				<div class="for">
				<p>真正的交情交的是内心而非脸色不必在意人与人之间的表面情谊</p><br />
	            <p>至交之人不需要，泛交之人用不着。</p>
				</div>
			</body>
	</body>
</html>

实现效果：

5、列表

5.1列表的用法

nav是导航栏的意思在最外层，li是用来定义列表的，在 HTML 中 <li> 标签是用来定义列表的，使用 <li> 标签定义的列表可以是个无序列表也可以是有序列表。以下展示的是有序表：

<nav>
	<ul>
	    <li>主页</li>
	    <li>学校概况</li>
	    <li>教学科研</li>
	    <li>招生就业</li>
	    <li>联系方式</li>
	</ul>
</nav>

实现效果：

5.2列表超链接的用法

<a> 标签定义超链接，用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性，它指示链接的目标。比如：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的
<nav>
	 <ul>
		<li><a href="#">主页</a></li>
		<li><a href="#">学校概况</a></li>
		<li><a href="#">学校科研</a></li>
		<li><a href="#">招生就业</a></li>
		<li><a href="#">联系方式</a></li>
	 </ul>
</nav>

 实现结果：

6、弹性盒子实现导航栏

6.1html源码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒子设置导航栏</title>
	</head>
	<style>
		* {
			list-style: none;
			margin: 0;
			padding: 0;
			text-decoration: none;
		}
		.nav {
			width: 100%;
			height: 60px;
			line-height: 50px;
			font-size: 20px;
			margin: 0 auto;
			text-align: center;
			background: chocolate;
			color:white;
		}
		.nav ul {
			padding-left: 20px;
			padding-right: 20px;
			background: orange;
		}
		.nav li.move {
			background: #74BE23;
		}
		.nav a {
			display: block;
			width: 60px;
			color: #fff;
			padding: 0 15px;
        }
		.nav li:hover {
			border-bottom: 3px solid yellow;
		}
		.nav li:hover a {
			color: #74BE23;
			background: whitesmoke;
		}
		
		.nav ul {
			display: flex;
			flex-direction: row;
			padding-left: 20px;
			padding-right: 20px;
			background: orange;
		}
		@media all and (max-width: 600px) {
			.nav ul {
				flex-direction: column;
				padding: 0;
			}
			
			.nav a {
				width: 100%;
				text-align: center;
				padding: 10px;
				border-top: 1px solid rgba(255,255,255,0.3);
				border-bottom: 1px solid rgba(0,0,0,0.1) ;
		    }
			
			.nav list-of-type a {
				border-bottom: none;
			}
		}
	</style>
	<body>
		<nav class="nav">
			<ul >
				<li class="move"><a href="#">主页</a></li>
				<li><a href="#">图片</a></li>
				<li><a href="#">视频</a></li>
				<li><a href="#">学术</a></li>
				<li><a href="#">词典</a></li>
				<li><a href="#">更多</a></li>
			</ul>
		</nav>
	</body>
</html>

7、表单实现留言框

7.1html源码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹盒子制作留言板</title>
		<link rel="stylesheet" href="../css/task_twenty_three.css"/>
	</head>
		<form class="for">
			<div class="groupby">
				<label for="e-mail" class="label">邮箱</label>
				<input type="email" name="e-mail"placeholder="请输入你的邮箱"/>
			</div>
			<div class="groupby">
				<label for="name" class="label">姓名</label>
				<input type="text" name="name"placeholder="请输入你的姓名"/>
			</div>
			<div class="groupby">
				<label for="message" class="label">留言内容</label>
				<textarea name="message" placeholder="请输入你的留言内容"></textarea>
			</div>
			<div class="groupby">
				<label for="submit" class="label"></label>
				<button name="submit">提交</button>
			</div>
		</form>
	</body>
</html>

7.2css源码 

.groupby {
	display: flex;
	margin-bottom: 15px;
}
.groupby label {
	flex: 1 0 40px;
	max-width: 200px;
	align-self: center;
	padding-right: 15px;
}

.groupby input,
.groupby textarea {
	flex: 6 0 400px;
	height:50px;
	
}

.groupby button {
	margin-left: auto;
}

.for {
	border: 2px solid black;
	padding: 60px;
	
}

.groupby input,
.groupby textarea {
	flex: 5 0 200p15
	padding: 8px 16px;
	font-size: 15px;
	line-height: 6;
	background-color: whitesmoke;
	border: 1.5px solid #ced4da;
	font-family: inherit;
}

.groupby button {
	margin-left: auto;
	padding: 8px 16px;
	color: #fff;
	background: #333;
	cursor: pointer;
}

感谢各位的耐心观看，本期博客到这里就结束了，如有收获建议收藏哦~

 Never Give Up

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/27622.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows安装配置Vagrant

Windows安装配置Vagrant

1、下载 1.1、连接&#xff1a;https://developer.hashicorp.com/vagrant/downloads 1.2 、选择系统、版本、型号&#xff0c;然后下载 2、安装 2.1、双击运行下载的可执行文件&#xff0c;点击Next 2.2、先同意许可&#xff0c;然后点击Next 2.3、点击Change&#xff0c;选…
阅读更多...
数理统计笔记2：总体均值的抽样分布

数理统计笔记2：总体均值的抽样分布

引言 数理统计笔记的第2篇总结了数理统计中样本均值的分布&#xff0c;可以帮助理解样本均值和总体均值分布之间的联系。举了一个例子可以加深理解&#xff0c;并且还补充了中心极限定理的知识。 一个关键的结论就此诞生了&#xff01;&#xff01;&#xff01; 样本均值的均值…
阅读更多...
sqli-labs/Less-50

sqli-labs/Less-50

这一关仍然是以sort作为注入点的 首先我们输入rand() 判断是数字型还是字符型 多次尝试 发生变化 说明属于数字型 接着试试报错注入 输入以下语句 sortupdatexml(1,if(11,concat(0x7e,database(),0x7e),1),1)-- 存在回显 说明可以使用报错注入哦 这一关要训练的是堆叠注入…
阅读更多...
Compression-Resistant Backdoor Attack against Deep Neural Networks 论文笔记

Compression-Resistant Backdoor Attack against Deep Neural Networks 论文笔记

论文名称Compression-Resistant Backdoor Attack against Deep Neural Networks作者Mingfu Xue&#xff08;南京航空航天大学&#xff09;会议/出版社未发表pdf&#x1f4c4;在线pdf代码无概要本文提出了一种对图像压缩&#xff08;JPEG&#xff0c;JPEG2000&#xff0c;WEBP&a…
阅读更多...
Linux进阶-文件

Linux进阶-文件

Linux内核&#xff1a;屏蔽硬件区别&#xff0c;把所有的硬件设备抽象成文件&#xff0c;提供统一的接口给用户使用。 目录 虚拟文件系统&#xff1a;抽象层&#xff0c;对文件的访问实际上是对抽象层的访问。 普通文件系统&#xff1a;ext4、fat32、ubifs 特殊文件系统 文…
阅读更多...
java 数据脱敏

java 数据脱敏

1.SQL数据脱敏实现 MYSQL(电话号码,身份证)数据脱敏的实现 -- CONCAT()、LEFT()和RIGHT()字符串函数组合使用&#xff0c;请看下面具体实现-- CONCAT(str1,str2,…)&#xff1a;返回结果为连接参数产生的字符串 -- LEFT(str,len)&#xff1a;返回从字符串str 开始的len 最左字…
阅读更多...
NestJS学习：搭建项目、依赖注入、常用命令、RESTful 风格设计

NestJS学习：搭建项目、依赖注入、常用命令、RESTful 风格设计

介绍 Nest (NestJS) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。它利用 JavaScript 的渐进增强的能力&#xff0c;使用并完全支持 TypeScript &#xff08;仍然允许开发者使用纯 JavaScript 进行开发&#xff09;&#xff0c;并结合了 OOP &#xff0…
阅读更多...
现代密码学导论-4-完美保密及其三个等价定义

现代密码学导论-4-完美保密及其三个等价定义

目录 完美保密 Perfectly Secret Encryption 2.1 完美保密的定义 DEFINITION 2.3 完美保密加密方案的定义 LEMMA 2.5 完美保密方案的等价定义(一) 证明引理2.5与定义2.3等价 完美不可区分性 不可区分实验 The adversarial indistinguishability experiment DEFINITION …
阅读更多...
基于微信小程序的家校通系统-JAVA【数据库设计、源码、开题报告】

基于微信小程序的家校通系统-JAVA【数据库设计、源码、开题报告】

第一章 绪 论 1.1选题背景 随着网络时代的到来&#xff0c;互联网的优势和普及时刻影响并改变着人们的生活方式。在信息技术迅速发展的今天&#xff0c;计算机技术已经遍及全球&#xff0c;使社会发生了巨大的变革。 为了不受时间和地点的限制&#xff0c;智能手机用户可以通…
阅读更多...
MySQL学习笔记-----Navicat设置建表

MySQL学习笔记-----Navicat设置建表

1.数据库字段设置 id 主要设置有bigint 和int两种 长度一般都是20 字符 主要设置 varchar 长度 我一般设置 255 时间 主要是设置为timestamp 混合日期和时间值&#xff0c;时间戳 &#xff0c;建议在java端的DTO或者request设置时间格式 判断状态 比如mybatis-pl…
阅读更多...
宋祖德六评岳云鹏，大饼脸、文化低、总有一句能戳中你的内心

宋祖德六评岳云鹏，大饼脸、文化低、总有一句能戳中你的内心

都知道娱乐圈有一个纪委书记&#xff0c;那就是万达的公子王思聪&#xff0c;其实在郭德纲的北京德云社&#xff0c;也有一位义务纪委书记。著名导演宋祖德&#xff0c;就是德云社的纪委书记&#xff0c;这些年他把所有的重心&#xff0c;都放在了约束德云社上面。 俗话说&…
阅读更多...
Mysql优化-经验分享

Mysql优化-经验分享

目录什么是索引索引类型主键索引唯一索引组合索引前缀索引全文索引空间索引索引的数据结构HASH表二叉树平衡二叉树红黑树B树B树索引的存储引擎MyISAMInnoDB索引优化方向分层SQL优化表设计三范式索引合理使用服务器优化内存升级碎片优化工具的使用explainshow processlistshow p…
阅读更多...
基于单片机的音乐盒

基于单片机的音乐盒

本设计是基于单片机的音乐盒&#xff0c;主要实现以下功能&#xff1a; 1&#xff0c;可通过按键控制音乐的选择、声音的大小和开始/停止播放&#xff1b; 2&#xff0c;通过MP3模块播放音乐&#xff1b; 3&#xff0c;可通过蓝牙连接手机&#xff0c;用手机远程控制&#xff…
阅读更多...
书法比赛评分系统-JAVA【数据库设计、源码、开题报告】

书法比赛评分系统-JAVA【数据库设计、源码、开题报告】

1 引言 1.1 选题背景及意义 书法艺术&#xff0c;是中国的国粹;是经过数千年历史积淀和先哲们上下求索而形成的灿烂的文化瑰宝;是囊括了人与天地之间的大学问;是中华民族智慧的结晶;是最具中国特色的文化艺术门类。它不仅在中国&#xff0c;而且在世界上也享有极高的荣誉&…
阅读更多...
Spring Boot 自定义配置元数据

Spring Boot 自定义配置元数据

Spring Boot 自定义配置元数据 概述 开发Spring Boot应用程序时, 可以把 application.properties文件中的配置属性直接转换为 Java Bean对象。这也是Spring Boot 约定大于配置的理念的体现&#xff0c;通过框架内置的各种属性按照不同的需求进行排列组合&#xff0c;满足特定…
阅读更多...
Spring Boot Admin2 @EnableAdminServer的加载

Spring Boot Admin2 @EnableAdminServer的加载

其他相关文章&#xff1a; 1、Spring Boot Admin 参考指南 2、SpringBoot Admin服务离线、不显示健康信息的问题 首先根据官网的“快速开始”&#xff0c;快速搭建一个Spring Boot Admin Server项目 1、添加Spring Boot Admin启动器到依赖 pom.xml <dependency><grou…
阅读更多...
低代码会使初级码农失业吗？

低代码会使初级码农失业吗？

低代码的目的是提升效率&#xff0c;不是压榨生存空间。低代码不代表低技术&#xff0c;所以低代码并不会导致初级码农失业&#xff0c;实际上不仅不会导致失业&#xff0c;还帮助更多人走上了“开发者”岗位。 何为低代码&#xff1f; 所谓“低代码”&#xff08;Low-Code&a…
阅读更多...
day29 SQL注入增删改查盲注延时布尔报错

day29 SQL注入增删改查盲注延时布尔报错

前言 #知识点&#xff1a; 1、明确查询方式注入Payload 2、明确查询方式注入产生功能 3、明确SQL盲注延时&布尔&报错 #详细点&#xff1a; 盲注就是在注入过程中&#xff0c;获取的数据不能回显至前端页面。 此时&#xff0c;我们需要利用一些方法进行判断或者尝…
阅读更多...
基于JAVA的房屋租赁系统平台【数据库设计、源码、开题报告】

基于JAVA的房屋租赁系统平台【数据库设计、源码、开题报告】

数据库脚本下载地址&#xff1a; https://download.csdn.net/download/itrjxxs_com/86427640 租户在租房过程中如何才能保护自己的合法权益? 出租方在租房过程中又如何证明房屋的所属关系?种种租赁相关话题&#xff0c;成了当下关注的民生热点&#xff0c;为了切实解决人民群…
阅读更多...
BUUCTF Reverse/[GXYCTF2019]simple CPP

BUUCTF Reverse/[GXYCTF2019]simple CPP

BUUCTF Reverse/[GXYCTF2019]simple CPP 先看文件信息&#xff0c;是个64位的程序&#xff0c;且没有加壳 IDA64位打开 int __cdecl main(int argc, const char **argv, const char **envp) {bool v3; // si__int64 v4; // rax__int64 v5; // r8__int64 v6; // r8unsigned __in…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023