慕课笔记利用css进行布局【三列布局】
三个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的宽度
慕课笔记利用css进行布局【三列布局】的更多相关文章
- CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- 慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> bo ...
- 慕课笔记利用css进行布局【混合布局练习】
通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...
- 慕课笔记利用css进行布局【混合布局】
<html> <head> <title>混合布局学习</title> <style type="text/css"> ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
- css之页面三列布局之左右两边宽度固定,中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
随机推荐
- 2017 JUST Programming Contest 3.0 K. Malek and Summer Semester
K. Malek and Summer Semester time limit per test 1.0 s memory limit per test 256 MB input standard i ...
- iOS开发之邮件发送代码
邮件发送功能是由MessageUI Framework提供的,这个框架是iPhone sdk中最简单的框.由一个类.一个视图控制器,一个protocol组成. 一.创建视图控制器: MFMailCom ...
- Normal equations 正规方程组
前面我们通过Gradient Descent的方法进行了线性回归,但是梯度下降有如下特点: (1)需要预先选定Learning rate: (2)需要多次iteration: (3)需要Feature ...
- [转]MySQL游标的使用
转自:http://www.cnblogs.com/sk-net/archive/2011/09/07/2170224.html 以下的文章主要介绍的是MySQL游标的使用笔记,其可以用在存储过程的S ...
- 对于JS == 运算的一些理解
声明:本文是摘自一篇文章,放在这只为做为一个笔记能更好学习. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性” ...
- JS filters-ul li简单过滤
功能要求:在input中输入字母,显示ul li中匹配的元素,隐藏不匹配的 <!DOCTYPE html> <html> <head> <meta chars ...
- EL表达式、JSTL
EL表达式 一.简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. ...
- 锐动SDK针对游戏直播提出的解决方案
方案架构 PC端视频直播与录播功能为游戏厂商宣传,玩家个人秀,大型电竞赛事提供完美的技术解决方案. 直播形式灵活多变不,同音源的选择,画面切换,游戏中嵌入摄像头丰,富解说画面.突出主播个人魅力与粉丝形 ...
- scala打印error,debug,info
1.以wordcount为例 package org.apache.spark.examples import org.apache.spark.examples.SparkPi.logger imp ...
- XCode的debug断点调试
debug 流程控制 当你通过 Xcode 的源码编辑器的侧边槽 (或者通过下面的方法) 插入一个断点,程序到达断点时会就会停止运行. 调试条上会出现四个你可以用来控制程序的执行流程的按钮. 从左到右 ...