如何在網頁上做一個圖片下拉菜單

下拉菜單有很多不同的類型,我們在這一章節當中就來學學如何做一個圖片下拉菜單,只要滑鼠經過這個圖片,下拉菜單就自動呈現出來。

工具/原料

dreamweaver

方法/步驟

思路:做這樣的一個圖片式下拉菜單可以分為以下的這幾個部分。第一:設置圖片菜單的樣式,一個是網頁初始圖片菜單樣式,其次是下拉菜單中的圖片菜單樣式。第二:滑鼠行為的聲明。第三:文字與連結的聲明。

下拉菜單的整體定義。

.dropdown {

position: relative;

display: inline-block;

}

下拉菜單的樣式定義。

.dropdown-content {

display: none;

position: absolute;

background-color: #7D26CD;

min-width: 170px;

box-shadow: 0px 6px 17px 0px #8A8A8A;

}

滑鼠行為定義。

.dropdown:hover .dropdown-content {

display: block;

}

下拉菜單當中的文本內容定義。

.desc {

padding: 16px;

text-align: center;

}

整個代碼的body 部分。標題、文本、圖片地址等等。把整個圖片下拉菜單呈現出來。

<h2> 圖片菜單</h2>

<p>滑鼠一動菜單就變</p>

<div class="dropdown">

<img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="" width="110" height="60">

<div class="dropdown-content">

<img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="" width="410" height="210">

<div class="desc">助力夢想</div>

</div>

</div>

</body>

