您現在的位置是:電腦技術吧?>? 基礎知識 ??>??導航條,如何做導航條??>??正文詳情

導航條,如何做導航條

答曼雁2019-11-13 23:11:10 人圍觀
簡介橫向導航條第一步是創建一個新的my.html文件。按如下所示填寫內容。此HTML文件在結束之前不需要移動。它是內容:CSS代碼將內容復制到剪貼板!Doctypehtmlp導航條隱藏

第一步,我們新建一個my.html文件,填寫內容如下,這個html文件直到最后都不用動了,它就是這些內容:CSS Code復制內容到剪貼板

  1. !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd htmlxmlns=http://www.w3.org/1999/xhtml
  2. head linkrel=stylesheettype=text/csshref=xin.css
  3. /head body
  4. divclass=nav ul
  5. liahref=#辛星PHP/a/li liahref=#辛星Python/a/li
  6. liahref=#辛星CSS/a/li liahref=#辛星HTML/a/li
  7. liahref=#辛星jQuery/a/li liahref=#辛星Java/a/li
  8. /ul/div
  9. /body /html
第二步,我們開始新建一個xin.css文件,然后開始進行調整這些導航條的顯示格式,我們要做的第一步就是先把列表的小圓點給去掉,我們先寫如下代碼: CSS Code復制內容到剪貼板
  1. .navul{list-style-type:none;}
我們發現小圓點沒了,但是,現在這些列表元素都是豎向排列的,我們想讓它們橫向排列。

第三步,我們通過設置li的浮動來讓它們橫向排列,我們在第二行添加代碼,因此整個代碼成為: CSS Code復制內容到剪貼板

  1. .navul{list-style-type:none;} .navli{float:left;}
