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

网页简单布局之结构与表现原则

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 1.初学者的理解与定义:div层层嵌套。 2.中级者的理解与定义:去掉多余的div,进行简化。 3.高手的理解与定义: 最大化的简化html的结构,然后用css进行设置,减少html与css的契合度。
    查看全部
  • 为什么设置了内边距背景图就显示出来了呢? 根据CSS盒子模型,一个元素,从上到下分为边框,内容和内边距,背景图,外边距,背景颜色,共5个层次.开始时,因为没有设置内边距,盒子内部尺寸等于内容的尺寸,因此,处于第二层的内容将处于第三层的背景图遮挡住.设置了内边距之后,盒子的内部空间被扩展,第二层的内容不再占据整个盒内空间,空余处的背景图也就被显示出来了!
    查看全部
    8 采集 收起 来源:编程挑战

    2016-09-09

  • 1、拿到一个网页的设计图时,首先关注网页的文字内容及内容模块之间的关系,把重点放在编写html语义化的代码上,而不要过多的考虑设计图上的布局样式,等html按内容编写完以后再考虑样式如何实现,力求不改变样式结构的基础上完成要求的视觉效果。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用! 2、利用margin属性来移动设置html结构.margin可以是负值,通过负值,可以使该内容进行移动!实现四个方向的移动。在结构(HTML)和样式(css)中,可以先把内容通过HTML写出来,再利用margin移动位置,实现排版,降低样式和结构的耦合,并且减少代码。 3、给<h5>增加背景,将<h6>移动到相应位置即可。【margin:-25px 0 0 50px;】。对于可以复制的文本,做到与背景间的分离:可以利用文本区的缩进:text-indent。
    查看全部
    7 采集 收起 来源:排行榜制作

    2018-03-22

  • 为什么设置了内边距背景图就显示出来了呢? 根据CSS盒子模型,一个元素,从上到下分为边框,内容和内边距,背景图,外边距,背景颜色,共5个层次.开始时,因为没有设置内边距,盒子内部尺寸等于内容的尺寸,因此,处于第二层的内容将处于第三层的背景图遮挡住.设置了内边距之后,盒子的内部空间被扩展,第二层的内容不再占据整个盒内空间,空余处的背景图也就被显示出来了! 盒子模型层次:边框,内容和内边距,背景图,外边距,背景颜色。
    查看全部
    5 采集 收起 来源:编程挑战

    2017-01-17

  • 1、拿到一个网页的设计图时,首先关注网页的文字内容及内容模块之间的关系,把重点放在编写html语义化的代码上,而不要过多的考虑设计图上的布局样式,等html按内容编写完以后再考虑样式如何实现,力求不改变样式结构的基础上完成要求的视觉效果。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用! 2、利用margin属性来移动设置html结构.margin可以是负值,通过负值,可以使该内容进行移动!实现四个方向的移动。在结构(HTML)和样式(css)中,可以先把内容通过HTML写出来,再利用margin移动位置,实现排版,降低样式和结构的耦合,并且减少代码。
    查看全部
    5 采集 收起 来源:排行榜制作

    2016-10-10

  • 网页制作中 结构、表现、行为分离,其中 HTML 是结构,CSS是表现,JAVASCRIPT是行为。
    查看全部
    4 采集 收起 来源:练习题

    2016-02-23

  • 初级的人员思路及制作方法:div层层嵌套。 中级的人员思路及制作方法:去掉多余的div,进行简化。 高级的人员思路及制作方法:简化结构,并在现有结构基础上,只通过样式去改变它的布局,就完成了一个视觉效果。 步骤: 先按结构和语义编写代码 然后进行css样式设置 减少HTML与CSS契合度
    查看全部
  • 初级思路:div.main -> div.left{float:left;} -> img -> div.right{float:left;} -> h3+p 中级思路:div.main -> img{float:left;} -> div.right{float:left;} -> h3+p 高级思路:div.main{margin-left:100px;} -> img{margin-left:-100px;float:left;} -> h3 -> p 高级思路:先按结构和语义编写代码,然后进行css样式设置,减少HTML与CSS契合度(层数越少越好)
    查看全部
  • 一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
    查看全部
    4 采集 收起 来源:练习题

    2017-03-14

  • 为什么设置了内边距背景图就显示出来了呢? 根据CSS盒子模型,一个元素,从上到下分为边框,内容和内边距,背景图,外边距,背景颜色,共5个层次.开始时,因为没有设置内边距,盒子内部尺寸等于内容的尺寸,因此,处于第二层的内容将处于第三层的背景图遮挡住.设置了内边距之后,盒子的内部空间被扩展,第二层的内容不再占据整个盒内空间,空余处的背景图也就被显示出来了!
    查看全部
    4 采集 收起 来源:编程挑战

    2016-08-27

  • 网页包含三个层次(没错,它们都需要各自分离) 1.HTML结构 2.CSS表现 3.JavaScript行为 HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。
    查看全部
    4 采集 收起 来源:内容简介

    2018-03-22

  • 这里不是图片的内边距,而是img标签的内边距,我们是用img标签来装图片的。打个比方,img标签就像是相框,而img标签中的图片就是相片,给img标签(相框)加内边距是为了把背景图片显示出来。
    查看全部
    3 采集 收起 来源:编程挑战

    2016-03-20

  • 有些文本性的东西 可以通过设置文本缩进(text-indent:580px;)来定义显示位置 例如该网页中德电话号码,利用文本缩进
    查看全部
  • 初级思路:div.main -> div.left{float:left;} -> img -> div.right{float:left;} -> h3+p 中级思路:div.main -> img{float:left;} -> div.right{float:left;} -> h3+p 高级思路:div.main{margin-left:100px;} -> img{margin-left:-100px;float:left;} -> h3 -> p
    查看全部
  • 1.初学者的理解与定义:div层层嵌套。 2.中级者的理解与定义:去掉多余的div,进行简化。 3.高手的理解与定义: 最大化的简化html的结构,然后用css进行设置,减少html与css的契合度 overflow :visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 margin-left:100px; 就是左外边距100px,会右移100pxmargin-left:-100px; 就是左外边距-100px,会左移100px
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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