您現在的位置是:電腦技術吧?>? 故障問題 ??>??面包屑怎么做,面包屑可以做啥??>??正文詳情

面包屑怎么做,面包屑可以做啥

摩和泰2019-11-13 16:01:14 人圍觀
簡介面包屑炸蝦的做法方法1,說明:該方法使用CSS3,無圖片,兼容各種WebKit瀏覽器,兼容IE8 。首先,上圖:1。HTML代碼相對簡單。您只需要一個簡單的UL和Li代碼,如下面包屑炸蝦

方法一,  說明:本方法使用CSS3,無圖片,兼容各種webkit系瀏覽器,同時兼容IE8 。

先上圖:

  1.首先是HTML代碼,比較簡單,只需要一個簡單的ul和li即可 代碼如下 div id=crumbs ul lia href=#首頁/a/li lia href=#目錄/a/li lia href=#子目錄/a/li /ul div class=fixed/div /div   2.接下來是CSS代碼,首先是設定常規的li浮動和a標簽美化: 代碼如下 #crumbs ul li { float: left; list-style: none; } #crumbs ul li a { display: block; float: left; height: 34px; background: #f66fa2; text-align: center; padding: 10px 20px 0 45px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; }   接下來就是面包屑導航的關鍵地方,通過before和after來創建箭頭效果: 代碼如下 #crumbs ul li a:after { content: ; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 22px solid #f66fa2; position: absolute; right: -22px; top: 0; z-index: 1; } #crumbs ul li a:before { content: ; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 22px solid #fff; position: absolute; left: 0; top: 0; } #crumbs ul li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding-left: 40px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 30px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #crumbs ul li:last-child a:after { display: none; } #crumbs ul li a:hover { background: #e56592; transition: all 0.2s ease; } #crumbs ul li a:hover:after { border-left-color: #e56592; transition: all 0.2s ease; }   最后清除浮動: 代碼如下 .fixed { clear: both; }   方法二 代碼如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title純css制作面包屑,兼容IE6/title style type=text/css *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, 新宋體;} /* demo */ .demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;} .demo ul{height:32px;overflow:hidden;} .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;} .demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;} .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;} .demo li.current{background:#f60;color:#fff;z-index:1;} .demo li.current i{border-color:transparent transparent transparent #f60;} /style /head body div class=demo ul class=clearfix li面包屑一em/emi/i/li li class=current面包屑二em/emi/i/li li面包屑二em/emi/i/li /ul /div /body /html

版權聲明:本文由 摩和泰 整理編輯。

原標題:面包屑怎么用,面包屑

