学习完成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布局相关的知识 ...
随机推荐
- MyBatis的优缺点
优点: 1.简单易学 mybatis本身就很小且简单.没有任何第三方依赖,最简单安装只要两个jar文件+配置几个sql映射文件易于学习,易于使用,通过文档和源代码,可以比较完全的掌握它的设计思路和实现 ...
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
- java---sychronized的深入理解
synchronized 关键字,代表这个方法加锁,相当于不管哪一个线程A每次运行到这个方法时,都要检查有没有其它正在用这个方法的线程B(或者C D等),有的话要等正在使用这个方法的线程B(或者C D ...
- 【BZOJ】1662: [Usaco2006 Nov]Round Numbers 圆环数（数位dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=1662 这道题折腾了我两天啊-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 果然 ...
- “几何画板+MathType”双11组合特价，优惠多多
工欲善其事,必先利其器!几何画板和MathType作为数学老师必备工具,在数学教学中起着非常重要的作用.为回馈老师们做出的伟大贡献,在双11狂欢节期间,MathType和几何画板迎来史上第一次组合特惠 ...
- Maven创建一个Web项目
我们可以通过命令行或者直接使用Eclipse创建一个maven webapp项目:通过命令行创建在命令行中输入如下格式的命令将会创建一个新的maven webapp项目:mvn archetype:g ...
- sql列转行查询
test表: 执行列转行sql: select student, sum(case Course when '语文' then Score else null end) 语文, sum(case Co ...
- Linux 下8种优秀的屏幕录制机
导读 屏幕录制机已经成为常见的和良好的实践来记录一个重要桌面会话,例如,你想玩一个难度较大的游戏,并且向记录是如何完成的,或者你打算创建一个视频教程,入门文章或指南,或任何其他活动和记录你的桌面会话, ...
- codevs 5962 [SDOI2017]数字表格
输入描述 Input Description [题解] 对于蓝色部分预处理前缀积. 然后在用除法分块搞一下. O(Q*sqrt(min(n,m))*logn+nlogn) #include<c ...
- Android遍历SqlLite cursor对象：
//1. Cursor c =...; for(c.moveToFirst(); ! c.isAfterLast(); c.moveToNext()){ //c… } //2. Cursor curs ...