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

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 清除浮动:clear:both 居中显示:margin:0 auto 向左浮动:float:left 向右浮动:float:right
    查看全部
    0 采集 收起 来源:实践题

    2017-06-29

  • 根据这些原理 丰富元素内容。
    查看全部
    0 采集 收起 来源:混合布局

    2017-06-29

  • 添加position:absolute;left:0;top:0;显示使left绝对定位向左。 添加margin:0 310px 0 210px;不添加width,使宽度自适应。左右宽度添加10px使与左右间隔10px空位。 添加position:absolute;right:0;top:0;显示使right绝对定位向右.
    查看全部
    0 采集 收起 来源:编程练习

    2017-06-29

  • 三列布局 1.三列固定宽度:使用浮动float就可以实现,前两列左浮动float:left;三列设置左右浮动都可以。 2.左右两列固定,中间自适应:左右两列设置固定宽度像素,左100px 右200px ,中间不设置宽度,并去除浮动。并设置左右两列为绝对定位的固定定位position:absolute;左边top:0;left:0;右边top:0;right:0;由于是绝对定位position脱离正常文档流,左右两列有了z-index属性。中间列就显示在下面,并占满整行,设置左右边距,为左右的宽度,如果希望和左右两列有间距,可以增加左右边距,margin:0 205px 0 105px;
    查看全部
    0 采集 收起 来源:三列布局

    2017-06-29

  • position:absolute和float浮动都会以某种方式将元素从文档的正常流中删除。但不同是:absolute元素会遮挡其他元素,而float不会。 参考:http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html
    查看全部
    0 采集 收起 来源:评测题目

    2017-06-29

  • 1.浮动:布局一般使用层div,这是块级元素,会占用整行。要两列在同一行显示,就需要设置浮动float。 2.宽度:可以设置固定宽度,也可以设置百分比[自适应宽度],会根据浏览器的宽度变化而变化。 3.浏览器居中:如需居中,可以在两列外面包含一层容器,并设置宽度,使用margin:0 auto水平居中显示。
    查看全部
    0 采集 收起 来源:二列布局

    2017-06-29

  • 水平居中对齐:设置宽度,添加样式 margin:0 auto;
    查看全部
    0 采集 收起 来源:编程练习

    2017-06-29

  • 单列布局:新浪首页、百度首页 1.设置固定宽度:设置像素或百分比 2.高度:不设置,根据内容撑开 3.居中对齐:margin:0 auto;
    查看全部
    0 采集 收起 来源:一列布局

    2017-06-29

  • float:left表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的元素,所有如果后面的div不想再被影响,可以使用clear:both;可以理解为清除float:left和float:right的影响,返回到默认状态。像<ul><li></li></ul>也可以这么使用,做导航菜单基本上有这个元素,使用float:left使其横向显示。
    查看全部
    0 采集 收起 来源:实践题

    2018-03-22

  • 任务1:顶部、底部宽度自适应,由于div是块级元素,默认就是占满整屏宽度,所以不用设置宽度和位置,只给一个高度值。 任务2:左边固定宽度,右边自适应。右边设置为绝对定位,不设置宽度,且其左边距 大于左边列的宽度。 两列布局有两种方式: a.浮动:设置左边列float:left;
    查看全部
    0 采集 收起 来源:编程挑战

    2017-06-26

  • 脱离文档流是什么意思?
    查看全部
    0 采集 收起 来源:编程练习

    2017-06-26

  • 分栏又称为分列,常见的分局分为:一列布局, 二列布局, 三列布局, 混合布局
    查看全部
    0 采集 收起 来源:内容简介

    2017-06-25

  • text-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。
    查看全部
    0 采集 收起 来源:编程练习

    2017-06-25

  • margin:0 auto 居中
    查看全部
    0 采集 收起 来源:一列布局

    2017-06-24

  • margin
    查看全部
    0 采集 收起 来源:一列布局

    2017-06-24

举报

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

微信扫码,参与3人拼团

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

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