Redky

1,页面中这样效果：

xxxxxx                             xxxxxxx

左侧内容是变化的,长度不固定；右侧内容是死链接; 并且外层宽度是固定的。
前两天产品说存在bug,已上线, 要尽快修复. 当时临时固定了左侧的宽度, 解决了当天的问题.
今天内容少了, 长度小了, 问题又回来了(但并不严重); 下班正好有时间进行了修正.在此备忘;

<span class="wrap"><a href="#">xxxxxxxxxxxxxxxxxxxxxx</a></span><span class="star">xxxxxxx</span>

.mod{overflow: hidden;height: 24px;line-height: 24px;}
.wrap,.time{float: left;}
.wrap{width: 100%;}
.time{width: 96px;margin-left:-96px;}
.wrap a{display: block;margin: 0 100px 0 10px;}

2, 在设置中心有a不选中, 则b选项, B,C内容块, 置灰效果;(BC块里面的事件全部取消, hover,click等等)
方法：
a末选时, 设置b的disable为true即可, 同时给B,C绑定一个data,为true或者false;
B,C块根据data值, 设置自身的opacity, 主要是提示用户,这里不可点击, 无任务操作;
里面的事件就简单了, 在执行操作时, 判断data值;如果是设置的值, 则不进行任务操作即可;

周末在家里整理文档，特别是把之前收集CSS看了一下. 觉得这个图像替换还不错.直接上代码.

HTML代码：

<h1><a href="http://www.google.com" id="ghome">google home page</a></h1>

#logo{
	display:block;
	padding-left:276px;
	height:110px;
	width:0px;
	overflow:hidden;
	background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
}

1. getAttribute在ie下有两个参数,都可选.在取href时有用. demo
   obj.getAttribute(“href”,1) —取得的是绝对地址。
   obj.getAttribute(“href”,2) —取得的就是页面上所些的，写的是相对的就相对的，绝对的就绝对的.说明 在写attr函数时,找到相关资料;可以在上面Demo中查看源码找到attr函数.
2. setTimeout/setInterval函数在使用时,加上所属对象.window.setTimeout(fn,time)
3. 在阻止默认操作和冒泡时,使用e.preventDefault()/e.cancelBubble = true;
   e.stopPropagation()/e.returnValue = false; 而不是直接使用return false;
4. 在chrome中,input元素focus事件触发select函数存在问题.
   使用window.setTimeout(function(){that.select(); },0);解决.
   window.setTimeout作用是把事件增加到进程最后(js单线程)
5. 在数组等查询中,如果可以使用===操作符,就使用它(比如严格)
6. 可用性方面,很多站点还需要做优化处理.这两天感受到的:有用户,只要可以使用鼠标操作的，他就不会再使用键盘(搞开发的应该会觉得键盘比鼠标更快)。比如让用户填写专业,那用户focus后,把专业呈现出来会是更好的选择,用户直接用鼠标点下就ok了; 用户相当很懒！
7. 养成良好的编码习惯很重要,谢谢师兄.

ps: 北京528路上的人真多， 从起点坐车 还是没有座！

在之前看《精通CSS》是，学习过CSS的映射. 实例是：Flickr网站。

在最近一个项目中,也遇到这里的情况。把超链接映射到一个图片上,来解决一些其他的问题。

问题出来了： 在Firefox/chrome上完全没有问题.在IE系列上不能点击.

在项目负责人的催促下,直接使用了”图片热区”。很快就解决了问题.

但是遇到问题我总得解决吧,要不然只能在这个行业混混…，所以在家里想办法。

• 测试1: 为了找超链接在什么地方.给a加边框.(注释:为了达到效果,我已经把文字text-indent:-200px;)
  发现超链接还在想要定位的地方.
• 测试2：把文字处理去掉. text-indent:-200px;去掉. 文字可以点击. 但是范围只有文字那么大.
• 测试3：给它加上background-color:#FFF; 背景的范围却是想要的范围.
• 测试4：因为这里不能加背景颜色来扩大范围. 只好加个完全透明的背景图片.效果达到.

为什么加上背景就能达到效果? 了解的朋友请告诉我。（例子: http://www.jimzhan.com/demo/link.html）

圆角的实现原理其它不难,不过一般写html和css代码不会注意到.

但是设计人员或者玩过ps/fw的人都应该注意过.圆角是由方块组成排列组成的,可以随意找个圆角,然后截图放到ps/fw里面,再放大看看效果,就明白原理了.

百度hi的圆角是使用的一个10px的圆来实现的,不过它的额外代码还是那样的多,比起google,不怎么喜欢它.

先看google的圆角(注:不用图片,并且使用html代码少,从而可维护性强)

css code:

(把注释放到css里面看了看,太乱了,还是把分析放 到后面吧.)
先看张图片,它是实现的原理:

.
(注:在这里谢谢志彬,是他让我理解圆角实现的原理.)
直接分析代码:

因为要自适应width,所以把块元素设置成行元素 (inline),同时要具有块元素(block)的性质——下面要用到margin-top属性

让ie67浏览器可以使用 display:inline-block;

针对ie6浏览器设置,如果使用margin:0 -npx;那么会隐藏越过父元素的内容,而使用position:relative;可解决这个问题.但它同时又造成了margin-left设置无效的 问题.引出下面使用left处理.注:针对ie7如果不使用position:relative;本身没有问题,但使用后,便有margin-left无 效的问题.注:这里使用position:relative;应该是把内容的父元素全部设置成相对定位,兼容所有浏览器,方便对内容进行处理

针对ie67浏览器向左移动2px,最后形成3px 圆角.把截图放到ps/fw里面放大看看效果

使用颜色把border覆盖

这两个是关键了,其实看看圆角大图的话,一下子就明白 了.但还是要说明一下:针对ie浏览器,margin-left属性已经不起作用了.原因在于position:relative;那句.

下载code