当前位置：懒人建站 > 网页特效 > JS表单提示特效代码（dl/dt/dd结构）

JS表单提示特效代码（dl/dt/dd结构）

作者：佳明妈来源：懒人建站 2009-12-12 人气：

一个老外写的JS表单提示特效代码，dl/dt/dd结构。JS代码与HTML表现层完全分离，这是老外的一贯作风，这样的代码非常易于修改，和复用性，因为表现层的完全分离，同一段JS，通过表现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<title>JS表单提示效果代码（dl/dt/dd结构）_懒人建站http://www.51xuediannao.com</title>
<style type="text/css">
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 130px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
/* The hint to Hide and Show */
.hint {
display: none;
position: absolute;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
/* to fix IE6, I can't just declare a background-color,
I must do a bg image, too!  So I'm duplicating the pointer.gif
image, and positioning it so that it doesn't show up
within the box */
background: #ffc url("http://51xuediannao.com/uploads/soft/texiao/biaodantishi/ico01.gif") no-repeat -10px 5px;
}
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url("http://51xuediannao.com/uploads/soft/texiao/biaodantishi/ico01.gif") left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>懒人建站为您提供-各种bolg制作技巧，HTML技巧，CSS技巧和CMS使用技巧</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

一个老外写的JS表单提示特效代码，dl/dt/dd结构。JS代码与HTML表现层完全分离，这是老外的一贯作风，这样的代码非常易于修改，和复用性，因为表现层的完全分离，同一段JS，通过表现层HTML代码结构的不同，配合CSS就可以产生千变万化的效果。

国内一些程序员总是喜欢把程序和HTML结构混在一起，见一些程序员这样混着写，建议这样的分离写法，从不被采纳。(^o^)/~

此演示代码需要一张图片： JS表单提示效果代码（dl/dt/dd结构）

(图片上点右键另存图片) ，当然你完全可以自己定制你的界面。

↓ 查看全文

本文链接：JS表单提示特效代码（dl/dt/dd结构）https://www.51xuediannao.com/js/texiao/biaodantishi.html

JS表单提示特效代码（dl/dt/dd结构）由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：利用图片自定义DIV层滚动条
下一篇：一张图片实现鼠标滑过缩略图显示大图片JS代码

JS表单提示特效代码（dl/dt/dd结构）

JS表单提示特效代码（dl/dt/dd结构）-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

JS表单提示特效代码（dl/dt/dd结构）

JS表单提示特效代码（dl/dt/dd结构）-相关文章

JS表单提示特效代码（dl/dt/dd结构）-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户