学习完成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布局相关的知识 ...
随机推荐
- 【NOIP模拟题】小象涂色（概率+期望+递推）
表示数学是个渣... 其实只需要推出每个箱子k次以后的颜色为i的概率就能算出期望了.. 对于区间[l, r]的箱子因为是任意颜色且任意取,所以概率分别为1/c和1/2,那么整体概率就为这两个的乘积.根 ...
- media wiki run on nginx
1. 环境安装: nginx安装 nginx-1.5.7 php安装 PHP 5.4.10 (cli) (built: Jul 30 2014 16:45:08) mysql安装 Ver 14.14 ...
- c#方法生成mysql if方法(算工作日)
public static string retunSQl(string s,string e){ return @"IF ( "+s+ ">" +e+ ...
- 搭建 Docker-Registry 私有仓库
官方已经提供了很多版本的 Linux 镜像,直接从官方仓库(Public Repositories)下载就可以了.如果考虑到安全性和速度,我们可能会想在自己局域网里架设一个私有仓库(Private R ...
- JSP页面的生命周期
JSP页面的生命周期:我们假设要访问的jsp页面是index.jsp.首先,用户发出请求index.jsp:服务器会判断是否是第一次请求:如果是的话,JSP引擎会把该JSP文件转换成为一个Servle ...
- smarty 总结和分析
虽然smarty现在已经废弃不用,但是它的原理我们需要了解一下,这也是TP框架的一部分原理,它把前后端分离开,这样前端只需要写静态网页,后端只需要处理数据库和php文件就可以了,phpcms的思路也大 ...
- [SharePoint 2010] Visual Studio 2010內撰寫視覺化WebPart超簡單
新一代的Visual Studio 2010對於SharePoint 2010的專案撰寫,有非常另人讚賞的改進. 以往寫一個WebPart要搞好多雜七雜八的步驟,也要硬寫HTML輸出,當然有人說可以寫 ...
- LeetCode 笔记系列一 Median of Two Sorted Arrays
题目:There are two sorted arrays A and B of size m and n respectively. Find the median of the two sort ...
- js 连等赋值 分析
JavaScript权威指南-第6版 4.11 赋值表达式 提到了连等赋值的情况,但是解释的不够详细,所以在此总结下: 首先看书上最重要的一句话: 这句话总结下就是: A = B ; // 整个表达式 ...
- SharePoint PerformancePoint开发实例
前言 由于工作的原因,有一段时间没有发新的随笔了,最近使用了SharePoint PerformancePoint做了一些报表,与大家分享经验. 本文完全原创,转载请说明出处,希望对大家有用. 阅读目 ...