随笔分类 - 页面布局
摘要：## 简介 所谓移动端响应式布局，就是最终布局适配不同的手机型号，针对不同的屏幕分辨率的终端上能够浏览网页展示的不同方式，我们也可以称为移动端适配布局。 > 总结就是一个移动端网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： - 面对不同分辨率设备灵活性较强 - 能够快捷解决多设备
阅读全文
摘要：前沿简介 圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。 两者的实现方式有差异，但是都遵循以下几点： 两侧宽度固定，中间宽度自适
阅读全文
摘要：方法一：footer高度固定+绝对定位 HTML代码： CSS代码： 实现的效果： 首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点； 其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证
阅读全文
摘要：一.浮动布局 1.先让固定宽度的div浮动！使其脱离文档流。2.margin-left的值等于固定div的宽度相等。 二.margin的负值(3个div) 是固定宽度的div脱离文档流。利用marin负值可以使得，后面的div可以与前面的div 保持同行显示。给包裹内容的div加margin-lef
阅读全文
摘要：前面有一篇文章讲过《css实现两列布局，一列固定宽度，一列宽度自适应方法》，主要是讲实现一列固定宽度，一列宽度自适应的几种方法。 下面我在总结一下一般的三种扩展布局，这儿所示的扩展布局很常规，有的童鞋会说使用column或者flex啥的布局不是很方便吗，但是你也要看它的支持程度吧，比如你在手机端使用
阅读全文
摘要：不管是左是右，反正就是一边宽度固定，一边宽度自适应。 博客园的很多主题也是这样设计的，我的博客也是右侧固定宽度，左侧自适应屏幕的布局方式。 html代码： 实现方式方式有如下几种： 1.固定宽度区浮动，自适应区不设宽度而设置 margin 我们以右侧宽度固定，左侧宽度自适应为例： css代码： 实现
阅读全文
