div+css - 随笔分类 - senly

IE6的position:fixed

摘要：手头一个项目中，要实现把一个浮层控制在浏览器窗口右下角，用”position:fixed”来控制最合适不过了。但万恶的IE6不支持这个属性，之前采用过的方法有：将滚动条转移到body上，使用绝对定位控制浮层位置；使用JS实时判断滚动并设置浮层位置。第一种方法局限性太大，页面中有其他绝对定位元素会受到影响；第二种方法需要在页面里加定时器，资源开销和时间成本都有点高。后来在同事小卓的启发下，使用CSS表达式完成了IE6的兼容，代码如下：_position:absolute;_top:expression(document.documentElement.clientHeight - 213 + ( 阅读全文

posted @ 2013-07-21 18:02 senly 阅读(325) 评论(0) 推荐(0)

css秘籍：复选框与文字对齐的问题

摘要：另外一个让复选框与文字对齐的新方法。设置字体让复选框与文字对齐。首先复选框后面的文字字体须是”Tahoma”（可以称之为“她好吗”字体方便记忆），然后复选框的样式是.checkbox{vertical-align:middle;margin-top:0;}完整代码如下：<styletype="text/css">body{font-size:12px;font-family:Tahoma;}.checkbox{vertical-align:middle;margin-top:0;}</style><body><inputclass= 阅读全文

posted @ 2013-05-20 12:19 senly 阅读(790) 评论(0) 推荐(0)

CSS自定义滚动条样式

摘要：相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。IE下的滚动条样式IE是最早提供滚动条的样式支持，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。这些样式规则很简单：scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color: color; /* 阅读全文

posted @ 2013-05-02 09:03 senly 阅读(768) 评论(0) 推荐(0)

iframe 父窗口和子窗口相互的调用方法集锦

摘要：一、父窗口调用iframe子窗口方法1、HTML语法：<iframe name="myFrame" src="child.html"></iframe>2、父窗口调用子窗口：myFrame.window.functionName();3、子窗品调用父窗口：parent.functionName();简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行4、父窗口页面源码： < html > < head > < script type = "text/javascript& 阅读全文

posted @ 2012-12-31 12:09 senly 阅读(302) 评论(0) 推荐(0)

44种IE css bug实例测试总结

摘要：web前端，我们可以把它理解成浏览器端。从这种意义上来讲，开发者日常工作跟浏览器关系是相对紧密的；我们今天要探讨的问题，就是关于浏览器中的另类（当然开发人员是这么认为的）—IE 对CSS解释和渲染上的一些bug，以及对这些bug的解决方案。当然你会说，ie的CSS bug咱都给haslayout属性来解决不就完了；您这就有点儿太低估ie的“能力”了；不否认在接下来的实例中，确实有的bug是haslayout属性造成的，但不是全部。以下的44个bug及解决方案实例是从一篇老外的博文上翻译过来的（其实这博客地址已经在我的收藏夹呆了快一年）了，之所以这次抽时间来翻译它，也是因为最近项目中出现的N多阅读全文

posted @ 2012-12-13 19:47 senly 阅读(405) 评论(1) 推荐(0)

IE6不支持position:fixed的解决方法

摘要：解决IE6不支持position:fixed的方法，非常简单，具体调用请参考下面：/*让position:fixed在IE6下可用! */.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}.fixed-right /* 右侧固定 */{position:fixed;right:0px;left 阅读全文

posted @ 2012-10-16 17:36 senly 阅读(1194) 评论(0) 推荐(0)

jquery菜单左右翻屏效果

摘要：CSS：body { margin: 0 auto; font-size:12px;font-family:"宋体",Verdana,Arial,Tahoma;}form, ul, dt, dd, dl, p, h1, h2, h3, h4, h5, h6, h7 { margin: 0; padding: 0; list-style: none; }img { border: none; }.clear { overflow: hidden; clear: both; }a { color: #555555; text-decoration: none; }a:hover 阅读全文

posted @ 2012-09-15 09:48 senly 阅读(1753) 评论(0) 推荐(0)

内部链接

摘要：写这个主要是怕自己忘了。举例：<a href="#reg_login">注册和登录表单资源</a><h3 class="third_title"><a name="reg_login"></a>注册和登录表单 PSD 资源</h3> 阅读全文

posted @ 2011-05-30 12:33 senly 阅读(143) 评论(0) 推荐(0)

浅谈 CSS Sprites 技术以及图片优化

摘要：CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites，技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 google.co.kr 下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprit 阅读全文

posted @ 2011-05-10 23:42 senly 阅读(1120) 评论(0) 推荐(0)

CSS Sprites

摘要：CSS SpritesCSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个阅读全文

posted @ 2011-05-10 23:41 senly 阅读(486) 评论(0) 推荐(0)

设置frameset的高度

摘要：设置frameset高度目前做了一个项目，界面如下：这是使用frameset做的，在宽屏下开发一直没有发现什么问题，直到一个用户使用800*600的机子测试的时候，才发现整个界面都被变形了。那时整个frameset页面只有600像素高度，frameset嵌套的frame出现了滚动条，实在难看。怎么把frameset的高度设置高点，让其嵌套的frame页面没有滚动条，而让frameset有滚动条呢？ frameset的高度是设置不了的，比如：frameset rows="110,*" style="height: 1900px;"。这时的页面还是屏幕的高度，并不是1900px；设置fram 阅读全文

posted @ 2011-01-11 10:05 senly 阅读(10780) 评论(4) 推荐(1)

div块在屏幕上左右居中并且垂直居中

摘要：面试题中有一个这样的问题，如何将一个DIV块在屏幕上左右居中并且垂直居中？效果如下图：制作原理：这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二1、样式如下：style type="text/css".main{ position:absolute; top:50%; left:50%; width:200px; height:100px; margin-top:-50px; margin-left:-100px; border:1px solid red; line-height:30px; font-size:16px; text-align:cent 阅读全文

posted @ 2011-01-07 23:32 senly 阅读(20657) 评论(0) 推荐(0)

随笔分类 - div+css

IE6的position:fixed

css秘籍：复选框与文字对齐的问题

CSS自定义滚动条样式

iframe 父窗口和子窗口相互的调用方法集锦

44种IE css bug实例测试总结

IE6不支持position:fixed的解决方法

jquery菜单左右翻屏效果

内部链接

浅谈 CSS Sprites 技术以及图片优化

CSS Sprites

设置frameset的高度

div块在屏幕上左右居中并且垂直居中

JavaScript使IE6下png背景透明对单击事件的影响

自适应宽度圆角按钮，导航，用到了滑动门技术

2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法

CSS3学习笔记（一）

滑动门学习第二步

滑动门学习第一步

用CSS设置Table的细边框的最好用的方法

通过iframe调用页面的一部分，实现自己想要的页面

导航

公告