学习完成CSS布局(左右浮动)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>学习完成布局</title>
<style type="text/css">
#kaishi{
width: 980px; /* width宽度*/
background: gray;
}
#header{
height: 200px; /*height高度*/
background: red;
}
#main{
height: 600px;
background: chartreuse;
}
#lside{
width: 700px;
float: left; /*浮动左*/
height: 600px;
background: blue;
}
#rside{
width: 300px;
float: right; /*浮动右*/
height: 600px;
background: coral;
}
#footer{
height: 100px;
background: darkgoldenrod;
}
</style>
</head>
<body>
<div id="kaishi">
<div id="header"></div>
<div id="main">
<div id="lside"></div>
<div id="rside "></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
学习完成CSS布局(左右浮动)的更多相关文章
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习(20)~css布局(十三)
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
- CSS布局中浮动问题的四种解决方案
一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...
- css学习_div+css布局
1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行 ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- 前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
随机推荐
- STL的map容器将第3个模板参数设为less_equal或greater_equal会怎样？
最近都在学Linux系统编程,用C就足矣,有段时间没碰C++了,于是实现些算法练手. 实现多项式乘法的时候发现有几项没有合并同类项,最终调试到这一步时发现了问题. res是map类型,用find查找k ...
- 【BZOJ】1693: [Usaco2007 Demo]Asteroids（匈牙利）
http://www.lydsy.com/JudgeOnline/problem.php?id=1693 裸匈牙利.. #include <cstdio> #include <cst ...
- hdu 2717:Catch That Cow（bfs广搜，经典题，一维数组搜索）
Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- mysql解决乱码问题
进入mysql(mysql -u root -p),查看当前数据库字符集(status;) 刚开始是latin1,所以乱码. vim /etc/my.cnf 两个节点添加如下: [client]def ...
- Objective-C 成员变量
成员变量的访问权限 Objective-C中的成员变量有以下三种属性 public(外部及其子类可访问) protected(子类可访问,外部不可访问) private(外部及其子类不可访问) 默认情 ...
- 学习《深入理解C#》—— 泛型 (第三章3.1---3.2)
泛型是什么? 泛型(generic)是C# 2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定 ...
- Spring学习笔记--自动检测
要使用自动检测,我们需要用到<context:annotation-scan>标签.<context:annotation-scan>元素除了完成与<context:an ...
- 那个你经常用的abs函数（取绝对值）真的总是返回非负数吗？
前几天在牛客网看到一道关于abs()函数返回值的题目,见下图,当时还没反应过来,第一反应是:自从我开始学C语言,就知道它是用来求int数的绝对值的,返回值当然是0或者正数啊,一看答案就是A. 后来思来 ...
- 【BZOJ4606】[Apio2008]DNA DP
[BZOJ4606][Apio2008]DNA Description 分析如DNA序列这样的生命科学数据是计算机的一个有趣应用.从生物学的角度上说,DNA 是一种由腺嘌呤.胞嘧啶.鸟嘌呤和胸腺嘧啶这 ...
- 在Mac osx使用ADT Bundle踩过的坑
前言 本篇博客整理一下笔者在Mac下使用ADT Bundle踩过的坑,Google现在也不支持Eclipse了,开发者也到了抛弃Eclipse的时候,但考虑到大部分Java的开发者还是比较习惯与Ecl ...