为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
如何用CSS进行网页布局_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 如何用CSS进行网页布局

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
最热 最新
  • 慕九州3774293
    文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
    查看全部
    0 采集 收起 来源：评测题目

    2018-03-22

  • 慕九州3774293
    二、两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式
    查看全部
    0 采集 收起 来源：二列布局

    2018-03-22

  • 慕九州3774293
    body{margin:0;parding:0;}清除默认样式
    查看全部
    0 采集 收起 来源：一列布局

    2015-10-19

  • 慕九州3774293
    1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果
    查看全部
    0 采集 收起 来源：内容简介

    2015-10-19

  • 一件小事
    css 浮动+定位
    查看全部
    0 采集 收起 来源：内容简介

    2015-10-18

  • 阿童木23
    三列布局要点：1.左右两栏绝对定位，相对于body 2.中间一栏设置margin左右的值分别为左右两栏的width
    查看全部
    0 采集 收起 来源：三列布局

    2015-10-18

  • Zohar 02:36
    三列布局
    查看全部
    0 采集 收起 来源：三列布局

    2015-10-18

  • 毛草英
    文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位
    查看全部
    0 采集 收起 来源：评测题目

    2015-10-17

  • 蝶月缺
    浮动和绝对定位可以使元素脱离文档流
    查看全部
    0 采集 收起 来源：评测题目

    2015-10-17

  • qq_破茧_0
    positoin:absolute;left:0;左侧 positoin:absolute;right:0;右侧
    查看全部
    0 采集 收起 来源：编程练习

    2015-10-17

  • qq_破茧_0
    限制左右在父级框中 .main{} .left{float:left;} .right{float:right;} <div class="main"> <div class="left" /> <div class="right" /> </div>
    查看全部
    0 采集 收起 来源：二列布局

    2018-03-22

  • qq_破茧_0
    margin;0 auto水平居中
    查看全部
    0 采集 收起 来源：编程练习

    2015-10-17

  • 慕雪1059096
    三列布局：不能使用float，左右两列绝对定位，分别靠左和靠右，中间列为相对定位，左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。
    查看全部
    0 采集 收起 来源：三列布局

    2015-10-17

  • cheriseNote
    123
    查看全部
    0 采集 收起 来源：编程挑战

    2015-10-16

  • cheriseNote
    123
    查看全部
    0 采集 收起 来源：实践题

    2015-10-16

首页上一页231232233234235236237下一页尾页

举报

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

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

查看已购买的课程