CSS
文章平均质量分 50
nelson
一个幸运的从windows开发转到liunx开发的前端工程师~
前端的喜怒哀乐,一一印记心中。
无论如何要记住,我们是做产品的!希望你也能明白这句话的意思。;)
展开
-
非IE下,iframe的width以及height为0时呈现小黑点
<br />今天在修改一个页面bug是,发现了小黑点。很是奇怪就用firebug看了一下,发现是iframe搞的鬼,删掉它就消失了。<br />具体对应的iframe代码是:<br /><iframe width="0" height="0" src="about:blank" id="aliwangwangSendmsgShowFrame" name="aliwangwangSendmsgShowFrame"></iframe><br />例子:<br />很奇怪这个为什么会显示小黑点呢,然后不同的浏览器原创 2010-10-13 14:37:00 · 497 阅读 · 0 评论 -
在不同浏览器(除Opera)下的,背景渐变的CSS实现
这里我自己写了一个demo CSS:/* 背景颜色渐变 */.gradient-top{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ADD8E6", endColorStr="#FFFFFF", gradientType="0");/* for IE */ *height: 100%; background: -moz-linear-gradient(top, lightblue, white 100原创 2010-11-25 11:55:00 · 583 阅读 · 0 评论 -
很奇怪的chrome
<br />今天写代码时发现,设置font-size:0.5em在chrome下一直不起效果,很是纠结啊。后来查看了很多,然后偶然在蓝色理想上发现了,说是google chrome下,字体的最小局限是12px,不能再缩小了,很是纠结,O(∩_∩)O哈哈~不过也没什么,一小点差异并不能说明什么。最重要的就是知道了有这么回事就可以了!<br />就这样了。原创 2010-11-25 22:10:00 · 321 阅读 · 0 评论 -
树
<br />虽然知道有一款jsTree的插件,但是自己还是想自己亲自写一个类似的东西,毕竟看别人的不如自己亲自动手写来得好来得快。<br />思路大致如下:假设边框的值为1px,每个节点(除了最顶端的root)父级节点都有对应的背景;一个节点如果他有下一个兄弟节点,那么它的左边框就有对应的为1px的边框,并且背景左移1px。<br /><!doctype html><html><head> <title>template</title> <meta charset="utf-8" />原创 2011-03-13 18:30:00 · 239 阅读 · 0 评论 -
CSS高度自适应
<br />网上有相关的文章,但是都没有说思想。之前只是有这个认识,但是没有亲自写过类似的东西,这回做了一个这样类似的东西。发现一个道理就是:只看不做,终无成也。<br />经过自己的尝试,发现需要两个前提:<br />1、高度自适应的这个元素,假设为A,它必须要有一个或多个它的兄弟元素(节点),假设为B;<br />2、Height(B) > Height(A)。<br />如果不符合上面的条件的话就没必要做自适应了。<br />需要做的有两点:<br />1、对A的父级元素(节点),假设为C,设置:ov原创 2011-03-29 17:16:00 · 426 阅读 · 0 评论 -
有趣的字体
1234567890Windows Vista Windows Apple Calibri(中国1234567890)Arial(中国1234567890)Arial(中国1234567890) Arial Black(中国1234567890)Arial Black(中国1234567890) Comic Sans MS(中国1234567890)Comic Sans MS(中国1234567890)Consolas(中国1234567890)Courier New(中国123456原创 2011-04-18 16:33:00 · 537 阅读 · 0 评论 -
inline-block不一样的用处
今天遇到一个问题,说的就是很多个链接,类是友情链接的东西,一并都在一块。然后要让他们换行输出,但是有几个不兼容的问题:一是,不同操作系统所采用的字体不同时,每个字体对应的宽度就不确定,然后它到底会不会溢出是未知的。二是,每种浏览器的显示是有差别的,字体这个东西很难去精确定宽的,除非采用em设定宽度(但是对于中栏固定宽度来说,几乎没有人会去采用em设定宽度的)。原创 2011-04-20 14:45:00 · 263 阅读 · 0 评论 -
卡盘(更新版)
想了想还是重新写过卡盘的实现吧,当然,还是去实现那种一直向上滚的模式,因为我觉得这种方式在交互上,更重要的是用户体验上更人性化。然后根据我之前写的卡盘,做了两种写法,(当然,这回我使用的是jquery)大致如下:First Grid Demo原创 2011-05-02 10:53:00 · 571 阅读 · 0 评论 -
使用simsun来替代css里的宋体写法
CSS里有一个比较特别的属性:font。也不知道几时开始大家都使用这样一个定义:font-family: ‘宋体’; 但是这样定义后,我们有时就可能出现这样一种情况,我们定义了是宋体字体,但是显示的怎么是别的字体呢?这里说的别的字体主要是ie默认的serif。而样式加载到页面后,原创 2011-08-05 14:22:20 · 1157 阅读 · 0 评论 -
chrome下input[type=text]的placeholder不垂直居中的问题解决
但是在chrome下显示的search word并不能垂直居中。后来找了很久终于在stackoverflow上找到了对应的方法。参考:http://stackoverflow.com/questions/4919680/html5-placeholder-css-pa原创 2011-09-19 13:07:06 · 4088 阅读 · 0 评论 -
谈谈DOM结构的重要性
其实在很多Web前端招聘都很少谈及DOM结构的问题,大多都跟JS有关。但是nelson个人认为一个好的页面的含义更重要的是一个好的DOM结构,因为页面的内容都是通过DOM结构呈现给用户的,所以一个好的前端工程师所具备的远远不止会写好一段好的JS代码。一个好的DOM结构能够少写原创 2011-08-25 07:23:11 · 726 阅读 · 0 评论 -
想了想还是总结一下CSS hack
顾名思义IE6的经典hack是:一个下划线"_",比如:_color: #FF0000;不过这个样放在最下面。之后是IE6&7的HACK是:一个星号"*",比如:*color: #FF0000;不过这个应该放在_hack的前面所以有人总结了一下,得到了下面这张图:原创 2010-11-25 11:48:00 · 207 阅读 · 0 评论 -
使用inline-block进行图文列表布局
据yss对目前的现有的图文列表布局有两种:一种是采用表格的方式;第二种采用li方式。而yss今天要说的也是li方式,但是是在它基础上进行了一次创新。创新点就在于采用了inline-block模式去设定li。/* inline-block 说明 */IE6&7是原创 2011-10-16 08:49:09 · 586 阅读 · 0 评论 -
CSS实现遮盖层
大部分遮盖层都是通过JS去获取高度和宽度来定位的,而现在采用的大部分是CSS去做,除了一个为了兼容IE6所必要的js。大致原理就是:让遮盖层的height和width达到100%来去实现,IE6下需要将body的height设为100%才有效。具体的代码如下: CSS 实现遮盖层 /* the style for layer or mask */ body{_heig原创 2011-11-16 15:08:36 · 2457 阅读 · 0 评论 -
在CSS遮盖层基础上进行弹出层垂直居中
本篇是继上篇《CSS实现遮盖层》而来。在上一次的基础上加上了弹出层的垂直居中。需要:1. 弹出层固定高,或者通过js去计算出来的高。具体实现: 1. 在弹出层处加一层类似遮盖层的包裹;2.设定宽度,这个是必须的。3. 对弹出层使用:margin-left & margin-right: auto; (水平居中); 4. 对弹出层使用: top: 50%; margin-top: -heig原创 2011-11-17 10:21:13 · 1602 阅读 · 0 评论 -
记录一下简易版的页码生成器
也写一下页码生成器。在使用的时候需要使用事件代理的方式去注册事件。基本思路就是判断e.target||e.srcElement的nodeName为A,先去data-val存在则计算,不存在则取元素对应的firstChild.nodeValue即可得到页码。大致如下:function delegate(o){ o.addEvent('click', function(e){ var t原创 2012-03-02 14:24:45 · 460 阅读 · 0 评论 -
a demo for css transform and transition
把鼠标放过来看看图标是怎么动起来的上和吉恩什么是什么呢?看看chrome是如何变色的。原创 2010-11-18 20:43:00 · 400 阅读 · 0 评论 -
图片垂直居中的实现
做的时候没有想到线上有现成的代码可以参考,网上说了很多,总的思路是都是一样的。下面写一下今天做的一个垂直居中的CSS:对应的CSS是:div{ width: 160px; height: 160px; position: relative; display: table-cell; vertical-align: middle; *font-size: 120px; line-height: normal; text-align: center;}这样子就可以了。原创 2010-11-11 17:38:00 · 274 阅读 · 0 评论 -
变大宽度来实现li的定位
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div><style type="text/css"> div{ overflow: hidden; width:700px;}原创 2010-11-11 17:45:00 · 297 阅读 · 0 评论 -
Chrome and Safari下overflow相关问题
<br />今天修复一个bug:购物车确认页面在chrome和Safari下出现滚动条的bugfix<br />看了一下代码里面有这么一段话:<br />html{<br />overflow-y: scroll;<br />}<br />但是仅仅设置这句话,overflow-x默认值就应该是visible呀!<br />试了一下加上overflow-x: visible; 依旧有滚动条,这样就排除了不是默认值的可能。<br />后来看了原来是scroll的问题,因为当使用scroll时chrome和Saf原创 2010-10-12 09:54:00 · 1482 阅读 · 0 评论 -
CSS3的新特性以及IE下的实现
<br />随着浏览器的升级,CSS3已经可以投入实际应用了。<br />但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法。<br />以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正。<br />一、圆角(Rounded Corner)<br /><br />.box_round {<br /> -moz-border-radius: 30px转载 2010-10-12 13:49:00 · 564 阅读 · 0 评论 -
CSS 半透明滤镜在FIREFOX和IE下面的能够通用的写法
<br /> <br />CSS代码<br />filter: Alpha(opacity=10); -moz-opacity:.1; opacity:0.1; <br /> 这三句中:第一句是ie 支持; 第二三句是firefox支持的,但是火狐。版本不一样就有两种了,所以用时候把三句都加上就行了。<br />滤镜的有效HTML标记:<br />BODY<br />BUTTON <br />DIV <br />IMG <br />INPUT <br />MARQUEE <原创 2010-12-08 09:43:00 · 386 阅读 · 0 评论 -
IE6下!important生效的三种情况
今天出于学习的目的细心的查看剑平发的那个用CSS实现的步骤条代码:莫名的发现一个问题就是line-height: 0px !important;在IE6下是生效的。后来通过在google上的搜索发现有两篇博客讲了important在IE6下存在的问题:1) 下面这篇博客说的是当CSS里面对应得line-height只有这一个:line-height: 0px !important;时,IE6是会忽略掉important,解析成line-height:0px;的。http://bytesizecss.com原创 2010-12-08 09:46:00 · 662 阅读 · 0 评论 -
IE9下,display:inline-block下的子标签position:absolute定位时作用在上面的margin属性失效。
试试新功能如果你用的是IE9的话,你就可用看到下面的效果图:试试新功能无论如何设置margin-right或者其他margin属性原创 2010-10-21 16:51:00 · 1127 阅读 · 0 评论 -
behavior:expression((this.hideFocus=true) && (this.behavior='none'));
这种写法可以避免expression多次运行,确实不错,学习了。原创 2010-10-22 16:35:00 · 718 阅读 · 0 评论 -
省份选择器DPL
<br />做什么呢?直接贴代码,看得更清楚:<br /><!doctype html><html><head><meta charset="gbk"><title>First Grid Demo</title><link rel="stylesheet" charset="gbk" href="css/tbsp.css" mce_href="css/tbsp.css" media="screen" /><style>body{ padding-left: 30px;}原创 2010-12-13 09:24:00 · 415 阅读 · 0 评论 -
在淘宝里,他们总结的一些前端Tips
<br />3.2 - 3.5<br /> <br />1.【约定】文件命名全部都用小写和下划线,样式命名全部使用小写和连接符,JS的钩子使用“J_HiTao”<br />2.【HTML】需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用以”data-“为前缀来添加自定义属性,避免使用”data:”<br />3.【约定】文件要求编码必须为GBK、GB2312或者GB18030<br />4.【HTML】html代码要求所有的标签、属性都是用小写字母转载 2010-12-15 17:53:00 · 1261 阅读 · 0 评论 -
css相关文本样式探究
white-space : normal | pre | nowrap 这个属性的话一般要用的话就是后面的nowrap了,意思就是让一个标签里的内容在一行显示,如果这行显示不下就换一行显示出来。有兴趣可以参考百度的首页,它上面就用到了这个属性,这是在我学习CSS时查看百度首页CSS时发现的。word-wrap : normal | break-word 这个属性主要使用的是break-word,用于强制换行显示。比如一个很长的字符串:asdfdfasd原创 2010-10-25 11:13:00 · 301 阅读 · 0 评论 -
display:inline-block的通用写法。
经过自己的测试以及参考了怿飞的博客,最后总结了一下display:inline-block在各个浏览器下通用的写法为:实例1display:inline-block;*display:inline; *zoom:1;实例2display:inline-block;*display:inline; *zoom:1;上面的例子的样式就是采用了呈现在了你的面前代码,看看效果就知道了。原创 2010-10-26 11:52:00 · 336 阅读 · 0 评论 -
CSS写的一个小型的提示框
First Grid Demo原创 2010-11-04 16:22:00 · 445 阅读 · 1 评论 -
卡盘(Slide)的最后一步探究
之前觉得很不可思议,淘宝卡盘(Slide)一直都是向上滚动,不出现像其他网站那样的滚到最后一个后,马上倒退式的滚到第一个位置。相比之下前者的体验非常好,而后者就不是那么好。然后今天看了看它的源代码,写得很分散,看来看去还是没看到最后一步的处理方式。(当然之前也问过玉伯,不过没有被搭理)然后就开始自己尝试着去写,写着写着就发现,如果把第一个展示出来的部分(通常是第一个li)clone到最后一个li的后面,奇迹就出现了。完美的实现了淘宝的那种卡盘。js代码如下:var index = 0, // 当前卡盘对应的原创 2010-12-29 20:23:00 · 597 阅读 · 0 评论 -
用CSS做的一个带边框的小三角 (form 水门 a big lovely boy)
今天很开心因为解决了自己N久需要却没有得到解决的问题就是这个带边框的小三角。O(∩_∩)O哈哈~贴一下自己做的一个小demo的源代码:First triangel with border Demo原创 2010-11-05 11:23:00 · 815 阅读 · 0 评论 -
CSS Border使用小分享 copy from 乔花 at taobao ued blog
之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里.原理css盒模型一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状.示例1一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图#test1 { height:20px; width:20px; bo转载 2010-11-05 11:29:00 · 287 阅读 · 0 评论 -
今天结合了前面写的几个小提示框,这回继续完善了一下,所以接着show一下
First Grid Demo原创 2010-11-05 16:20:00 · 254 阅读 · 0 评论 -
经典背景自适应导航栏布局之我见
一、前言说起导航栏,几乎是每个网站必不可少的,也是极为重要的一部分。开始介绍一下我所认为的一种比较好的自适应导航栏实现。二、基本的HTML实现html是一切网页的基础,也是最最重要的一部分,它决定了你怎么写CSS,JS。这里可以大概参考我之前写的一篇,论HTML的主要性。 首页 招聘职位原创 2012-08-30 19:43:48 · 1001 阅读 · 0 评论