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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 网页换肤: 相同的html结构,不同的css样式
    查看全部
    0 采集 收起 来源:练习题

    2017-03-10

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

    2018-03-22

  • 结构与表现的分离: text-indent:使文本缩进到想要的位置。 只是一行简短文字数字,可以用段落排版的思路来“定位”,即用text-indent:**px 缩进来达到目的。 如果设置一个极小的负值,则可以在浏览器上隐藏文本,却又能被搜索引擎搜索到
    查看全部
  • 初级思路: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
    查看全部
  • 网页制作中 结构、表现、行为分离,其中 HTML 是结构,CSS是表现,JS是行为
    查看全部
    0 采集 收起 来源:练习题

    2017-03-10

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

    2017-03-10

  • 编写网页的时候不要被CSS样式打扰,而要把重点放在HTML结构的语义化上。
    查看全部
    0 采集 收起 来源:内容简介

    2017-03-10

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

    2017-03-08

  • 网页设计时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
    查看全部
  • 排行榜制作 <div class="rank" <h5>排行榜</h5> <h6>根据网络投票</h6> 设置<h5>背景图标 在之后设置<h6> margin:25px 0 0 50px(根据右外边距移到 排行榜下margin值设置为负值,可使元素往反方向位移)
    查看全部
    0 采集 收起 来源:排行榜制作

    2018-03-22

  • 案例一:新浪微博的用户发言列表 左边是头像,右边是发言列表 1.初级人员的思路和制作方法 先建一个大的div,再建一个小的div放图片,再建一个小的div放发言内容,再把左侧和右侧的div分别设置浮动。 2.中级人员思路 减少一层div 3. 高级人员审视思路 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML和CSS契合度
    查看全部
  • 随着技术的发展,出现把结构(HTML),表现(CSS),和行为(JS)分离的思想。那什么才是真正的分离呢,不是把它们分别写在分开的文件里,而是像盖房子一样,先从结构出发,做到HTML结构合理简洁,再加上CSS样式。编写网页的时候不要被CSS样式打扰,而要把重点放在HTML结构的语义化上。
    查看全部
    0 采集 收起 来源:内容简介

    2017-03-02

  • 网页设计
    查看全部
    0 采集 收起 来源:编程挑战

    2017-03-02

  • 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
    查看全部
    0 采集 收起 来源:练习题

    2017-02-28

举报

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

微信扫码,参与3人拼团

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

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