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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 此时使用元素移出的方法:width:100%;overflow:hidden;
    查看全部
    0 采集 收起 来源:横向两列布局

    2014-10-25

  • 横向两列排列~ 对于盒子的内填充,外填充的清除方法: *{margin:0;padding:0;}这样盒子就可以清除浏览器对它的影响。可以紧贴着浏览器显示。 另外盒子的居中可以通过:margin:0 auto;来实现。 当子元素div设置高度时,受到浮动影响的有两块:第一个是他们的父快,高度无法扩展~第二个是他们紧跟着它后面的元素。需要清除影响~
    查看全部
    0 采集 收起 来源:横向两列布局

    2014-10-25

  • 清除浮动的方法:第一种清除浮动:clear:both; 第二种元素移除:width:100%;overflow:hidden; 第三种加上空标签:<br/> 一般不用空标签~无意义~ div盒子自动居中margin:0 auto;同时:width的宽度不能为100%,否则无意义
    查看全部
  • 当元素设置浮动属性后, 会对相邻的元素产生影响, 相邻元素特指紧邻后面的元素.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
    查看全部
  • 相对定位会按照元素的原始位置对该元素进行移动。 导航栏:导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的: 去掉圆点和外边距: ul { list-style-type:none; margin:0; padding:0; } list-style-type:none - 删除圆点。 把外边距和内边距设置为 0 可以去除浏览器的默认设定。 垂直导航栏 如需构建垂直导航栏,我们只需要定义 <a> 元素的样式,除了上面的代码之外: a { display:block; width:60px; }display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。 width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。 水平导航栏 有两种创建水平导航栏的方法。使用行内或浮动列表项。 两种方法都不错,但是如果您希望链接拥有相同的尺寸,就必须使用浮动方法。 行内列表项 除了上面的“标准”代码,构建水平导航栏的方法之一是将 <li> 元素规定为行内元素: 实例 li { display:inline; } 对列表项进行浮动 在上面的例子中,链接的宽度是不同的。 为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度: 实例 li { float:left; } a { display:block; width:60px; } float:left - 使用 float 来把块元素滑向彼此。 display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。 width:60px - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。
    查看全部
    0 采集 收起 来源:盒子模型

    2018-03-22

  • 用百分数来定位图片的位置:首先要设置图片的位置属性: {background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%;}同样用像素来定位也需要用户fixed属性~ 垂直排列图像:vertical-align:(基于父元素。) baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。
    查看全部
    0 采集 收起 来源:盒子模型

    2018-03-22

  • CSS规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。
    查看全部
    0 采集 收起 来源:练习题

    2014-10-25

  • 用clear:both方法清除父元素的float; 用overflow:hidden方法清除后面第一个元素的float;
    查看全部
    0 采集 收起 来源:横向两列布局

    2014-10-24

  • 用clear:both方法清除父元素的float; 用clear:both方法清除后面第一个元素的float;
    查看全部
    0 采集 收起 来源:横向两列布局

    2014-10-24

  • 横向两列布局
    查看全部
  • 当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节
    查看全部
    0 采集 收起 来源:绝对定位

    2014-10-23

  • 设置偏移量特点
    查看全部
    0 采集 收起 来源:绝对定位

    2014-10-23

  • 设置偏移量情况 无已定位祖先元素 有已定位祖先元素
    查看全部
    0 采集 收起 来源:绝对定位

    2014-10-23

  • 为设置偏移量特点: 无论是否存在已定位祖先元素,都保持在元素初始位置 脱离了标准文段流
    查看全部
    0 采集 收起 来源:绝对定位

    2014-10-23

  • 绝对定位 特点:1.建立以包含块为基准的定位 2.完全脱离了标准文档流
    查看全部
    0 采集 收起 来源:绝对定位

    2014-10-23

举报

0/150
提交
取消
课程须知
1.一定要对HTML+CSS相关标签有所掌握;2.对网页布局知识有简单的了解
老师告诉你能学到什么?
1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局;2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码,参与3人拼团

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

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