大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

css圣杯布局和双飞翼布局

css圣杯布局和双飞翼布局 双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应。 圣杯布局 html结构 center left right css 先写出大概的样式 .article{ height: 300px;left{ width: 200px; height: 100px; background: blue; float: left; } 现在的布局是这样的 image.png 在.left中添加 margin-left: -100%; position: relative; overflow: hidden; margin-bottom: -9999px;

预加载那些事儿

还可以通过js来实现预加载,这里打个小广告:这是一个预加载插件,有兴趣的同学可以看看。 这里再贴出网上的一些实现: 还有就是通过ajax实现预加载,不仅可以加载图片,还可以预加载css,js等。比直接使用js的好处在于加载js和css不会影响到当前页面。 window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); // preload image new Image().

前端规范

前端规范 /* 重置 */ div,p,ul,ol,li{margin:0;} /* 默认 */ strong,em{font-style:normal;font-weight:bold;m-logo a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;m-dimg ul:after,.content:'.'u-tab{zoom:1;u-btn{height:20px;border:1px solid #333;f-tac{text-align:center;s-fc,a.s-fc:hover{color:#fff;

【整理】CSS布局方案

【整理】CSS布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案话不多说,上代码! 以下所有demo的源码 链接: http://pan.baidu.com/s/1cHBH3g 密码:obkb 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 a) inline-block + text-align . transform: translateX(-50%); } d) flex + justify-content . display: table-cell;center{ float: left; margin-bottom: -9999px;

【整理】CSS布局方案

【整理】CSS布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 以下所有demo的源码 链接: http://pan.baidu.com/s/1hs9XGCO 密码: 5pq9 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 效果图 a) inline-block + text-align . transform: translateX(-50%); } d) flex + justify-content . display: table-cell;center{ float: left; margin-bottom: -9999px;

让一个元素看不见的N种方法

让一个元素看不见的N种方法 这个内容较好理解,不上完整代码,不截图! 1、最常用之——display: none; 给元素设置opacity: 0;后,元素变成透明的我们肉眼就看不到了,所以原本占据的空间还在。 4、设置盒模型属性为0 将height、width、padding、border、margin等盒模型属性的值全设为0,如果元素內还有子元素或内容,还应overflow: hidden;box1 { position: absolute; left: 100%; z-index: -9999;

CSS常见布局解决方案

注意这里实际上使用了 align-items: stretch,flex 默认的 align-items 的值为 stretch 3. float left right right .此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 兼容性较好。 到此,我们了解常见的布局解决方案,这些只是参考,一样的布局实现方式多种多样。主要就使用position、flex 、table(从很久很久以前起,我们就抛弃了table布局页面,但display: table;

页面布局之两列等高布局

页面布局之两列等高布局 两列等高布局的方法有很多种。 html结构如下: 头部信息 主要内容区域afsfafasfasfafafaf 侧变脸fasfasfasfa拉风垃圾费拉萨的积分氨基发发看辣椒粉可垃圾时离开房间爱第三方加速离开房间爱流口水的房间爱离开是打飞机酸等法律就爱上当路费sdfdfadfadf 底部信息 方法一:利用负边距实现 *{ margin: 0;sideBox{ float: right; margin-left: -450px;mainBox{ display: table-cell;

网页中“复杂”的布局需求实现

网页中“复杂”的布局需求实现 作为一名前端“攻城狮”,实现所有需求的页面布局是最基本的技能。下面的内容,给大家介绍一些复杂的布局。 内容提纲 当页面内容不足一屏的高度时,底部内容出现在屏幕底部;当页面内容高度一屏的高度时,内容处于正常的文档流底部; 效果图: Document *{ margin: 0; } html,body{ height: 100%; left: 50%; bottom: 0;middle-content{ margin: 0 100px 0 200px;

JS中的图片预加载原理及运用的小案例

document.getElementById("preload-02").} #wrap span{position: absolute; var oDiv=oWrap.getElementsByTagName('div'); var arr=['about1.jpg','about2.jpg','about3.jpg','about4.jpg','bg1.jpg','bg2.jpg','bg3.jpg','bg41.jpg','bg5.jpg','plane1.png']; //新建一个图片对象 oImg.onload=function(){ num++; //给图片对象添加路径 注意这条代码必须加在onload的后面 } oSpan.addEventListener('webkitTransitionend',move,false);

常见的两列、三列布局,宽高自适应

常见的两列、三列布局,宽高自适应 今天是猴年的第一天班,也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局:1.左侧固定宽度,高度自适应右侧;2. margin-bottom: -9999px;你看代码,左侧确实定了宽高,右侧宽高都没有定。 3.左侧、右侧固定宽,中间自适应 效果图 pic4.png pic5.png html+css 左侧、右侧固定宽,中间自适应 .center{ background: #9A0069; width: 100%;