前端学习笔记-08元素的浮动布局

其他 2021-03-05 15:41:09 阅读次数: 0
  1. 设置容器之间横向排列-浮动布局
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#green{
     
     
				width: 100px;height: 100px;background-color: aquamarine;float: left;
			}
			#red{
     
     
				width: 200px;height: 100px;background-color: #FF0000;float: left;
			}
			#blue{
     
     
				width: 100px;height: 100px;background-color: skyblue;float: left;
			}
		</style>
	</head>
	<body>
		<div id="green">
			
		</div>
		<div id="red">
			<p>不得不说莱昂纳多年轻时候是真的帅，秒杀现在的一批小鲜肉。
			只是人到中年的额莱昂纳多也变身油腻的中年男子，让粉丝们心碎了一地！
			不过莱昂纳多的近照流出，真的是瘦了好几圈啊，颜值立马回到年轻时候，
			网友们也是纷纷评论眼睛一闭一睁，莱昂纳多就跟换了个头是的！网友们也是十分幽默啊
			</p>
		</div>
		<div id="blue">
			
		</div>
	</body>
</html>
  1. 设置后增加的容器不受前面元素浮动的影响

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
     
     
				margin: 0;
			}
			#green{
     
     
				width: 20%;height: 200px;background-color: aquamarine;float: left;
			}
			#red{
     
     
				width: 60%;height: 200px;background-color: #FF0000;float: left;
			}
			#blue{
     
     
				width: 20%;height: 200px;background-color: skyblue;float: left;
			}
			#gray{
     
     
				width: 100%;height: 200px;background-color: darkgray;
			}
			#outter{
     
     
				height: 200px;border: dashed #2F4F4F;
			}<!--此处用于包裹的父元素需要设置高度，不然默认高度为0；或者可以设置overflow属性为auto-->
		</style>
	</head>
	<body>
		<div id="outter">
			<div id="green">
				
			</div>
			<div id="red">
				<p>不得不说莱昂纳多年轻时候是真的帅，秒杀现在的一批小鲜肉。
				只是人到中年的额莱昂纳多也变身油腻的中年男子，让粉丝们心碎了一地！
				不过莱昂纳多的近照流出，真的是瘦了好几圈啊，颜值立马回到年轻时候，
				网友们也是纷纷评论眼睛一闭一睁，莱昂纳多就跟换了个头是的！网友们也是十分幽默啊
				</p>
			</div>
			<div id="blue">
				
			</div>
		</div>
		
		<div id="gray">
			
		</div>
	</body>
</html>
  1. 制作聊天界面页面-设置元素之间不受浮动影响

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
     
     
				margin: 0;
			}
			ul{
     
     
				width: 300px;height:500px;border: solid #A9A9A9;
			}
			li{
     
     
				max-width: 150px; width: auto; line-height:25px;clear: both;border: solid green;background-color: green;
			}
			#a,#c,#e,#g,#i{
     
     
				float: left;
			}
			#b,#d,#f,#h,#j{
     
     
				float: right;
			}
		</style>
	</head>
	<body>

			<ul>
				<li id="a">Hi</li>
				<li id="b">Hi!</li>
				<li id="c">How are you recently?</li>
				<li id="d">I'm fine. You.</li>
				<li id="e">Just so so.</li>
				<li id="f">I have been working on a new project this week.</li>
				<li id="g">Wow. Good!</li>
				<li id="h">Not really.</li>
				<li id="i">Why?</li>
				<li id="j">There is so much work to do. And I'm too tired for that.</li>
			</ul>

		
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/KathyLJQ/article/details/113920632
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022