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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 外边距:margin 内边距:padding
    查看全部
    0 采集 收起 来源:编程挑战

    2016-05-27

  • 结构 表现 行为
    查看全部
    0 采集 收起 来源:内容简介

    2016-05-27

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

    2018-03-22

  • 盒子的内边距不会影响内容,但会把盒子撑大。图片本身会覆盖背景图,所以显示不出来,当增加图片的内边距的时候,图片大小不变,但图片这个盒子会变大,背景图就自然显示出来了
    查看全部
    0 采集 收起 来源:编程挑战

    2016-05-26

  • 网页换肤: 相同的html结构,不同的css样式。
    查看全部
    0 采集 收起 来源:练习题

    2016-05-26

  • 在网页制作中,面对设计图,网页制作人员一般要遵循的原则是先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
    查看全部
    0 采集 收起 来源:练习题

    2016-05-26

  • 文本缩进:text-indent
    查看全部
  • @HTML/CSS/JS Ps1:当拿到一张网页,重点放在HTML的结构和与语义化上,先别过多的想样式(即先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式)。 Ps2:有时候可以的话用“缩进”代替“定位”。 【温馨提示:JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我,加我慕课好友,互相学习,共同进步!】
    查看全部
    0 采集 收起 来源:内容简介

    2016-08-26

  • 结构上无需增加额外div,巧用margin完成定位
    查看全部
    0 采集 收起 来源:排行榜制作

    2016-05-26

  • 结构表现分离尽量不要复杂化,能用css完成的效果,就不要在HTML里添加过多结构或无意义的标签
    查看全部
  • text-indent文本缩进 很方便地把文字定位
    查看全部
  • text-lident:文本缩进
    查看全部
  • 用缩进代替新增span并对其样式定位。结构和样式分离思想。
    查看全部
    0 采集 收起 来源:编程挑战

    2016-05-25

  • 网页换肤:相同的HTML结构,不同的CSS样式 核心是HTML结构与CSS表现分离
    查看全部
  • 1.初学者的理解与定义:div层层嵌套。 2.中级者的理解与定义:去掉多余的div,进行简化。 3.高手的理解与定义: 最大化的简化html的结构,然后用css进行设置,减少html与css的契合度
    查看全部

举报

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

微信扫码,参与3人拼团

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

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