2006-05-11[原]用CSS实现图片说明提示2
TAG：原创 CSS今天发呆的时候才想到，把一种更直接简单的方法给忘记了，因为这里使用了绝对定位，所以可以使用z-index属性。
------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------
看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：
-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
z-index:2;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
z-index:3;
}
ul li a:hover{
z-index:1;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------
不过很可惜，在IE中还是不能正常显示。
2006-05-10[原]用CSS实现图片说明提示
TAG：原创 CSS在网上会看到那种当鼠标放到一张图片上就会在图上面出现一个说明文字之类的东东， 用JS来控制层的隐藏和显示，可以很容易的实现这个效果。
今天我们不是要说用JS怎么实现，而是来看看用CSS怎么实现这个效果。
首先按正常的思路：跟状态有关的就只有用链接的四个状态，当鼠标放到图上时，让说明文字显示出来，移开时隐藏，那说明的文字放在哪个位置？下面来看下HTML部分怎么写：
------------------------HTML------------------------------
<ul>
<li class="photo1"><a href="#"><q>text1</q></a></li>
<li class="photo2"><a href="#"><q>text2</q></a></li>
</ul>
----------------------------------------------------------
想要让说明文字跟鼠标状态有关联，就得将文字放到<a></a>里面，图片就当成背景放入，这样就可以让文字在图片上面出现了。下面是样式部分：
-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link q, ul li a:visited q, ul li a:active q{
display:none;
}
ul li a:hover q{
display:block;/*显示说明文字*/
}
.photo1{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------
ＯＫ，现在到IE看看效果，是不是没有效果？没错，在IE里是没有效果的，我想可能是因为文字一开始就隐藏了，所以也就没有位置可以触发它显示。可是在FF中是完全没问题的哦！IE不能显示，多少还是有点可惜，不如就换个思路吧，既然先隐藏了不行，那就让它不隐藏不就行了。先改改HTML部分：
------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------
看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：
-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
display:block;
}
ul li a:hover{
display:none;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------
这个思路就是“三明治”，将说明文字放在两个相同图片的中间，当鼠标经过时把上面的图隐藏，就会出现说明文字，这样看起来的效果就跟说明文字出现一样了，当然这只能算是一种障眼法，当图片是透明背景时问题就会出现。
2006-05-08[转]HTML标签参考
TAG：WEB标准 文章分享下面的包含了所有的属于最新的有效的Strict-XHTML标签资讯。
This section contains information about all of the valid tags belonging to the latest version of strict XHTML
结构
html head body div span
Meta信息
DOCTYPE title link meta style
文本
p h1, h2, h3, h4, h5, h6 strong em abbr acronym address bdo blockquote cite q code ins del dfn kbd pre samp var br
链接
a base
图象和对象
img area map object param
列表
ul ol li dl dt dd
表格
table tr td th tbody thead tfoot col colgroup caption
表单
form input textarea select option optgroup button label fieldset legend
Scripting
script noscript
表现
b, i, tt, sub, sup, big, small, hr
转自：HTML Dog
2006-05-08[转]符合Web标准的超链接
TAG：WEB标准 文章分享在HTML4.0Strict和XHTML1.0STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题。
HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的。规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事实上.规范里允许开发人员自由的使用非标准属性值做特定的运用。
在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口。
不符合最新Web标准的链接代码:
<ahref="document.html"target="_blank">externallink</a>
运用rel属性:
<ahref="document.html"rel="external">externallink</a>
现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接。
首先我们要判断浏览器.
if(!document.getElementsByTagName)return;
getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.
下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:
varanchors=document.getElementsByTagName("a");
anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:
for(vari=0;i<anchors.length;i++){
varanchor=anchors;
找到要实现新开窗口的<a>标签
if(anchor.getAttribute("href")&&
anchor.getAttribute("rel")=="external")
接下来.建立属性值target并赋值"_target":
anchor.target="new";
完整的代码:
------------------------
functionexternalLinks(){
if(!document.getElementsByTagName)return;
varanchors=document.getElementsByTagName("a");
for(vari=0;i<anchors.length;i++){
varanchor=anchors;
if(anchor.getAttribute("href")&&
anchor.getAttribute("rel")=="external")
anchor.target="new";
}
}
window.onload=externalLinks;
转自：中国SOHO网
