页布局分为：网页头部、网页主题、网页底部。

初学html时制作出来的页面非常丑陋，是因为没有添加CSS样式和布局排版，完全按照元素自身的特性来排列元素。事实上，对于这些标签还有一个专门的属性来控制元素的显示方式，是像div那样快元素显示，还是像span那样行内显示，这个属性就是display属性。

block快元素的默认值，inline行内元素的默认值，inline-block行内块元素，none设置元素不会被显示。

下面我们来做个一个页面用float属性来实现网页的布局。

样张图片：

下面我们就用浮动来进行编辑代码如下：

看一下css样式表：

下面来看一下我们设计出来的效果：

布局差不多没什么大的区别，小编现在也是初学者，希望提出建议

作者：润邦网络科技

小白，你最近看CSS的时候碰到position属性了么？"

“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”

“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基于浏览器窗口的绝对定位，在我们平时的制作中经常会碰到。”

老朱接着说：“给一个容器设定position为fixed以后，可以通过left、right、bottom、top进行四个方向的距离定位。现在我们在页面中写一个fixed容器，看一下代码片段。”

“你看，这里我在body里面加了一个标识为foot的div，然后他的css里面把position设置成了fixed，并且bottom（距离底部）为0，这里的bottom是基于浏览器窗口的距离进行计算的，foot的宽和高也进行了设定。现在我们看一下效果！”

“你可以看到，拖动滚动条往下滚动网页的时候，foot的位置并不会随着滚动条的滚动发生改变，它就像是漂浮在那里一样。这里的foot是一个div容器，所以它的内部我们还可以放任何你希望布局的内容，比如放一个图片，或者其他的容器。”

“这里插入的图片要想跟foot容器宽度一致，根据我们之前说过的对图片css的操作，把图片的宽度（width）设定为100%，图片就会自动与父容器宽度一致了。”

小白突然想到了很多手机HTML5页面下方都有导航条，问道：“很多手机的HTML5页面里面下方的导航条不会随着页面的滚动而滚动，这种导航条是不是也通过fixed来设定的。”

“是的，跟这里的foot一样，我们只需要把导航条的父容器设定为fixed就可以了。有个需要注意的地方是导航条会根据手机屏幕的分辨率自动占用屏幕宽度，所以我们在给foot设定css样式的时候就不能设定宽度了。”

小白问道：“那应该怎么设定呢？”

老朱说：“你忘了我们刚说了fiex可以通过top、right、bottom、left设定四个方向的距离么？如果要让一个fixed容器左右靠边，我们只需要left为0，right为0，它就会自动匹配窗口的宽度。现在我们把之前的foot容器改一下。”

“通过设定bottom、left、right可以让foot靠近底部并且保持与窗口宽度一致。然后我们在foot里面放了一个ul-li容器，让li容器向左浮动并且宽度为父容器的25%，布局就会变成这样。”

“网页上的底部导航通常都会放入透明的png图片，现在我们插入png图，再进行一下css的调整。”

“网页底部导航条，上面还会牵扯到鼠标事件，焦点样式变化，这些知识我们随后也会一一展开讨论，今天先这样吧！你先练习练习今天说的这些内容，然后试着做一个居中漂浮的层，看看能不能做出来！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

onic是开源的移动应用开发框架，便于构建高质量的本地和网络技术先进的web应用程序。Ionic是基于Angular，有许多显著的性能提升，可用性和功能都在不断的进行改进。只需要会一点前端知识就能玩转Ionic。

Ionic的应用程序创建开发主要通过Ionic命令行实用工具(“CLI—命令行界面”)，并使用cordova构建和部署本地应用。建立Ionic项目，您需要安装最新版本的CLI和cordova。在你这样做之前，你需要一个node.js的最新版本。这些在我之前的文章有安装教程。

• 官网地址：

  http://ionicframework.com/

• 版本更新说明：

  https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

学习ionic需要了解的知识：

• HTML5

• CSS3

• TypeScript（JavaScript）

• Angular2+

下面是一些组件的示例，不同系统有不同的样式，下面展示iOS上的。

动作表单-Action Sheets

时间选择器-DateTime

浮动的按钮-Floating Action Buttons

分割按钮-Segment

Inputs-输入框

表格布局-Grid

小芯片-Chip

弹窗对话框1-Alert

弹窗对话框2-Popover

想要查看更多的ionic组件示例，可以在App Store和Google Play下载Ionic2Components应用，该APP即为官方所有组件的展示。

• 组件在线演示地址：

  http://ionicframework.com/docs/api/

组件只能作用在用户与界面交互上，想要调用原生设备功能就需要cordova，他提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风、GPS等。在应用商店下载Ionic Native即可体验部分插件。

• 离子原生包装插件：

  http://ionicframework.com/docs/native/

通过以上组件配合使用，即使只懂css3一点皮毛也能做出一个漂亮简单的HTML5 APP，想要了解更多ionic，可以关注我或者在官网查看最新消息。