Posts tagged with html

entry 兼容 FF&IE 的替换鼠标选择文字方法

不多说,最近在做网页的时候用到了,顺便记录一下。这里可以看效果

<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" />

entry Lightbox and Hoverbox

早就发现Lokesh Dhakarlightbox的效果很酷,今天又发现另一个国外达人NathanHoverbox,纯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.

entry h1h2h3h4h5h6标签的使用

最近渐渐的开始使用“标题标签”,其实这个标准的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和其他尺寸的对照表

entry IE条件注释方式

由于本站的天气预报的图片是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 感叹号的使用
← Previous  1 2 3 4