随笔分类 -  页面架构

布局解决方案 响应式
文档章节
摘要：导航 左边 右边 底部 阅读全文
posted @ 2015-09-10 21:51 哪有公园可以住的呀
基础系列：模块化&规范
摘要：根节点同一个div里的样式都有一个相同的根节点截图：规范CSS 书写顺序 阅读全文
posted @ 2015-08-09 12:28 哪有公园可以住的呀
基础系列：自适应
摘要：设备屏幕宽度最大宽度是320px @media screen and (max-width: 320px){ .left{ float: none; width: auto; margin... 阅读全文
posted @ 2015-08-09 11:36 哪有公园可以住的呀
基础系列：页面优化
摘要：减少请求减少CSS文件的请求多个CSS文件合并成一个少量CSS文件内联避免使用import的方式引入css文件图片合并用雪碧图来减少图片的请求（网站后期）减少图片大小选择合适的图片格式 png 半透明 jpg压缩图片 ImageOptim ImageAlpha JPEGminiCSS缩写省略值为0的... 阅读全文
posted @ 2015-08-08 21:55 哪有公园可以住的呀
基础系列：布局解决方案【全屏布局】
摘要：定宽用px计算设计图思路一position top left right bootom 参考：http://nec.netease.com/library/141027思虑二... 阅读全文
posted @ 2015-08-04 23:26 哪有公园可以住的呀
基础系列：布局解决方案【居中】
摘要：思路一 inner-block+text-align +table-cell+vertical-align水平居中 inner-block+text-align垂直居中 table-cell+vertical-align DEMO 思路二absolute+... 阅读全文
posted @ 2015-08-04 22:02 哪有公园可以住的呀
基础系列：布局解决方案【垂直居中】
摘要：思路一absolute+transform 没有效果先top:50%,在transform:translateY(-50%); 在向上移动自身的一半 DEMO 思路二flex+align-items父div设置position:fl... 阅读全文
posted @ 2015-08-04 21:42 哪有公园可以住的呀
基础系列：布局解决方案【水平居中】
摘要：思路一inner-block+text-align子div设置display:inner-block; 子div宽度根据内容而改变父div设置text-align:center; 对子div是inner元素起作用 DEMO 思路二t... 阅读全文
posted @ 2015-08-03 23:16 哪有公园可以住的呀
基础系列：布局解决方案【不定宽与自适应】
摘要：思路一float+overflow左边不设置div宽度，根据内容自适应右边设置overflow:hidden; 不受左边的div的影响IE6下 不兼容 left ... 阅读全文
posted @ 2015-08-02 21:10 哪有公园可以住的呀