轉載注明出處:http://www.dn9ww09s.icu/fault/11873.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 雷神筆記本黑屏怎么辦,雷神筆記本不能開機

    雷神筆記本黑屏怎么辦,雷神筆記本不能開機 相關圖片雷神筆記本怎么強制關機雷神筆記本的用戶告訴小編,當他打開電腦時,發現筆記本里有一個黑屏,他不知道怎么解決。我們知道筆記本電腦是由顯示器、鍵盤、鼠標、CPU、內存和硬盤...

  • 手把手教你如何組裝一臺電腦,組裝筆記本電腦教程

    手把手教你如何組裝一臺電腦,組裝筆記本電腦教程 相關圖片臺式電腦裝機教程大量用戶認為,他們自己動手組裝的電腦肯定比他們購買的整臺機器更劃算。事實上,各種配件都會在到貨后進行組裝。小編會給你介紹電腦安裝的步驟。如果你感興...

  • 切圖,.9切圖

    切圖,.9切圖 相關圖片切圖什么意思享受生活,熱愛重建,大家好,我是這個充斥著HTML5話題的時代的賈森,似乎不懂HTML5的人有點落伍了。讓我也跟上潮流。我今天分享的是一個基于HTML5的自助截三格切圖...

  • 電腦連打印機脫機,電腦與打印機脫機了怎么辦

    電腦連打印機脫機,電腦與打印機脫機了怎么辦 相關圖片打印機脫機了怎么解決平時我們會用打印機打印文件和資料,方便在班上工作或學習。但是,在使用打印機的過程中,我們可能會遇到打印機離線無法打印的情況。要解決這個問題,我...

  • canvas繪制矩形,canvas繪制空心矩形

    canvas繪制矩形,canvas繪制空心矩形 相關圖片canvas繪制實心矩形的方法在過去的兩天里,我需要用我同事的HTML5來畫圖。我發現矩形函數所畫的邊界存在風格不一致的問題。最后,我通過一些消除方法找到了問題的癥結所在,現在我...

  • 本地連接不見了,本地連接

    本地連接不見了,本地連接 相關圖片電腦的本地連接不見了怎么辦如今,我們越來越多地使用計算機工作,而網絡是計算機的命脈。如果在使用計算機時遇到沒有本地連接的問題,我們應該怎么做?有些用戶不知道怎么做...

  • 什么哪些什么填空,什么啊什么填空

    什么哪些什么填空,什么啊什么填空 相關圖片什么地找填空當你在網上制作獎勵信息時,你經常會看到一些標題標題填寫在空白的在線/標題樣式類型=文本/CSS!--. 仙{左邊框樣式:無;右邊框樣式:無什么地想填空...

  • 筆記本的虛擬內存,筆記本虛擬內存有用嗎

    筆記本的虛擬內存,筆記本虛擬內存有用嗎 相關圖片電腦虛擬內存設置多少戴爾品牌是全球知名的IT品牌,主要集中在IT產品上,更注重整體,所以自然會有很多用戶使用戴爾筆記本,當然也有一些用戶覺得電腦內存不足,因為有很多軟件...

  • 元素隱藏,js判斷元素顯示隱藏

    元素隱藏,js判斷元素顯示隱藏 相關圖片html元素隱藏一。Dreamweaver顯示隱藏元素行為1。將AP div(通常稱為layer)插入到web頁面2中。選擇body標記、link(a)標記或AP元素3。打開行jquery元素顯示和隱藏...

  • 電腦鍵盤圖,電腦鍵盤示意圖高清

    電腦鍵盤圖,電腦鍵盤示意圖高清 相關圖片電腦鍵盤指法示意圖很多朋友都想知道電腦鍵盤圖的制作方法。其實,電腦鍵盤圖的制作方法很簡單。如果你想學習,編輯一定會教你電腦鍵盤圖的方法!接下來,我將為您帶來電腦鍵...

熱評文章

  • 惠普筆記本進入bios,惠普筆記本bios

    惠普筆記本進入bios,惠普筆記本bios 相關圖片惠普臺式電腦怎么進入biosBIOS是整個計算機最基本的設置。啟動計算機的第一步是先加載BIOS,然后通過BIOS加載系統將其引導到系統中。BIOS中有許多實用的設置。以下是HP電腦如何進惠普...

  • 網頁抖動怎么調整,抖動

    網頁抖動怎么調整,抖動 相關圖片系統抖動向CSS添加以下代碼:HTML,body{overflow-y:scroll;}HTML,body{overflow:scroll;min height:101手機畫面抖動怎么回事...

  • 一鍵清除bat,一鍵垃圾

    一鍵清除bat,一鍵垃圾 相關圖片下載垃圾一鍵清除重新安裝系統時,將覆蓋以前系統的文件。我們使用它可能不重要,但當我們使用它時,我們會感到計算機越來越擁擠。因此,我們需要學習如何通過單擊清除系統垃...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符CSS段落縮進的語法如下:語法:文本縮進:允許值:初始值:0文本縮進屬性可以應用于塊級元素(P、H1等),以定義元素第一行可以接受各段落懸掛縮進...

  • 電腦顯示器老是黑屏,電腦為什么顯示器黑屏

    電腦顯示器老是黑屏,電腦為什么顯示器黑屏 相關圖片電腦顯示器黑屏閃爍我經常在網上看到一些網友說電腦顯示器上有一個黑屏。我不知道該怎么辦。嘗試后無法重新啟動計算機監視器。事實上,電腦顯示器上出現黑屏有很多原因。由于...

  • 打印機顯示暫停打印,打印機無法打印顯示暫停

    打印機顯示暫停打印,打印機無法打印顯示暫停 相關圖片打印機老是暫停怎么辦一些用戶報告,使用打印時無法暫停打印機顯示。他們掙扎了半天,還是沒法打印。打印機可能設置為暫停狀態,這不是主要故障。如何解決遇到打印機顯示暫停...

  • id和name,如何根據id獲取name

    id和name,如何根據id獲取name 相關圖片html name id 區別HTML5已經刪除了name屬性。執行錨定時請使用ID。示例效果:http://keleyi.com/keleyi/phtml/html5/9.htmsuppo而name...

  • 電腦網速慢什么原因,電腦網速慢怎么回事

    電腦網速慢什么原因,電腦網速慢怎么回事 相關圖片為什么電腦網速變慢了下載速度慢已經進入我們的生活。只要掌握慢下載速度的方法,就可以輕松使用慢下載速度。如果您想使用這種方法,下面的編輯器將為您提供一個下載速度慢的...

  • 鼠標自定義,自定義鼠標怎么設置

    鼠標自定義,自定義鼠標怎么設置 相關圖片鼠標宏怎么關閉styletype=text/css!--span{顯示:塊;30px;5px0;f0f0f0;alex412;:中心;}--/style鼠標dpi怎么設置...

  • 打印機共享無法連接到打印機,連接共享打印機

    打印機共享無法連接到打印機,連接共享打印機 相關圖片已共享的打印機連不上一般來說,一個辦公室只有一臺打印機,但共享打印機如果沒有連接就無法打印,這完全影響了工作效率。共享打印機無法連接,這一點特別火爆,那么如何解決...

關注微信

变脸官网查询