为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 多行文本不适合用一列布局
    查看全部
    0 采集 收起 来源:一列布局

    2016-02-29

  • 布局左右方框 用.left{ width:200px ;position:absolute;left:0;}和.right{margin-left:210px;}很容易布局稳定的左右方框。
    查看全部
    0 采集 收起 来源:编程挑战

    2016-02-29

  • - 宽度自适应:maigin:0 auto - 采用设置position为absolute的方法来实现 左侧固定宽度,右侧自适应大小的需求时,应该设置他们的父容器为relative方式,否则top的0点为左上角而不是父容器的左上角。当然也可以不设置,那样的话top值就应该为div标签top的高度,也可实现相同的效果。 - 右侧先加载则应该把right div标签放在left前,符合文件从上至下的读取加载的顺序。 - 兼容IE6不能用浮动
    查看全部
    0 采集 收起 来源:编程挑战

    2016-02-29

  • margin的属性简写顺序是 上 右 下 左。
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-29

  • 三列布局样式: div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc;position:absolute;left:0; top:0} .main{ height:600px;background:#9CF;margin:0 310px 0 310px;} .right{ height:600px; width:200px; position:absolute;right:0; top:0;background:#FCC;}
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-29

  • clear:both; //清除两边元素的浮动对他的影响 overflow: hidden; // 用在浮动元素本身清除对父元素的影响
    查看全部
    0 采集 收起 来源:实践题

    2016-02-29

  • body{ margin:0; padding:0;}<br> .left{width:200px; height:500px; position:absolute; left:0; top:0;background:red;}<br> .main{height:500px; margin:0 310px 0 210px;background:yellow;}<br> .right{width:300px; height:500px; position:absolute; right:0; top:0;background:blue;}
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 清除元素:1.clear:both;2.overflow:hidden
    查看全部
    0 采集 收起 来源:实践题

    2016-02-28

  • clear:both 清楚浮动
    查看全部
    0 采集 收起 来源:实践题

    2016-02-26

  • 中间那个竖着的红的没想出来怎么弄?
    查看全部
    0 采集 收起 来源:编程挑战

    2016-02-26

  • 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 作者:张秋怡 链接:https://www.zhihu.com/question/24529373/answer/29135021 来源:知乎 脱离文档流, 也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
    查看全部
    0 采集 收起 来源:评测题目

    2016-02-26

  • ①float会改变display类型,right浮动会造成宽度自适应问题。因此,right不能浮动。 ②又因为先加载right,所以,left浮动无法实现目标效果。 ③既然浮动模型不能使用,那么只能使用layer模型,用position:absolute+margin的方法进行布局。 ④最后,还想到一种方法,嵌套table标签;这样语义化太差,而且很麻烦。 ⑤一定还有其他方法。。。
    查看全部
    1 采集 收起 来源:编程挑战

    2016-02-26

  • 三列布局中间自适应 .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .main{height:600px;background:#9fc;margin:0 310px 0 210px;} .right{width:300px;height:600px;background:#fcc;position:absolute;right:0;top:0;}
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-26

  • 布局实际上市块与块之间的关系,它们存在于三种状态: ①块挨着块; ②块嵌套着块; ③块压着块。
    查看全部
    0 采集 收起 来源:混合布局

    2016-02-26

  • position:relative 与 position:absolute 配合使用真的很不错
    查看全部
    1 采集 收起 来源:编程练习

    2016-02-26

举报

0/150
提交
取消
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!