<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS實現(xiàn)的一種交互體驗</title>
<style>
@charset "utf-8";
/*元素初始值*/
html {background: #FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;}
p{cursor: text;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul{list-style-type: none;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
img{display:block;}
caption,th{text-align:left;}
body{position: relative;font-size:62.5%;font-family: "宋體"}
a{text-decoration: none;}
/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;}
#need li:hover,#need li.hover {background: #FFE8E8;}
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;}
#need label {padding-left: 30px;}
#need label.old_password {background-position: 0 -277px;}
#need label.new_password {background-position: 0 -1576px;}
#need label.rePassword {background-position: 0 -1638px;}
#need label.email {background-position: 0 -429px;}
#need dfn {display: none;}
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;}
</style>
<script type="text/javascript">
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
hover = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
suckerfish(hover, "li");
</script>
</head>
<body>
<ol id="need">
<li><label class="old_password">原始密碼：</label> <input name='' type='password' id='' /></li>
<li><label class="new_password">新的密碼：</label> <input name='' type='password' id='' /><dfn>（密碼長度為6~20字節(jié)。不想修改請留空）</dfn></li>
<li><label class="rePassword">重復(fù)密碼：</label> <input name='' type='password' id='' /></li>
<li><label class="email">郵箱設(shè)置：</label> <input name='' type='text' id='' /><dfn>（Codemoz! 承諾絕不會給您發(fā)送任何垃圾郵件。）</dfn></li>
</ol>
</body>
</html>
當前位置：首頁 > 長沙網(wǎng)站建設(shè) > 網(wǎng)頁表單特效
網(wǎng)頁表單特效
優(yōu)度網(wǎng)絡(luò)
1790
發(fā)表評論
相關(guān)文章
2021年優(yōu)度成功簽約并完成泰坦凝膠官網(wǎng)
此網(wǎng)站采用標準網(wǎng)站建設(shè)方案，PC+移動自動轉(zhuǎn)換模式，網(wǎng)站產(chǎn)品為一款火爆的微商產(chǎn)品，也是一款男性用品。...
備案與沒備案的新網(wǎng)站老域名為什么百度都不收錄？
現(xiàn)在互聯(lián)網(wǎng)越來越難做，百度的門檻越來越高，以前新網(wǎng)站上線提交后3天就會收錄，現(xiàn)在新網(wǎng)站上線每天提交還不一定會收錄，必須結(jié)合外鏈才有效。...
做好“著陸頁”，公司銷售業(yè)績將提升一大步
當今，一個能在用戶尋找“返回”按鈕之前抓住用戶眼球的著陸頁比以往任何時候都更有商業(yè)價值。值得慶幸的是，一個好的著陸頁面的設(shè)計過程比以往更加容易把握，訣竅在于弄清楚實現(xiàn)這個非常重要的切入點所需的核心要素...
什么是關(guān)鍵詞？
關(guān)鍵詞就是你向搜索引擎發(fā)出的一個指令，是讓搜索引擎幫助你查找相關(guān)信息的命令，它可以是一個字，也可以是一個詞、一句話、一個英字母、英文單詞、一個數(shù)字、一個符號等任何可以在搜索框中輸入的信息。...
什么樣的網(wǎng)站才是一個合格的SEO網(wǎng)站？
在講網(wǎng)站之前還是來介紹一下什么是網(wǎng)站，因為這里的學(xué)員還有很多SEO初學(xué)者，網(wǎng)站就好比是我們在某個商場、某個小區(qū)開的一個店鋪，你做生意肯定是有一個店鋪的對吧，那么網(wǎng)站就是一個互聯(lián)網(wǎng)上的店鋪，是一個虛擬的...
湘公網(wǎng)安備 44010402000311號