学习完成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布局相关的知识 ...
随机推荐
- 【vijos】1006 晴天小猪历险记之Hill（dijkstra）
https://vijos.org/p/1006 连边后跑点权的最短路 注意连边的时候左端点可以连到下一行的右端点,右端点可以连到下一行的左端点 #include <cstdio> #in ...
- 【BZOJ】1621: [Usaco2008 Open]Roads Around The Farm分岔路口（dfs）
http://www.lydsy.com/JudgeOnline/problem.php?id=1621 这题用笔推一下就懂了的.... 当2|(n-k)时,才能分,否则不能分. 那么dfs即可.. ...
- php的form中元素name属性相同时的取值问题
php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...
- matlab判断图像是彩色图还是灰度图
matlab怎样看图像是彩色还是灰度_莹莹_新浪博客 http://blog.sina.com.cn/s/blog_76088a1f0101diq0.html 解决一: isrgb(A) 如果A是RG ...
- OSG简单测试框架
#include <osgDB/ReadFile> #include <osgDB/FileUtils> #include <osg/ArgumentParser> ...
- Android无线测试之—UiAutomator UiScrollable API介绍六
向前与向后滚动API 一.向前与向后滚动相关API 返回值 API 描述 boolean scrollBackward(int steps) 自动以步长向后滑动 boolean scrollBackw ...
- Android 蓝牙学习
Android 蓝牙学习 学习缘由 上个礼拜公司要开发个简单的五子棋游戏!其中一个需求就是支持蓝牙对战!所以苦逼的我学习蓝牙方面的知识了! 简介 Bluetooth是目前使用最广泛的无线通讯协议,近距 ...
- java利用反射机制获取list中的某个字段并以list形式返回
public static<T> List<Object> listToList(Collection<T> list,String fieldName) thro ...
- pageResponse - 让H5适配移动设备全家
http://www.cnblogs.com/PeunZhang/p/4517864.html
- response.setContentType()的String参数及对应类型(转)
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. 例如web浏览器就是通过MI ...