学习完成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中sqlSessionFactory机制原理
对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章将通过以下几点详细介绍MyBatis的初始化过程. 1.MyBatis的初始化做了什么 2. MyBatis基于XML配置 ...
- 在J2EE中属于Web层的组件有(选择1项)
在J2EE中属于Web层的组件有(选择1项) A. HTML B. EJB C. Applet D. JSP 解答:D
- 【BZOJ】1042: [HAOI2008]硬币购物（dp+容斥原理）
http://www.lydsy.com/JudgeOnline/problem.php?id=1042 一开始写了个O(nv)的背包,果断tle... 看了题解,,好神..用了组合数学中的多重集合方 ...
- 审批流_state_selection 相关用法
审批流 _state_selection 前部分参数代表:新加的状态 后部分参数代表:原有系统的状态
- 《linux系统及其编程》实验课记录（四）
实验4:组织目录和文件 实验目标: 熟悉几个基本的操作系统文件和目录的命令的功能.语法和用法, 整理出一个更有条理的主目录,每个文件都位于恰当的子目录. 实验背景: 你的主目录中已经积压了一些文件,你 ...
- Visual Studio Code调试node.js：无法在PATH上找到运行时的node
首先,环境变量Path中加入nodejs的路径: 验证nodejs是否已经加入环境变量: 接着,重新启动Visual Studio Code, 试一下,是不是好了~ 附录:Visual Studi ...
- HDU 1058 Humble Numbers (动规+寻找丑数问题)
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- 编程之美 set 8 区间重合判断
Leetcode 上有连续的两道题, 一个是 insert interval, 一个是 merge interval, 其中 insert interval 是 merge interval. 其中 ...
- IOS 开发之--获取真机的deviceToeken
获取真机的devicetoken的方法: #pragma mark 注册APNs成功并上报DeviceToken - (void)application:(UIApplication *)applic ...
- JB开发之问题汇总 [jailbreak，越狱技术]
1.升级到Mac 10.9.1,Xcode 升级到5出现的问题: 1)升级前要做的事情: ①升级/重新安装iOSOpenDev,在终端输入 xcode-select --switch (xcode_d ...