相關文章

  1. 如何在網頁上做一個自動的時間表

    我們可以通過程序在網頁上做很多不同的功能元素,時間表就是一個非常實用的元素,讓網頁自動呈現現在的時間結果,並可以不斷的進行更新. 工具/原料 dreamweaver 方法/步驟 案例分析:時間表分成三 ...
  2. 如何用CSS代碼在網頁上做一個電波圖的動感效果

    平實的網頁少不了各種的酷炫效果,我們要學會在網頁上面做出各種的酷炫效果,這就離不開強大的CSS代碼的幫助,這一章,我們就要學學如何讓動感的效果呈現於網頁上面. 工具/原料 dreamweaver 方法 ...
  3. 實現一個日期下拉菜單網頁代碼

    這篇文章的主旨是弄清楚如何根據實際需求實現一個聯動菜單以及聯動菜單的原理,實例是實現一個日期選擇下拉菜單.本文調試環境為IE6/firefox1.5. 首先來分析一下日期下拉菜單的需求.建議大家在寫任 ...
  4. 易語言源碼:易語言寫自定義圖片下拉菜單

    易語言編程軟體寫自定義圖片下拉菜單. 易語言下拉菜單源碼. 工具/原料 易語言編程軟體 菜單圖片素材 方法/步驟 準備好按鈕圖片.(為了增強按鈕顯示效果,按鈕的標題設置為空,文字直接在按鈕圖片上預先編 ...
  5. Excel下拉菜單怎麼做?Excel下拉菜單製作方法

    Excel作為一個強大的,功能多樣的辦公軟體,在我們的日常生活中可以說是不可或缺的,特別是進行一些分組處理的時候,Excel的功效就能從這裡面體現出來,現在很多人都知道Excel有下拉菜單的功能,但是 ...
  6. Excel下拉菜單怎麼做:[2]二級下拉菜單

    二級下拉菜單運用於有層及對應關係的工作表中,例如省份對應城市,班級對應姓名. 通過二級下拉菜單的製作能減少數據的錄入和錄入的出錯率. 更多經驗請關注Excel小新,如果幫到了你,請在上方給個投票謝謝支 ...
  7. excel下拉菜單怎麼做,excel下拉菜單的創建方法

    excel下拉菜單怎麼做,excel下拉菜單的創建方法.怎麼在excel表格中做一個下拉呢,大家都知道,做好一個常用詞的下拉後,這時我們就可以偶爾偷偷懶,不用輸入這些常用的詞語了,下面我來說下exce ...
  8. excel2007怎麼做單元格下拉菜單

    單元格下拉菜單有什麼作用?有了單元格下菜單我們可以不用手動輸入數據,直接從下拉菜單中選擇數據即可,方便輸入. 工具/原料 excel2007 方法/步驟 打開excel選擇需要設置下拉菜單的單元格,然 ...
  9. ASP.NET下上傳一個圖片同時讓他展示出到當前頁

    在ASP.NET中通過上傳按鈕fileUpload.button.image控制項上傳一張圖片同時讓他展示在當前頁面中 工具/原料 vs2010 方法/步驟 1.打開vs2010 添加一個新的web窗體 ...
  10. windows10如何在網頁上做標記?

    相信很多用戶在瀏覽到一個很喜歡的網頁的時候,想做一個標記.但又無從下手.下面就來詳細介紹講解一下如何利用edge瀏覽器做網頁標記. 工具/原料 windows 10正式版 windows edge瀏覽 ...
  11. 怎樣做一個漂亮的下拉菜單導航

    如何做一個漂亮的下拉菜單導航 在本教程中我們將純CSS 3代碼純製作導航菜單. 工具/原料 Dreamweaver CS5 CSS3 步驟/方法 HTML 我們將創建一個列表項,並為每個菜單連結的錨標 ...
  12. 使用代碼在網頁上寫一個「百」字

    我們知道網頁上面有著豐富的元素,文字就是其中的一個重要的元素,我們實現文字效果有很多的辦法,從文字的輸入到圖片都可以,但是通過代碼的使用也可以達到這樣的一種效果,在這裡,我們就來學習一下! 工具/原料 ...
  13. 如何在網頁當中做一個創意的按鈕

    網頁當中的重要元素就是它的代碼,一個網頁有了創意的代碼之後,這個網頁就有著更加好的視覺效果,就會有了非常棒的使用體驗.我們就來研究一下創意代碼的製作過程. 工具/原料 dreamweaver 方法/步 ...
  14. flash cs6做一個圖片輪播

    用flash cs6做一個圖片輪播的一個展示,點擊圖片可以連結進入相關頁面. 工具/原料 flash cs6 方法/步驟 首先創建一個flash空白文檔,調整舞台大小. 插入圖片,調整圖片位置,x:0 ...
  15. 如何取出網頁上的背景圖片

    當瀏覽網頁的時候,看到某個需要使用或者好看的圖片需要取出來保留在自己的電腦上,因為有的不是以圖片存在,而且以背景存在,所以右擊圖片不會有圖片另存為這樣的功能.下面就來講解一下,如何取出網頁上的背景圖片 ...
  16. 網頁上找到的圖片不能另存為怎麼辦

    網頁上找到的圖片不能另存為怎麼辦 工具/原料 電腦 瀏覽器 方法/步驟 我們先找一個瀏覽器,哪個都可以 打開,找到百度圖片,比如我們找天安門的圖片 選擇一個我們喜歡的,點開,通常我們在這裡都是右擊,圖 ...
  17. 如何在網頁上做標記

    工作中我們常常需要用到如何把重點標記出來,演講時或者會議中也需要,大學時其實我們已經學到,可是偶爾會腦袋短路的時候,就讓偶來幫親耐的們會議下吧! 工具/原料 QQ截圖工具 方法/步驟 Ctrl+Alt ...
  18. 如何複製加密網頁上文字和圖片

    有時要複製網頁上的文字和圖片時,卻發現網頁已經加了密,不能使用右鍵,也不能使用快捷鍵.怎麼辦呢?有一個很簡單的辦法. 工具/原料 電腦 方法/步驟 將任何一個網頁收藏到收藏夾,然後右鍵重名命為&quo ...
  19. HTML5技巧:在網頁上畫一個漸變的橢圓

    今天的網頁代碼已經非常強大了,我們這一節就來學學如何用HTML5代碼繪製比較複雜的圖形,並且讓這個圖形做一些特別的漸變效果. 工具/原料 dreamweaver 方法/步驟 SVG.我們知道在HTML ...
  20. 巧用微軟edge在WEB網頁上做筆記!簡單實用

    自從微軟推出升級了win10系統,默認的瀏覽器不再是IE,而是自帶的edge瀏覽器,功能強大,內核安全方面都是比較先進的,下面將介紹的是在edge上做筆記,簡單功能實用的一些技巧. 工具/原料 微軟e ...