第四步,我們發現現在它們是到了一起了,但是是連在一起的,這是為什么呢,因為它們沒有設置寬度,我們只要給他們設置了一定的寬度,它們就會分開啦,但是我們同時還可以設置一下背景色,因此該代碼就成為了如下代碼:CSS Code復制內容到剪貼板
  1. .navul{list-style-type:none;} .navli{float:left;width:100px;background:#CCC;}
第五步我們就開始設置鼠標的樣式了,順便我們把下劃線給去掉,我們前面介紹過偽類的概念,如果讀者不熟悉,也可以到前面翻翻我的教程,我們同時添加背景顏色什么的,因此它的代碼成為下面這個樣子:CSS Code復制內容到剪貼板
  1. .navul{list-style-type:none;} .navli{float:left;width:100px;background:#CCC;}
  2. .nava:link{color:#666;background:#CCC;text-decoration:none;} .nava:visited{color:#666;text-decoration:none;}
  3. .nava:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#0F0;}
第六步也是源自我們的問題,我們調整一下大小,即我們設置一下.nav a的屬性值,代碼如下:CSS Code復制內容到剪貼板
  1. .navul{list-style-type:none;} .navli{float:left;width:100px;}
  2. .nava:link{color:#666;background:#CCC;text-decoration:none;} .nava:visited{color:#666;text-decoration:none;}
  3. .nava:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#0F0;} .nava{display:block;text-align:center;height:30px;font-weight:bold;}
第七步就是我們的這個導航條是黏在一起的,我們需要分開菜看上去更加舒服一點,因此我們這里設置一下li的屬性,讓它的邊距設置為3px,然后在讓字體的大小適合該導航條的大小,最后的代碼如下:CSS Code復制內容到剪貼板
  1. .navul{list-style-type:none;} .navli{float:left;width:100px;margin-left:3px;line-height:30px;}
  2. .nava:link{color:#666;background:#CCC;text-decoration:none;} .nava:visited{color:#666;text-decoration:none;}
  3. .nava:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#0F0;} .nava{display:block;text-align:center;height:30px;font-weight:bold;}
到現在為止,我們的導航條就做完了,如果讀者是一位高手,可能會指出它的不足,但是畢竟是用手寫的,沒用任何的圖片,讓我們來看一下整體效果把:

版權聲明:本文由 答曼雁 整理編輯。

原標題:導航條是怎么實現的,加入導航條

轉載注明出處:http://www.dn9ww09s.icu/basics/11973.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 開機進不了安全模式,安全模式也進不去系統

    開機進不了安全模式,安全模式也進不去系統 相關圖片筆記本電腦怎么按f8如果計算機無法正常啟動,可以使用“安全模式”或其他啟動選項啟動計算機。電腦啟動時按F8鍵,然后在“啟動模式”菜單中選擇“安全模式”。然而,有時我們發...

  • ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大

    ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大 相關圖片cdr怎么讓畫布和內容一樣大以下是10個HTML5畫布技術效果的演示,絕對會讓你大吃一驚。當然,你也可能認為,在過去,flash技術可以在老瀏覽器中實現這種效果。但是,以下演示僅使用...

  • 電腦虛擬內存不足,電腦顯示虛擬內存不足

    電腦虛擬內存不足,電腦顯示虛擬內存不足 相關圖片電腦虛擬內存不足是什么原因一個用戶在使用win10系統的過程中,電腦總是提示“虛擬內存不足,會關閉應用程序”,怎么回事?此用戶應將虛擬內存設置得太低。在這種情況下,我們只...

  • 背景,展示背景圖

    背景,展示背景圖 相關圖片企業文化背景圖片展示! DOCTYPE HTML head metahttp equiv=content type content=text/HTML;charset=UTF-8/產品展示背景圖片...

  • wifi網絡受限,wifi網絡受限怎么辦

    wifi網絡受限,wifi網絡受限怎么辦 相關圖片wifi連接上不能上網怎么辦WiFi是一種允許電子設備連接到無線局域網(WLAN)的技術,通常使用2.4G UHF或5g SHF ism射頻頻段。連接到WLAN通常受密碼保護。下面是小編收wifi可以連接但不能上網...

  • 小計時器,小型計時器

    小計時器,小型計時器 相關圖片科學小制作計時器在聽過計時器之后,你可能認為它只能在JS中實現,但事實上,當你不知道有HTML5的時候,這個想法就可以建立起來。以下是如何在HTML5中實現計時器。不要錯過HT簡易計...

  • 電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦

    電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦 相關圖片電腦桌面圖標變大了怎么還原有些用戶不習慣win10系統。重新安裝win7系統后,他們發現桌面圖標變大了。屏幕已經小到可以容納幾個圖標。我該怎么辦?如果我放大桌面圖標,它會非常...

  • 電腦一直黑屏開不了機,win10怎么跳過自動修復

    電腦一直黑屏開不了機,win10怎么跳過自動修復 相關圖片電腦電壓不夠開不了機無論是在辦公室還是在游戲中,計算機已經成為我們生活中不可缺少的技術產品。如果電腦不能打開,工作就不能進行,游戲也不能玩。高清視頻見。那么如何解...

  • 技術開發有哪些,技術開發屬于什么部門

    技術開發有哪些,技術開發屬于什么部門 相關圖片軟件開發屬于技術開發您可能已經看到許多使用jQuery/JS開發的顏色選擇器。今天,我們將使用HTML5技術來實現更好的顏色選擇器。希望你喜歡它復制代碼如下:!--preview元技術開發屬于什...

  • 電腦底部菜單欄不見了,電腦的菜單欄不見了

    電腦底部菜單欄不見了,電腦的菜單欄不見了 相關圖片電腦桌面菜單欄不見了當我們使用電腦時,電腦窗口的頂部會有一個菜單欄,非常方便,但有時我們不知道如何消失。一些用戶認為是中毒。他們想在那里殺死毒藥,但沒用。如果電腦...

熱評文章

  • 0xc0000001怎么修復,hp z4 g4安裝win7

    0xc0000001怎么修復,hp z4 g4安裝win7 相關圖片bios取消raid現在,重新安裝系統也是一件非常簡單的事情。安裝win7系統時遇到一些問題是最麻煩的事情。安裝win7系統時,系統會提示您找不到硬盤驅動器。通常會有兩種錯誤消息:安裝...

  • 手機導航安裝,怎么用手機導航

    手機導航安裝,怎么用手機導航 相關圖片手機導航哪個好現在手機已經成為我們生活中最不可或缺的一部分,手機的發展速度也日新月異。旅行,旅行不知道怎么走,移動導航是那么重要,更重要的是,也可以離線使用,是不...

  • html required,html用require

    html required,html用require 相關圖片html input默認值CSS3提示只適用于高級瀏覽器:Chrome Firefox Safari IE9 有效、無效和必需。定義代碼如下:input:required,input:Vhtmlinput中文驗證...

  • USB共享網絡,usb共享網絡是什么意思

    USB共享網絡,usb共享網絡是什么意思 相關圖片小米usb共享網絡有網友說,USB共享網絡意味著我出差時經常沒有WiFi網絡。如果我能插上電腦上網,那就太好了,但是如何使用USB共享網絡呢?無論您的手機是通過流量還是WiFi,usb共享網...

  • 已為你切換到當前音效,切換音效

    已為你切換到當前音效,切換音效 相關圖片耳機按下去才有聲音在交互中添加正確的聲音通常會改善用戶體驗。在我們熟悉的窗口中,刮紙清空回收站的聲音就是一個很好的例子。下面是一個小部件,它使用HTML5、jQuery向頁面添加...

  • 本地連接ip地址怎么設置,設置本地連接

    本地連接ip地址怎么設置,設置本地連接 相關圖片怎么啟用本地連接事實上,建立本地IP通常是在intranet中。在我們常見的網絡環境(如路由器和交換機)中,我們經常需要設置本地連接IP。如何設置本地連接IP?我相信大多數用戶w7本地...

  • 打印機如何共享打印,打印機共享無法打印怎么辦

    打印機如何共享打印,打印機共享無法打印怎么辦 相關圖片共享打印機已連接但無法打印在辦公室里,我們經常使用打印機共享功能,這樣大家打印文件就更方便了。當windows系統的用戶最近共享打印機時,系統提示:如果共享打印機拒絕訪問,...

  • 背景顏色,換背景顏色

    背景顏色,換背景顏色 相關圖片word背景顏色htmlheadtitlexker.com/titlestyle.l1{背景:#ffffff}.l2{背景:#f4f4f4}/stylescriptfunctiwps背景顏色...

  • 安裝系統藍屏,系統藍屏

    安裝系統藍屏,系統藍屏 相關圖片裝win7藍屏計算機系統已經使用很長時間了,想改變一個系統。通常是重新安裝的。現在系統的安裝非常簡單。許多用戶可以自己手動安裝系統。有時安裝系統時會出現計算機的藍屏。藍...

  • 純代碼,xib和純代碼

    純代碼,xib和純代碼 相關圖片純代碼 圖案!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1純代碼游戲...

關注微信

变脸官网查询