不多说,最近在做网页的时候用到了,顺便记录一下。这里可以看效果
<script type="text/javascript">
function changes(obj){
var TextIn=document.getElementById("textin");
if(TextIn.createTextRange){
//ie兼容
TextIn.focus();
document.selection.createRange().duplicate().text=obj;
}else{
//firefox兼容
var iStart = TextIn.selectionStart;
var iEnd = TextIn.selectionEnd;
TextIn.value=TextIn.value.substring(0,iStart)+obj+TextIn.value.substring(iEnd,TextIn.value.length);
endRange=iStart+obj.length;
TextIn.setSelectionRange(endRange,endRange);
}
}
</script>
<textarea cols="40" id="textin">选中这里的文字,然后点change试试看。</textarea><input type="button" onclick="changes('文字被替换了!')" value="change" />
早就发现Lokesh Dhakar的lightbox的效果很酷,今天又发现另一个国外达人Nathan的Hoverbox,纯CSS的技巧,酷。
把两个东西简单结合一下,其实花不了什么技巧,不过东西更酷了一点。
Lightbox and Hoverbox: 看效果演示 | 下载 (338kb)
Nathan向我们解释了Hoverbox的实现:
The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6, a series of * html hacks place the positioning on the containing a href.
最近渐渐的开始使用“标题标签”,其实这个标准的HTML标签是很酷的。
以前你这样定义你的blog名称
<div class="title">fireyy blog</div>
然后写css样式
.title {
font-size:20px;
font-weight:bold;
}
这种方式其实很不直观,(有虚荣心的人总是想让搜索机器人很简单的认出你的代码 :))
你可以尝试使用h1
<h1>fireyy blog</h1>
然后写css样式
h1 {
font-size:20px;
font-weight:bold;
margin:0px; /*h1-h6默认有空白,设定外补丁的值为零,以便自己细调。*/
}
另外你可以看看H1-H6和其他尺寸的对照表
由于本站的天气预报的图片是png格式的,png在IE7.0之前的版本里不会显示透明,所以只能加了一个js来实现png透明,于是就用到了IE条件注释。(具体可以看本页面源代码 ;))
条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。
<!--[if IE]>这是Internet Explorer< ![endif]-->
<!--[if IE 5]>这是Internet Explorer 5< ![endif]-->
<!--[if IE 7]>这是Internet Explorer 7< ![endif]-->
<!--[if gte IE 5]>这是Internet Explorer 5 或者更高< ![endif]-->
<!--[if lt IE 6]>这是版小于6的Internet Explorer< ![endif]-->
<!--[if lte IE 5.5]>这是Internet Explorer 5.5或更低< ![endif]-->
注意两个特殊的语法:
gt: 大于
lte: 小于或等于
!IE 感叹号的使用