HTML简单的布局技巧

开发工具与关键技术： DW、前端
作者：梁锦豪
撰写时间：2019/1/16

div：在学习html的第一步就是学习如何去布局，要做到代码的可读性高，所以容器与容器之间要层级分明，如图：

如果杂乱无章，将很难判断它们之间的关系，如图：

最好用响应式的布局，那就可以兼容手机端，否则在手机端上样式布局就会出现错乱。响应式布局首先要引入bootstrap插件，然后在标签里加入这句代码，在容器container中划分行（row），在行（row）中划分列（col）注：最多可划分成12份。技巧：可以通过设置col的比例来达到对齐的效果：

但有些复杂的布局没法用简单的row加col来完成，我们可以通过“媒体对象”（media）来实现：

这种左边是图片右边是文字或右边是图片左边是文字的布局，只需要两个Class选择器，分别引用.media和.media-body来装载的内容，就可以实现页面设计目标、形成布局、间距并控制可选的填充和边距。
“媒体对象”还可嵌套使用：

可以根据自己的需求任意嵌套。方法是：在媒体对象里面写媒体对象。