<!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布局(左右浮动)的更多相关文章

  1. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  2. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  3. 前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...

  4. CSS布局中浮动问题的四种解决方案

    一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...

  5. css学习_div+css布局

    1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行  ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...

  6. 前端学习笔记--CSS布局--文件流定位

    1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  8. 前端学习笔记--CSS布局--盒子模型

    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:

  9. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

随机推荐

  1. php -- 修改字符串的编码格式

    网上的都是这样用的 $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为g ...

  2. QWidget切换

    QWidget切换,参考类:QstackedLayout,QStackedWidget,QTabWidget 一.Tab出现的位置 tabWidget.setTabPosition(QTabWidge ...

  3. 关于 Apache 的 25 个初中级面试题

    关于 Apache 的 25 个初中级面试题 出自:http://blog.jobbole.com/60471/

  4. ios开发之 -- UIView总结

    如果想调用某个类的某个方法可以写成这样,这个方法来自NSObject类 performSelector: performSelector:withObject: performSelector:wit ...

  5. mySubmit.js

    function mySubmit(theForm,url,result){ function default_callback(res){ result.html(res.info); if(res ...

  6. IOS内购支付服务器验证模式

    IOS 内购支付两种模式: 内置模式 服务器模式 内置模式的流程: app从app store 获取产品信息 用户选择需要购买的产品 app发送支付请求到app store app store 处理支 ...

  7. android开发环境之ADT安装，卸载，更新

    http://hj198703.iteye.com/blog/1316991   1.官网:http://developer.android.com/sdk/index.html2.ADT组件在线安装 ...

  8. pdb文件及引发的思考

    最初只想知道线上iis里需要不需要pdb文件,了解部分之后对于.net底层产生了浓厚的兴趣,看了一点点资料 资料来源: https://www.cnblogs.com/itech/archive/20 ...

  9. 数据集划分——train set, validate set and test set

    先扯点闲篇儿,直取干货者,可以点击这里. 我曾误打误撞的搞过一年多的量化交易,期间尝试过做价格和涨跌的预测,当时全凭一腔热血,拿到行情数据就迫不及待地开始测试各种算法. 最基本的算法是技术指标类型的, ...

  10. 05.Curator分布式锁

        锁:分布式的锁全局同步,这意味着任何一个时间点不会有两个客户端都拥有相同的锁. 1.可重入锁Shared Reentrant Lock     首先我们先看一个全局可重入的锁(可以多次获取,不 ...