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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 五个快捷办法让代码整齐美观: 1.在dreamweaver里面,命令--应用源格式,ok,网页代码就规范了整齐了美观了呵呵。也可以先选取某部分代码,然后 命令--将源格式应用于选定内容。 这两个命令的快捷方式是(alt+c+a)和(alt+c+p),是连续按这三个键哟。 2.如果是想某些代码缩进,可以选取代码,然后 格式--缩进。快捷方式是(alt+c+a) 3.如果是想某些代码凸出,可以选取代码,然后 格式--凸出。 4.如果你想缩进,你还可以按tab键,多按几次看看出现什么情况? 5.如果你想空格,也许你习惯了space空格键,不妨也可以按tab键?据说tab键留的空白比较不占文件体积。
    查看全部
  • 看大家讨论的很激烈,我仔细看了一下,这道题出的挺有意思。仔细深究了一下,有一点自己的见解,和大家分享一下: 1,关于任务3。任务1,2很简单相信大家都能很快做出来,任务3,right选择器我是这么写的#right{position:absolute;left:790px; border:1px solid #999;},这样写的原因:position绝对定位时计算位置从mainbody的左边开始,那么应该是left的宽度+mid宽度,当然中间有border也就是边框的1px,然而其实边框的像素是不算在wrap 的970px里面的,比如你可以做完任务2后马上试验一下,在题中left后面添加border,同mid(这其实才是原题中图片所示的效果,不知道为什么原程序未给出,任务里也没提现),因为设置了left和mid间距为13px,用截图工具测量,从边框上点鼠标,拖到另一端,发现是15px,边框是1+1,那么13px是我们设置的间距,所以边框是不占用mainbody的width的(不同浏览器可能处理方式不同,我试验了chrome,火狐和360浏览器,都是这个方式,其他大家要是发现不同可以提出来)。如此,就容易理解了为什么right的left是790而不是792。 2,这样输入之后截图发现,left-mid和mid-right的间距都是15px,奇怪我明明既然是这样,#mid{float:left; width:650px;margin:0 17px 0 13px ; border:1px solid #999;},一个13,一个17,应该差4个像素,为什么会相同。我产生了疑问,然后将right设置左浮动并将宽度设置为170px后真相大白,量出来mid-right为19px,所以任务3的17px看来对浮动才有影响,对绝对定位没啥关系。 我不知道这是不是出题时忽略了,看似简单的题目深想想会想出很多问题,不认真想还真容易忽略。
    查看全部
  • auto会根据浏览器的宽度自动的设置两边的外边距
    查看全部
  • 当父包含快缩成一条的时候, 用clear:both方法清楚浮动影响无效, 这种方法一般用于清楚紧邻其后的元素浮动影响清楚。 这时候需要使用overflow:hidden
    查看全部
    2 采集 收起 来源:编程练习

    2016-04-29

  • 盒子3D模型分层
    查看全部
    2 采集 收起 来源:盒子模型

    2018-03-22

  • 总结:(float和position的理解) float:1.仍在标准文档流中。2.若未设置width,宽度大小随内容大小变化。3.影响紧随其后的一个元素(可能影响其父元素,用width:100%+overflow:hiddle;或chear:both;清除浮动)。 relative:1.仍在标准文档流中。2相对自身最初位置偏移。3.有偏移属性和Z轴,会遮盖其他元素。4.宽度不随内容大小改变。 absolute:1.脱离标准文档流。2.以最近的、设置了定位的父包含块定位;若无,以<html>元素定位。3.有偏移属性和Z轴。4.若未设置width,宽度大小随内容大小变化。
    查看全部
  • 自动居中一列布局<br> 三个技能点:<br> 标准文档流<br> 块级元素<br> margin属性<br> <br> 通常在制作网页的时候不设置高度,盒子模型会随着内容自适应高度<br> 把整个页面内容包括header,mainbody和footer,然后给这三个层级设置一个div包裹层,id为wrap,把各个子层级的宽度设置为100%,再把wrap包裹层的margin值设为{margin:0 auto}(上下值可以为任意值,左右值必须为auto),width必须为定值,就能实现一列布局自动居中了。 auto可以理解为它会根据浏览器的宽度自动的设置两边的外边距。实现原理是:(浏览器的宽度-外包层的宽度)/2=外边距。注意如果把外包层设置为浮动或者绝对定位,这样做就不能实现自动居中了。
    查看全部
  • 其实#mainbody和#footer没必要设置width:100%,因为块级元素的特性就是不设置宽度自动拓展到父元素或者是容器的宽度,任务二不填也可以达到同样的效果,并且减小了代码量
    查看全部
  • 当父层没有设置浮动,而子层设置了浮动时,父层会受到浮动影响缩成一条,这是使用clear:both方法清除浮动是无效的,它一般用于紧邻后面的元素的清除浮动。所以设置父层的overflow:hidden ☆div块的高度一般不需要设置,这样高度就会随着内容自动扩展。若设置了高度,又设置了overflow:hidden,当内容超过高度的时候,就无法正常显示了
    查看全部
    2 采集 收起 来源:横向两列布局

    2016-02-01

  • 对mainbody使用overflow:hidden后,main内显示的是main的背景色:黄色#FC0 对footer使用clear:both后,main内显示的wrap的背景色:蓝色#00C 为什么呢?搞懂这个问题会明白overflow和clear的区别了
    查看全部
    2 采集 收起 来源:编程练习

    2016-01-11

  • 就近原则。
    查看全部
    2 采集 收起 来源:盒子模型

    2018-03-22

  • 当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化
    查看全部
  • 已知一个设置了绝对定位的元素 b,位于其父元素 a 中,a 元素为静态定位,则 b 元素将以html为基准进行偏移。只有设置了除静态定位以外的定位,才算给这个元素定位了,静态定位属于元素默认的定位
    查看全部
    2 采集 收起 来源:练习题

    2015-11-26

  • CSS中存在3种定位机制:1.标准文档流(Normalflow) 2.浮动(Floats)3.绝对定位(Absolute positioning)CSS中存在3种定位机制:1.标准文档流(Normalflow) 2.浮动(Floats)3.绝对定位(Absolute positioning) 1.标准文档流的特点 它的顺序是从左到右,从上到下的顺序排列 块级元素:默认独占一行 标签有:div ul li dl dt p... 行级元素:默认再同一行内显示 标有有 span a img input strong... 块级元素和行级元素都是盒子模型
    查看全部
  • 盒子3D模型
    查看全部
    2 采集 收起 来源:盒子模型

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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