常用HTML代碼解釋10

47、禁止鼠標(biāo)右鍵，把Demo的圖片全都設(shè)為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來(lái)是一樣的，主要是防止鼠標(biāo)經(jīng)過(guò)圖片時(shí)會(huì)出現(xiàn)另存的按鈕。禁止鼠標(biāo)右鍵的代碼很簡(jiǎn)單：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右鍵下載圖片：）'); } } document.onmousedown=click</script>

CSS網(wǎng)頁(yè)布局入門(mén)教程13：下拉及多級(jí)彈出式菜單

　　下拉及彈出式菜單是網(wǎng)站設(shè)計(jì)中常用導(dǎo)航形式，這種菜單形式能夠充分利用頁(yè)面現(xiàn)在空間隱藏與顯示更多內(nèi)容，并能對(duì)內(nèi)容進(jìn)行合理的分類顯示，是一種非常優(yōu)秀的導(dǎo)航形式。
　　早期的下拉或彈出式菜單通過(guò)隱藏的layer或div來(lái)實(shí)現(xiàn)內(nèi)容的隱藏，通過(guò)JavaScript腳本來(lái)響應(yīng)用戶的操作，目前也采用JavaScript+div或其它元素的形式來(lái)制作此類導(dǎo)航，不同的是整個(gè)導(dǎo)航都將使用符合標(biāo)準(zhǔn)的css布局來(lái)打造，不再使用表格來(lái)制作菜單，下拉式菜單是上面提到的橫向?qū)Ш脚c縱向?qū)Ш降慕Y(jié)合，而且通過(guò)css對(duì)于屬性的眾多支持，同一個(gè)菜單不再需要多個(gè)div相互配合完成，使用css布局來(lái)制作下拉菜單，甚至可以直接控制ul或li元素，現(xiàn)在來(lái)嘗試一個(gè)最簡(jiǎn)單的下拉菜單的制作，需要補(bǔ)充的是，下拉式菜單的實(shí)現(xiàn)利用了很多JavaScript技術(shù)，在這里對(duì)JavaScript技術(shù)不作過(guò)多的語(yǔ)法上的綜合了解，只想通過(guò)現(xiàn)有的實(shí)例來(lái)告訴大家由于css元素屬性的靈活性，而使用制作網(wǎng)頁(yè)上的元素更加簡(jiǎn)單方便。先看一下目前所設(shè)計(jì)的導(dǎo)航的XHTML部分代碼：

<ul id="nav">
    <li><a href="">文章</a>
        <ul>
            <li><a href="">CSS教程</a></li>
            <li><a href="">DOM教程</a></li>
            <li><a href="">XML教程</a></li>
            <li><a href="">FLASH教程</a></li>
        </ul>
    </li>
    <li><a href="">參考</a>
        <ul>
            <li><a href="">XHTML</a></li>
            <li><a href="">XML</a></li>
            <li><a href="">CSS</a></li>
        </ul>
    </li>
    <li><a href="">BLOG</a>
        <ul>
            <li><a href="">全部</a></li>
            <li><a href="">網(wǎng)頁(yè)技術(shù)</a></li>
            <li><a href="">UI技術(shù)</a></li>
            <li><a href="">FLASH技術(shù)</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><a href="">搖滾</a></li>
    <li><a href="">純音樂(lè)</a></li>
    <li><a href="">古典金曲</a></li>
    <li><a href="">電影原聲</a></li>
</ul>

　　一個(gè)標(biāo)準(zhǔn)的采用ul結(jié)構(gòu)的菜單構(gòu)成，但與前面所不同的是，這里的代碼結(jié)構(gòu)涉及嵌套，在第一層的li之間插入了另一個(gè)ul的結(jié)構(gòu)，這就是多級(jí)菜單的一個(gè)代碼構(gòu)成模式，XHTML代碼允許通過(guò)嵌套元素來(lái)實(shí)現(xiàn)想要的效果或者結(jié)構(gòu)。下一步，我們嘗試編寫(xiě)一些簡(jiǎn)單的css樣式讓菜單變成所希望的橫向式：

ul { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}

　　第一步，對(duì)導(dǎo)航系統(tǒng)所有ul元素進(jìn)行基本設(shè)置，list-style:none屬性能夠幫助我們?nèi)サ?/span>ul中的所有圓點(diǎn)標(biāo)識(shí)。list-style屬性擁有其它更豐富的使用方法，將在后面的列表元素中重點(diǎn)了解。
　　我們希望導(dǎo)航是橫向的通過(guò)對(duì)li設(shè)置float:left屬性，將所有的li向左浮動(dòng)，形成了橫向的布局，并嘗試使用每個(gè)li的寬度為100px，繼續(xù)編寫(xiě)代碼：

li ul { display:none;}

　　li ul的定義在這里所指的是所有li下面的ul元素，除了頂級(jí)的ul元素外，所有li下面定義的ul元素都將受到這部分樣式的定義。使用display:none讓這部分被隱藏起來(lái)。css中的的有元素基本上都可以使用display屬性來(lái)控制顯示還是隱藏。

li:hover ul,.over ul { display:block;}

　　li:hover ul定義了li元素下的ul元素。通過(guò)逗號(hào)分隔，讓這兩種情況下都能使用display:block屬性，display:block屬性和display:none屬性剛好相反，一個(gè)是隱藏，一個(gè)是顯示，當(dāng)設(shè)置為display:block時(shí)，不僅其指派的元素將顯示，而且還顯示成一個(gè)塊狀，如果不進(jìn)行display:block時(shí)，元素只會(huì)按自己的內(nèi)容在屏幕上占有的區(qū)域進(jìn)行顯示，而使用display:block時(shí)，元素將自己形成一個(gè)廣塊作為自己的點(diǎn)位符，這種設(shè)置對(duì)于做大按鈕來(lái)說(shuō)是非常方便的。

　　在最下邊的預(yù)覽內(nèi)代碼你可以看到，里邊加上了一段js代碼，它是用來(lái)控制在IE瀏覽器下顯示下拉菜單的，本來(lái)li:hover ul這句是可以的，但IE對(duì)css的支持還還完善，所以需要借助JS來(lái)控制。
　　下面我們嘗試給下拉菜單增加一些樣式：

ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}

ul li a:hover { background-color:#ddd;}