HTML浮动布局Float Layout是Web开发中一种重要的布局技术，主要通过CSS的float属性来实现它允许元素脱离其正常的文档流，向左或向右移动，直到它的外边缘遇到包含框或另一个浮动元素的边缘为止浮动布局常用于创建多栏布局，如两栏或三栏布局，其中一栏用于导航或侧边栏，另一栏或更多栏用于主要内容。

5“口”型布局 这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容这种布局的优点是页面充实内容丰富信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用缺点是页面拥挤，不够灵活也有将四边空出，只用。

实例演示在页面设计中，你可以这样运用它来呈现商品详情点击展开商品详细信息 这里是商品的详细描述，包括规格特点使用方法等隐藏的信息在这里，只需轻轻一点，全部揭晓使用details标签，你可以清晰地划分层次，让用户在需要时深入了解，而在初次浏览时保持简洁这种布局既节省空间，又提高。

第三种flex布局 父盒子 displayflex 左右盒子设置宽度300px 中间盒子flex1flexgrow1 flexshrink1 flexbasis0%不考虑元素尺寸自由伸缩 第四种grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，宽度分别为300px auto 300px。

dreamweaver8是一款非常优秀的可视化网页设计布局软件在日常开发当中，经常会遇到框架布局如上下布局，上左右布局上下左右布局等等这里演示怎样插入布局框架，然后全部保存打开dreamweaver8，并新建一个html网页点击插入菜单，然后选择HTML项紧接着，在对应的下拉菜单选择框架，及所需要的布局。

首先说下移动端的布局rem布局rem是指html元素上的字体大小对应的像素数值，使用rem为长度单位理想情况下如果将所有的长度单位都用rem标示，那么我只需要更改html上的fontsize即可同步按比例更改所有长度单位包括元素宽高边距字体大小等这在手机屏幕大小不定时就特别有用，只需要计算一。

html5网页结构布局标签 对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在 列举常用HTML5结构组合 header nav section article figure figcaption aside footer 一般首页结构，如图所示 当然也可以是下面的结构 其中section和article最为相似，而且。