html5布局教程，html布局设计

html5页面怎么布局

1、左右框架型布局 这类网站主要由左边栏和内容区组成，组成比较简洁，主要用于精彩内容的呈现，主要是很多个人站点、博客的首选。

2、列举常用HTML5结构组合 header nav section article figure figcaption aside footer 一般首页结构，如图所示 当然也可以是下面的结构 其中section和article最为相似，而且和div标签貌似也有很大相似之处。

3、其次，你要构想一下整个作品的创意形式、页面布局、逻辑结构等，最好可以用思维脑图把关键流程走向画下来，以防止制作过程中思维混乱。明确好以上两大步后，你就可以进行具体的制作了。

相关问答

Q1: html5布局之路怎么样

书本的知识逻辑性相对会比较强，知识的覆盖面也会比较全面。HTML+CSS方面推荐你选择《HTML5布局之路》，这本书知识是按照网站开发的流程讲解，对初学者很友好，容易学会。

代入感也会相对较强，同时里面有很多QA，都是实际开发过程当中或者学习者在学习过程中，可能产生的一些疑问或想法，在这里面都已经给出了答案和提示，所以会觉得学的特别特别顺。

html5学习较好的书籍，推荐当前比较新的技术书籍《HTML5布局之路》吧，这本书的知识逻辑是按照网页开发流程来讲解的，让你知道应该先学什么，然后再学什么，比较适合初学者。

想学html5前端开发，推荐你选择一本比较不错的HTML5技术书籍，再配合上一些视频课程，学习效果会更好。毕竟书本的知识逻辑性相对会比较强，知识的覆盖面也会比较全面。

因为HTML5本身由不同的语言组成，是HTML+CSS+JavaScript，三种语言各自有各自的特点，HTML与CSS，属于结构和样式，就是做网页布局，JS是逻辑层面，脚本语言。

Q2: HTML5如何利用rem实现自适应布局

根em），使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

rem、em自适应 ：用媒体查询的方法，确定在不同屏幕宽度下，改变html或body的fontsize。再用rem， em替代 px作为单位实现自适应。优点：可以根据不同屏幕宽度来设置，可以完美解决上面说的屏幕偏大时的比例问题。

如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。

说说我知道的方法。其实这个需求应该是实现一侧固定宽度，另一侧自适应宽度，传统的圣杯布局，可以解决这个问题，然而这会导致嵌套太多层。

为什么要自适应？比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。

关于html5布局教程和html布局设计的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。