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

    调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。

    如以下程序：

    1.     <style>
    2. 		.test 
    3. 		{
    4. 			display: flex;
    5. 		}
    6.     style>
    7. 	<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是什么呢？就是四个“孩子”各自盒子占的宽度。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>测试title>
    6. 	head>
    7. 	<style>
    8. 		.box {
    9. 			width: 400px;
    10. 			height: 50px;
    11. 			display: flex;
    12. 			flex-direction:row;	
    13. 			flex-grow: ;
    14. 			background-color: whitesmoke;
    15. 		}
    16. 		.test {
    17. 			height: 50px;
    18. 		}
    19. 		.test:nth-child(1) {
    20.             width: 10px;
    21. 			background: red;
    22. 		}
    23. 		.test:nth-child(2) {
    24. 			width: 50px;
    25. 			flex-basis: auto;
    26. 			background: skyblue;
    27. 		}
    28. 		.test:nth-child(3) {
    29. 			width: 100px;
    30. 			flex-basis: auto;
    31. 			background: green;
    32. 		}
    33. 		.test:nth-child(4) {
    34. 			width: 120px;
    35. 			flex-basis: auto;
    36. 			background: palegreen;
    37. 		}
    38. 	style>
    39. 	<div class="box">
    40. 	<div class="test">1div>
    41. 	<div class="test">2div>
    42. 	<div class="test">3div>
    43. 	<div class="test">4div>
    44. 	div>
    45. 	body>
    46. html>

     显示效果：

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

    2.2flex-grow放大宽度

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

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

     实现结果：

    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，会发生什么呢？

    1. 		.test:nth-child(1) {
    2. 			
    3. 			width: 300px;
    4. 			background: red;
    5. 		}
    6. 		.test:nth-child(3) {
    7. 			
    8. 			width: 120px;
    9. 			flex-basis: auto;
    10. 			flex-shrink: 2;
    11. 			background: green;
    12. 			
    13. 		}
    14. 		.test:nth-child(4) {
    15. 		
    16. 			width: 150px;
    17. 			flex-basis: auto;
    18. 			flex-shrink: 2;
    19. 			background: palegreen;
    20. 		}

    实现效果：

    我们可以发现， 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是默认的排列方式，根据你设置的元素横向从最左往右排列，

    1. <style>
    2.   .test {
    3. 			display: flex;
    4. 			flex-direction:row;
    5. 		}
    6. style>
    7. 	<body>
    8. 		<form>
    9. 			<div class="test">
    10. 				账号<input type="text" name="tex"/>
    11. 			div>
    12. 			<div class="test">
    13. 				密码<input type="password" name="pass"/>
    14. 			div>
    15. 		form>
    16. 	body>

    显示效果：

    格式为：flex-direction:row 

    3.2row-reverse排列

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

    1. <style>
    2.   .test {
    3. 			display: flex;
    4. 			flex-direction:row-reverse;
    5. 		}
    6. style>
    7. 	<body>
    8. 		<form>
    9. 			<div class="test">
    10. 				账号<input type="text" name="tex"/>
    11. 			div>
    12. 			<div class="test">
    13. 				密码<input type="password" name="pass"/>
    14. 			div>
    15. 		form>
    16. 	body>

    显示结果：

    格式为：flex-direction:row-reverse 

    3.3column排列

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

    1. <style>
    2.   .test {
    3. 			display: flex;
    4. 			flex-direction:column;
    5. 		}
    6. style>
    7. 	<body>
    8. 		<form>
    9. 			<div class="test">
    10. 				账号<input type="text" name="tex"/>
    11. 			div>
    12. 			<div class="test">
    13. 				密码<input type="password" name="pass"/>
    14. 			div>
    15. 		form>
    16. 	body>

    显示效果：

    格式为：flex-direction:column 

    3.4column-reverse排列

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

    1. <style>
    2.   .test {
    3. 			display: flex;
    4. 			flex-direction:column-reverse;
    5. 		}
    6. style>
    7. 	<body>
    8. 		<form>
    9. 			<div class="test">
    10. 				账号<input type="text" name="tex"/>
    11. 			div>
    12. 			<div class="test">
    13. 				密码<input type="password" name="pass"/>
    14. 			div>
    15. 		form>
    16. 	body>

    显示效果：

    格式为：flex-direction:column-reverse

    4、flex的两种对齐方式

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>水平垂直居中title>
    6. 	head>
    7. 	<body>
    8. 		   <style>
    9. 				.for {
    10. 					display: flex;
    11. 					flex-direction: column;
    12. 					align-items: center;
    13.                     justify-content: center;
    14. 					margin: auto;
    15. 				}
    16. 		    style>
    17. 			<body>
    18. 				<div class="for">
    19. 				<p>真正的交情交的是内心而非脸色不必在意人与人之间的表面情谊p><br />
    20. 	            <p>至交之人不需要，泛交之人用不着。p>
    21. 				div>
    22. 			body>
    23. 	body>
    24. html>

    实现效果：

    5、列表

    5.1列表的用法

    nav是导航栏的意思在最外层，li是用来定义列表的，在 HTML 中

  • 标签是用来定义列表的，使用
  • 标签定义的列表可以是个无序列表也可以是有序列表。以下展示的是有序表：

    1. <nav>
    2. 	<ul>
    3. 	    <li>主页li>
    4. 	    <li>学校概况li>
    5. 	    <li>教学科研li>
    6. 	    <li>招生就业li>
    7. 	    <li>联系方式li>
    8. 	ul>
    9. nav>

    实现效果：

    5.2列表超链接的用法

    标签定义超链接，用于从一个页面链接到另一个页面。 元素最重要的属性是 href 属性，它指示链接的目标。比如：文本或图像

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

     实现结果：

    6、弹性盒子实现导航栏

    6.1html源码 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>弹性盒子设置导航栏title>
    6. 	head>
    7. 	<style>
    8. 		* {
    9. 			list-style: none;
    10. 			margin: 0;
    11. 			padding: 0;
    12. 			text-decoration: none;
    13. 		}
    14. 		.nav {
    15. 			width: 100%;
    16. 			height: 60px;
    17. 			line-height: 50px;
    18. 			font-size: 20px;
    19. 			margin: 0 auto;
    20. 			text-align: center;
    21. 			background: chocolate;
    22. 			color:white;
    23. 		}
    24. 		.nav ul {
    25. 			padding-left: 20px;
    26. 			padding-right: 20px;
    27. 			background: orange;
    28. 		}
    29. 		.nav li.move {
    30. 			background: #74BE23;
    31. 		}
    32. 		.nav a {
    33. 			display: block;
    34. 			width: 60px;
    35. 			color: #fff;
    36. 			padding: 0 15px;
    37.         }
    38. 		.nav li:hover {
    39. 			border-bottom: 3px solid yellow;
    40. 		}
    41. 		.nav li:hover a {
    42. 			color: #74BE23;
    43. 			background: whitesmoke;
    44. 		}
    45. 		
    46. 		.nav ul {
    47. 			display: flex;
    48. 			flex-direction: row;
    49. 			padding-left: 20px;
    50. 			padding-right: 20px;
    51. 			background: orange;
    52. 		}
    53. 		@media all and (max-width: 600px) {
    54. 			.nav ul {
    55. 				flex-direction: column;
    56. 				padding: 0;
    57. 			}
    58. 			
    59. 			.nav a {
    60. 				width: 100%;
    61. 				text-align: center;
    62. 				padding: 10px;
    63. 				border-top: 1px solid rgba(255,255,255,0.3);
    64. 				border-bottom: 1px solid rgba(0,0,0,0.1) ;
    65. 		    }
    66. 			
    67. 			.nav list-of-type a {
    68. 				border-bottom: none;
    69. 			}
    70. 		}
    71. 	style>
    72. 	<body>
    73. 		<nav class="nav">
    74. 			<ul >
    75. 				<li class="move"><a href="#">主页a>li>
    76. 				<li><a href="#">图片a>li>
    77. 				<li><a href="#">视频a>li>
    78. 				<li><a href="#">学术a>li>
    79. 				<li><a href="#">词典a>li>
    80. 				<li><a href="#">更多a>li>
    81. 			ul>
    82. 		nav>
    83. 	body>
    84. html>

    7、表单实现留言框

    7.1html源码 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>弹盒子制作留言板title>
    6. 		<link rel="stylesheet" href="../css/task_twenty_three.css"/>
    7. 	head>
    8. 		<form class="for">
    9. 			<div class="groupby">
    10. 				<label for="e-mail" class="label">邮箱label>
    11. 				<input type="email" name="e-mail"placeholder="请输入你的邮箱"/>
    12. 			div>
    13. 			<div class="groupby">
    14. 				<label for="name" class="label">姓名label>
    15. 				<input type="text" name="name"placeholder="请输入你的姓名"/>
    16. 			div>
    17. 			<div class="groupby">
    18. 				<label for="message" class="label">留言内容label>
    19. 				<textarea name="message" placeholder="请输入你的留言内容">textarea>
    20. 			div>
    21. 			<div class="groupby">
    22. 				<label for="submit" class="label">label>
    23. 				<button name="submit">提交button>
    24. 			div>
    25. 		form>
    26. 	body>
    27. html>

    7.2css源码 

    1. .groupby {
    2. 	display: flex;
    3. 	margin-bottom: 15px;
    4. }
    5. .groupby label {
    6. 	flex: 1 0 40px;
    7. 	max-width: 200px;
    8. 	align-self: center;
    9. 	padding-right: 15px;
    10. }
    11.  
    12. .groupby input,
    13. .groupby textarea {
    14. 	flex: 6 0 400px;
    15. 	height:50px;
    16. 	
    17. }
    18.  
    19. .groupby button {
    20. 	margin-left: auto;
    21. }
    22.  
    23. .for {
    24. 	border: 2px solid black;
    25. 	padding: 60px;
    26. 	
    27. }
    28.  
    29. .groupby input,
    30. .groupby textarea {
    31. 	flex: 5 0 200p15
    32. 	padding: 8px 16px;
    33. 	font-size: 15px;
    34. 	line-height: 6;
    35. 	background-color: whitesmoke;
    36. 	border: 1.5px solid #ced4da;
    37. 	font-family: inherit;
    38. }
    39.  
    40. .groupby button {
    41. 	margin-left: auto;
    42. 	padding: 8px 16px;
    43. 	color: #fff;
    44. 	background: #333;
    45. 	cursor: pointer;
    46. }

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

     Never Give Up

  • 相关阅读:
    5. Layui数据表格的快速使用
    九、Sentinel熔断与限流
    Linux网络：数据链路层 | 以太网帧 | MAC地址 | MTU | ARP协议 | DNS | ICMP协议 | NAT技术
    基于HTML5+JavaScript实现的网页录屏器设计
    项目交互-选择器交互
    微服务--数据一致性
    Node.js知识点总结：从入门到入土
    特步与AWS合作，“跑”出行业全球品牌发展新“配速”
    linux设备模型：sysfs(kobject)解析
    图像的IO操作
  • 原文地址：https://blog.csdn.net/weixin_64916311/article/details/127966461