Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
話不多說(shuō),直接來(lái)看,你要實(shí)現(xiàn)這個(gè)功能:點(diǎn)擊提交按鈕,如果email沒(méi)有填寫,就提示報(bào)錯(cuò)信息,如下圖
一般你會(huì)這樣設(shè)計(jì),首先看HTML結(jié)構(gòu)如下,很簡(jiǎn)單沒(méi)什么特殊的,
用CSS給他們美化一下,顯示如下:
最后JS來(lái)控制:
這樣已經(jīng)很好了,但這里有個(gè)問(wèn)題,相信大家都發(fā)現(xiàn)了,就是在沒(méi)有錯(cuò)誤的情況下,那個(gè)空的紅色錯(cuò)誤提示框一直顯示在那里,這不是我們想要的。
于是正常的思想就是:先把它默認(rèn)隱藏起來(lái),當(dāng)提交按鈕被點(diǎn)擊時(shí),如果發(fā)生錯(cuò)誤再把它一起顯示出來(lái)。這就需要用JavaScript來(lái)控制了,比如錯(cuò)誤發(fā)生時(shí),使用Javascript給那個(gè)error div多設(shè)置一個(gè)display:block或者apply一個(gè)顯示的class
其實(shí)有更好的辦法,就是我們今天的主角Pseudo-class :empty
看下面的CSS使用:
僅僅需要幾行簡(jiǎn)單的CSS就可以實(shí)現(xiàn),它表示,如果這個(gè)error div的內(nèi)容是空時(shí),就使用這條樣式,就是隱藏這個(gè)error
最終效果如下,是不是很不錯(cuò):
最后,它是所有瀏覽器都支持的,請(qǐng)大家放心使用。
TML 文檔是由 HTML 元素定義的。
HTML 元素
HTML 元素指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼。
注釋:開始標(biāo)簽常被稱為開放標(biāo)簽(opening tag),結(jié)束標(biāo)簽常稱為閉合標(biāo)簽(closing tag)。
HTML 元素語(yǔ)法
嵌套的 HTML 元素
大多數(shù) HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
HTML 文檔實(shí)例
<html> <body> <p>This is my first paragraph.</p> </body> </html>
上面的例子包含三個(gè) HTML 元素。
HTML 實(shí)例解釋
<p> 元素:
<p>This is my first paragraph.</p>
這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p>,以及一個(gè)結(jié)束標(biāo)簽 </p>。
元素內(nèi)容是:This is my first paragraph。
<body> 元素:
<body> <p>This is my first paragraph.</p> </body>
<body> 元素定義了 HTML 文檔的主體。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body>,以及一個(gè)結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個(gè) HTML 元素(p 元素)。
<html> 元素:
<html> <body> <p>This is my first paragraph.</p> </body> </html>
<html> 元素定義了整個(gè) HTML 文檔。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html>,以及一個(gè)結(jié)束標(biāo)簽 </html>。
元素內(nèi)容是另一個(gè) HTML 元素(body 元素)。
不要忘記結(jié)束標(biāo)簽
即使您忘記了使用結(jié)束標(biāo)簽,大多數(shù)瀏覽器也會(huì)正確地顯示 HTML:
<p>This is a paragraph <p>This is a paragraph
上面的例子在大多數(shù)瀏覽器中都沒(méi)問(wèn)題,但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。
注釋:未來(lái)的 HTML 版本不允許省略結(jié)束標(biāo)簽。
空的 HTML 元素
沒(méi)有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
<br> 就是沒(méi)有關(guān)閉標(biāo)簽的空元素(<br> 標(biāo)簽定義換行)。
在 XHTML、XML 以及未來(lái)版本的 HTML 中,所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠,比如 <br />,是關(guān)閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的,但使用 <br /> 其實(shí)是更長(zhǎng)遠(yuǎn)的保障。
HTML 提示:使用小寫標(biāo)簽
HTML 標(biāo)簽對(duì)大小寫不敏感:<P> 等同于 <p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。
例
隱藏表中的空單元格的邊框和背景:
table
{
border-collapse:separate;
empty-cells:hide;
}
屬性定義及使用說(shuō)明
empty-cells 屬性設(shè)置是否顯示表格中的空單元格(僅用于"分離邊框"模式)。
默認(rèn)值: | show |
---|---|
繼承: | yes |
版本: | CSS2 |
JavaScript 語(yǔ)法: | object.style.emptyCells="hide" |
瀏覽器支持
所有主流瀏覽器都支持empty-cells屬性。
注意:只有指定!DOCTYPE,IE8才支持empty-cells屬性。
屬性值
值 | 描述 |
---|---|
hide | 不在空單元格周圍繪制邊框。 |
show | 在空單元格周圍繪制邊框。默認(rèn)。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 empty-cells 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。