CSS教程:網(wǎng)頁(yè)input輸入框立體效果

2024-07-11 09:04:33

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(www.companysz.com)文章簡(jiǎn)介：去年常常玩開(kāi)心網(wǎng)，耗在上面的時(shí)間也不少，停車(chē)位、買(mǎi)賣(mài)奴隸等等。雖然開(kāi)心網(wǎng)也不是始祖（模仿facebook和校內(nèi)）。但娛樂(lè)之余，我還是好好的研究了一下開(kāi)心網(wǎng)，它的交互式做的很出色.

在平時(shí)，常常會(huì)提醒自己要做一個(gè)善于發(fā)現(xiàn)的人，時(shí)刻發(fā)現(xiàn)細(xì)節(jié)，這樣才會(huì)更加懂得生活、會(huì)讓生活更加精彩。

在學(xué)習(xí)上也是如此，我們常常會(huì)發(fā)現(xiàn)有很網(wǎng)站做的很棒，成了爭(zhēng)像模仿的對(duì)象，他們好在哪里？一定有他們的可取之處、有他們值得去研究和學(xué)習(xí)的地方。

去年常常玩開(kāi)心網(wǎng)，耗在上面的時(shí)間也不少，停車(chē)位、買(mǎi)賣(mài)奴隸等等。雖然開(kāi)心網(wǎng)也不是始祖（模仿facebook和校內(nèi)）。但娛樂(lè)之余，我還是好好的研究了一下開(kāi)心網(wǎng)，它的交互式做的很出色，舉一個(gè)例子：

下拉的select框沒(méi)有用傳統(tǒng)的下拉式，而是用層的彈出和隱藏來(lái)代替?zhèn)鹘y(tǒng)的select下拉框，如圖：

CSS教程:網(wǎng)頁(yè)input輸入框立體效果

這里不去研究它的具體實(shí)現(xiàn)方法，來(lái)探討一下input輸入框的實(shí)現(xiàn)方法，剛好在最近的項(xiàng)目中我也用到了此表現(xiàn)形式。

CSS教程:網(wǎng)頁(yè)input輸入框立體效果

剛開(kāi)始在迷茫用css是怎么實(shí)現(xiàn)的，放大來(lái)看會(huì)發(fā)現(xiàn)其實(shí)很簡(jiǎn)單：

CSS教程:網(wǎng)頁(yè)input輸入框立體效果

用firebug查看源代碼，發(fā)現(xiàn)，在input外面再添加一個(gè)span標(biāo)簽，定義span的border為灰色（#979797），再把input的默認(rèn)狀態(tài)的border定義為白色，鼠標(biāo)點(diǎn)擊后定義border-left和border-right為黑色（border-left:1px solid #000; border-top:1px solid #000}）。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input輸入框研究</title>
<style type="text/css">

</style>
</head>
<body>
<span class="it_s"><input type="text" name="textfield" onblur="this.className='it1';" onfocus="this.className='it2';" class="it1" size="25"/></span>
</body>
</html>