慕课笔记利用css进行布局【三列布局】

最新推荐文章于 2021-02-19 15:34:40 发布

weixin_30698527

最新推荐文章于 2021-02-19 15:34:40 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/soulsjie/p/7255683.html

版权

三个div中间自适应，两侧固定大小

<html>
	<head>
		<title>三列布局</title>
		<style type="text/css">
			body{margin:0;padding:0;text-align:center}
			/*三列的布局样式*/
				/*position:absolute定位*/
			.left2{width:200px;height:500px;background:#f0f;position:absolute;left:0;top:0}
			.middle{height:500px;background:#f00;margin:0 310px 0 210px}
			.right2{width:300px;height:500px;background:#ff0;position:absolute;right:0;top:0}
		</style>
	</head>
	<body>

	 <div class="left2">200px</div>
	 <div class="middle">ssssssssssssssssssss 三列的布局样式，两侧固定像素，采用定位的方式</div>
	 <div class="right2">300px</div>
	</body>
</html>

效果如下：

关键知识点：

利用position:absolute定位，中间div不设置宽度，中间div的margin值取决于两侧div的宽度

转载于:https://www.cnblogs.com/soulsjie/p/7255683.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30698527

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

三栏布局学习笔记

Zachery Wu

11-18

1193

三栏布局总结三栏布局一般指的是左右侧固定宽度，中间自适应宽度的布局。首先想到的是最简单的也最容易实现的绝对定位布局。绝对定位布局基本思路：左右侧使用绝对定位固定，中间元素使用margin和两侧隔开距离。其实和之前的两列布局的思路是基本上一样的。都是使用脱离文档流配合上margin实现的。那么为什么这里不能使用float来脱离文档流实现呢。这是因为如果中间栏不浮动，左右栏浮动，那么浮动的两栏和中间栏是

HTML+CSS制作慕课网用户登陆界面

MockingBird

09-24

2324

（有空总结下知识，才开始接触前端）效果图代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕课网-登陆</title>

参与评论您还未登录，请先登录后发表或查看评论

网页布局基础（mooc）

weberry的博客

12-07

338

1. 当margin只有三个值时，分别代表 margin:上左右下；当margin有四个值时， margin:上右下左； 2. background添加背景图片 background:url(路径) 5px 10px no-repeat; 5px为距左的距离，10px为距上的距离。 3. img为行内元素，大多数表单元素为行内元素。 4. 为父级元素用margi

CSS定位（慕课网学习笔记）

莫安逸无风雪

10-26

1119

定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(静态定位、常规定位、自然定位) 作用使元素定位于常规/自然流中（块、行垂直排列下去，行内水平从左到右）特点 1、忽略top,bottom,left,right或者z-index声明...

【CSS基础笔记】两列、三列布局；水平居中；垂直居中

a108776623的博客

11-22

634

常见的两列布局：两列固定宽度：用一个父容器将两列包裹在内，对父标签设置固定宽度和overflow:hidden，再对两列设置固定像素宽度。两列自适应：将左右两列设置浮动，宽度属性设置为百分比形式，然后给受浮动影响的元素清除浮动。一侧固定一侧自适应：一侧设置固定宽度，并设置绝对定位，另一侧根据宽度设置margin。利用CSS3 flex属性。常见的三列...

慕课笔记利用css进行布局【一列布局】

weixin_30632089的博客

07-29

<html> <head> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*一列的布局样式*/ /*margin:0 auto使div居中*/ .top{w...

慕课笔记利用css进行布局【混合布局练习】

weixin_30698527的博客

07-29

通过学习div的布局，以一个简单的内容管理网站的布局为例子，用div+css进行简单的网页布局，加深学印象： <html> <head> <title>CSS+div布局学习</title> <style type="text/css"> body{margin:0;padding:0;text-align:...

慕课笔记利用css进行布局【两列布局】

weixin_30474613的博客

07-29

<html> <head> <title>两列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*两列的布局样式*/ /*float:left向左浮动*/ .content{wi...

慕课笔记利用css进行布局【混合布局】

weixin_30399871的博客

07-29

<html> <head> <title>混合布局学习</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} .top{height:50px;background:#00f;margin:0 auto} ...

【慕课网】Web学习笔记—CSS3 （四）布局模型，盒模型

qq_44228263的博客

02-19

304

【慕课网】Web学习笔记———CSS3 （三）【慕课网】Web学习笔记———CSS3 （四）CSS3布局模型流动模型浮动模型层模型 CSS3布局模型布局模型与盒模型一样都是 CSS3 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS3 布局样式或 CSS3 布局模板。如果说布局模型是本，那么 CSS3 布局模板就是末了，是外在的表现形式。 CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：流动模型

整理关于Bootstrap导航的慕课笔记

08-31

<li><a href="#">CSS3</a></li> ... ``` 为了标记当前选中的标签，只需在对应的`<li>`元素上添加`class="active"`。同时，若需要禁用某个标签，可以加上`class="disabled"`。 2. **胶囊形导航**（Pill ...

整理关于Bootstrap列表组的慕课笔记

08-30

Bootstrap列表组是前端开发中一个常用的组件，尤其在构建网页布局和交互时，它提供了简单且灵活的方式来展示信息。在Bootstrap框架中，列表组主要用于创建无序列表，呈现出一种更加美观和一致的视觉效果。本篇文章将...

基于水平井光纤应变的压裂裂缝长度反演模型及应用研究

10-17

内容概要：本文基于三维位移不连续边界元法建立了光纤应变计算模型，并构建了基于裂缝前缘光纤应变的裂缝参数反演模型。通过敏感性分析，探讨了光纤应变与裂缝长度、高度和宽度分布的关系，提出了一种利用光纤应变快速评估裂缝长度的方法，并验证了其在实际应用中的有效性。适合人群：从事压裂裂缝诊断的技术人员、科研人员和工程师。使用场景及目标：① 提供一种新的方法来评估压裂裂缝的长度，提高裂缝诊断的精度；② 在压裂施工过程中，实时监测裂缝长度变化，指导压裂工艺优化。其他说明：该研究不仅提高了压裂裂缝参数解释的准确性，还为现场工程师提供了实用的工具和技术支持。

毕业设计论文SpringBoot数码商城交易平台.docx

10-17

毕业设计论文

毕业设计论文SpringBoot网上水果超市.docx