双飞翼和圣杯布局

双飞翼和圣杯布局
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案。 尝试之路考虑以下DOM结构: <div id="page">           <div id="hd"></div>              <div id="bd">                       <div clas...

左右两侧同高

左右两侧同高
左右两侧同高;padding-bottom: 5000px;margin-bottom: -5000px; 这不是自适应的高度,只是利用了overflow:hidden来隐藏两边div的多余部分。他给左右两个div分别设置了一个3000像素高的空白占位高度,把整个div往上挤了3000像素,然后又通过负的margin把div往下挪3000像素。当中间的div高度到了3000以上的时候(准确的说是比两边div内部除了padding之外的高度多3000以上),左右两边的div高度可能就不够了...

CSS实现垂直居中的5种方法

CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-a...

研究首屏时间?你先要知道这几点细节

研究首屏时间?你先要知道这几点细节
做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。     怎么获取首屏时间呢?     我们经常要先问自己:页面是怎么加载数据?     A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容     在每个点打上一...

dataurl-图片优化

dataurl-图片优化
dataurl,然后写在路径里就可以了,不过5k一下可以用,大于5k就没有必要了,这个是谷歌把小图片翻译成代码了,可以存在缓存里,但是要注意的是ie67不兼容 ps:Data URL和图片,及Data URI的利弊

bootstrap兼容ie8媒体查询respond.min.js IE失效问题

bootstrap兼容ie8媒体查询respond.min.js IE失效问题
respond.min.js IE失效问题 HTML5 respond.js 解决IE6~8的响应式布局问题   响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。文件下载地址:https://github.com/scottje...

解决Flash挡住层用z-index无效的问题

解决Flash挡住层用z-index无效的问题
在HTML中,如果嵌入Flash,默认会将flash放在页面的最上面。也就是说,即使用绝对定位,将z-index设的无穷高,页面里的任何元素还是无法将它盖住。这时候,有两种方法可以控制flash的z-index 1、在嵌入flash时,设置flash的wmode参数为opaque 2、在嵌入flash时,设置flash的wmode参数为transparent 对应的IE和FireFox的代码如下所示,以方法1为例: ps1: IE下:<param name="wmode" value="opaque"> F...

移动端页面开发笔记(一)

移动端页面开发笔记(一)
document.documentElement.style.fontSize = document.body.clientWidth * (16/320) + 'px';   用@media,判断viewport , 然后设置font-size 一般都是按照iphone分辨率做的 逻辑分辨率是实际分辨率的1/2 给你720 你就按360做 这个事nexus5的分辨率 iphone5是320分辨率 按比例设置font size @media(min-width:360){html{font-sisz:100px;}} @media(min-width:320){html{font-sisz:88.88px;}} 按比例写f...

H5动效的常见制作手法

H5动效的常见制作手法
众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。 近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,“动效设计”一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法。 ...

CSS3的calc()使用

CSS3的calc()使用
平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。这样一来就会相当...
Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录