浮动

最新推荐文章于 2023-03-25 16:12:57 发布
最新推荐文章于 2023-03-25 16:12:57 发布
阅读量73 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vayne_l/article/details/87781940
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.a1 {
				width: 100%;
				height: 68px;
				background: blue;
			}
			
			.a2 {
				width: 1116px;
				margin: auto;
				height: 68px;
				background: deepskyblue;
			}
			
			.a3 {
				width: 100%;
				height: 503px;
				background: gray;
			}
			
			.container{
				width: 1115px;
				margin: 0px auto;
				/*以上两行使固定宽度的块级元素水平居中*/
				background: lightblue;
				font-size: 0px;
			}
			/*.left,.center,.right{
				font-size: 14px;
				height: 500px;
				display: inline-block;
			}*/
			.common{
				font-size: 14px;
				height: 500px;
				/*display: inline-block;*/
				float: left;
			}
			.left{
				width: 400px;
				background: orange;
			}
			.center{
				width: 55px;
				background: #006400;
			}
			.right{
				width: 660px;
				background: lightcoral;
			}
			
			.a7 {
				width: 100%;
				height: 200px;
				background: black;
			}
			
			.a8 {
				width: 1116px;
				margin: auto;
				height: 200px;
				background: saddlebrown;
			}
			.myp{height: 503px;
				margin: auto;
			}
		</style>

	</head>

	<body>
		<!--头部开始-->
		<div class="a1">
			<div class="a2">
			</div>
		</div>
		<!--头部结束-->
		<!--中间内容开始-->
		<div class="a3">
			<div class="container">
				<div class="left common">left</div>
				<div class="center common">center</div>
				<div class="right common ">right</div>
			</div>
		</div>
		<!--中间内容结束-->
		<!--footer开始-->
		<div class="a7">
			<div class="a8"></div>
		</div>
		<!--footer结束-->
	</body>

</html>

 

Vayne_l
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 关于浮动
09-25
浮动是CSS布局中的一种关键技术，尤其在传统的网页设计中占据重要地位。它的主要作用是让元素在页面上脱离正常文档流并沿着特定方向移动，从而实现文本环绕效果或其他复杂的布局结构。这一概念起源于印刷设计，其中...
CSS浮动
2301_79341065的博客
07-18 812
css浮动，概念
css 浮动
WJXYCWCXY的博客
03-25 1008
float浮动，浮动的影响及解决方法，万能解决浮动问题
浮动IP
python基础
11-18 1106
在高可用集群环境中，一般都需要使用浮动IP来实现web高可用（High Availability）。 浮动IP可以解决就是宕机产生的危险： 就是主机方式是集群，即两台主机以上。每台机器除了自己的实IP外，会设置一个浮动IP，浮动IP跟着机器的服务绑在一起的。即应用服务在哪台机器上启动，浮动IP也在这台机器上激活，这台机器就有两个IP地址。对于客户端它只需访问浮动IP即可。即使主机端的机器发生切换，...
HTML 浮动
LxLzhz的博客
07-26 1994
HTML 浮动 浮动的定义： 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。 浮动框会脱离文档（ DOM ）流，（也就是浮动框会脱离原来的界面，浮动到原来界面的上方界面）父级元素会表现出浮动框不存在一样现象。 元素一旦浮动之后，后面的元素就会占据前面元素的位置 元素浮动之后 的确可以脱离文本文档流，所以就会有字围效果 浮动的特点： 浮动和清除浮动成对出现 清除浮动一般...
CSS 浮动
m0_68259809的博客
07-08 2369
本文主要介绍CSS浮动及PS切图相关知识。
浮动布局
胖达cd的博客
08-06 2486
什么是浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 对于新手 CSS 开发人员，尤其前端 Web产品开发人员，float 属性可以说是用得最频繁的布局属性了，所以他们很可能会对 float属性有误解，认为 float 属性就是为各种块状布局而设计的，实际上不是的。浮动的本质就是为了实现文字环...
css浮动
xu191212的博客
09-26 706
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。1.1、浮动的概念浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。1.2、浮动属性floatleft 左浮动right 右浮动float:none 不浮动(默认值)1.3、浮动的基本特性可以使块元素在一行排列脱离文档流提升层级。
清除浮动
Liyunhao_haoge的博客
10-06 893
清除浮动 目的:由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动,准确来说,是清除浮动后造成的影响. 清除浮动的本质 清除浮动主要为了解决父元素因为子级浮动引起内部高度为0的问题. 原因:浮动元素是不占有位置的,如果父级元素没有高度的话,就会引起高度塌陷; 在CSS,clear属性用于清除浮动,其基本语法格式如下: 选择器 ...
js浮动图片的动态效果
10-27
JS浮动图片的动态效果 在本文中，我们将介绍JS浮动图片的动态效果实例，该效果可以在网页上实现图片的浮动和移动。该实例可以在网页上添加丰富的视觉效果，提高用户体验。 首先，让我们来了解一下JS浮动图片的动态...
css浮动，左右浮动和去除浮动
11-12
浮动f
jQuery浮动弹性菜单效果特效代码
03-20
《jQuery浮动弹性菜单效果特效代码解析》 在网页设计中，菜单是用户与网站交互的重要途径，一个良好的菜单设计能够提升用户体验，使用户更轻松地找到所需信息。jQuery作为一个强大的JavaScript库，为创建动态和交互...
JavaScript练手项目.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
【轨迹优化】基于matlab脉冲干扰下高超声速飞行器轨迹优化【含Matlab源码 7221期】.mp4
08-15
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
基于springboot的厨艺交流平台 源码+数据库（毕业设计）
最新发布
08-15
基于Vue.js和SpringBoot的厨艺交流平台是一个功能丰富的在线社区，旨在为烹饪爱好者提供一个分享和学习烹饪技巧的平台。该平台分为管理后台和用户网页端，支持管理员和普通用户两种角色。管理后台提供对菜谱分类、菜谱信息、食材信息、商品信息和美食日志模块的全面管理功能，包括添加、编辑、删除和查询等操作。用户网页端则为用户提供了一个友好的界面，可以浏览和搜索各种菜谱，查看食材和商品信息，发表自己的美食日志，与其他用户互动交流。整个平台采用现代化的前端技术和后端框架，保证了良好的用户体验和高效的数据处理能力。 录屏：https://www.bilibili.com/video/BV1uz42197zu 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
超声波肾脏结石分类数据集9416张2类别.7z
08-15
数据集类型：图像分类用，不可用于目标检测无标注文件 数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)：9416 分类类别数：2 类别名称:["normal","stone"] 每个类别图片数： normal 图片数：4414 stone 图片数：5002 重要说明：暂无 特别声明：本数据集不对训练的模型或者权重文件精度作任何保证，数据集只提供准确且合理分类存放 更多信息：https://blog.csdn.net/FL1623863129/article/details/141230956
KH Coder新手教程
08-15
KH Coder新手教程
理解并掌握div+css浮动与闭合浮动的技巧
浮动是一种强大的布局工具，能够方便地实现元素的左右对齐，但在实际使用中，它也带来了一些问题，特别是在旧版本的Internet Explorer（如IE6-7）中，浮动可能导致页面高度塌陷（即父元素无法自动扩展以适应浮动子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值