您現在的位置是:電腦技術吧?>? 組裝維修 ??>??divcss,divcss布局模板??>??正文詳情

divcss,divcss布局模板

柔鴻風2019-11-15 17:00:44 人圍觀
簡介css本文以div CSS為例,實現了豬八戒首頁的導航菜單效果。與您分享以供參考。具體內容如下:這是模仿2010年豬八戒首頁的頁面導航菜單。它的藍色風格,非常漂亮,大什么是css

本文實例講述了div css實現仿豬八戒首頁導航菜單效果。

分享給大家供大家參考。

具體如下:這是一款仿豬八戒2010年首頁的網頁導航菜單,藍色風格,非常漂亮大氣、簡潔專業,在此推薦給大家。

菜單上有一個標記,指引當前的位置,也是本菜單的亮點。

用CSS究竟是如何實現的呢?

那么就請一起看代碼吧。

先來看看運行效果截圖:

具體代碼如下:代碼如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title仿2010豬八戒首頁導航菜單/titlestyle type=text/css!--body{font:12px 微軟雅黑,Verdana,Tahoma;}*{padding:0px;margin:0px;}* li{list-style:none;}a{text-decoration:none;color:#20537A;}a:hover{text-decoration:underline;}.clearfix:after {content: 020;display: block;height: 0;clear: both;}.clearfix {_zoom: 1;}* html .clearfix {overflow:auto;}.menu_navcc{width:970px; margin:0 auto;}.menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}.menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}.menu_nav .nav_content li.current{line-height:37px;}.menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}.menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}.menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}p{margin-bottom:15px}--/style/headbody style=text-align:centerdiv style=height:100px;/divdiv style=clear:both/div!--nav,start--div class=menu_navccdiv class=menu_nav clearfixul class=nav_contentli class=currenta href=# title=首頁span網站首頁/span/a/lilia href=# title=廣告代碼span廣告代碼/span/a/lilia href=# title=CSS教程spanCSS教程/span/a/lili style=position:relative;a href=# title=導航菜單span導航菜單/span/aem/em/lilia href=# title=源碼素材span源碼素材/span/a/lilia href=# title=常用代碼span常用代碼/span/a/li/uldiv class=menu_nav_right/div/div/div!--nav,end--p/pp/p/body/html希望本文所述對大家的div css程序設計有所幫助。

版權聲明:本文由 柔鴻風 整理編輯。

原標題:divcss網頁教程,css div居中

轉載注明出處:http://www.dn9ww09s.icu/assemble/12559.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 手機如何打省略號,O上邊有個省略號怎么打

    手機如何打省略號,O上邊有個省略號怎么打 相關圖片縮略號怎么打省略號是我們在聊天和文檔輸入中經常使用的符號。當你想用省略號的時候,你怎么打?一。打開輸入法,注意輸入法應為中文標點狀態,而不是英文標點狀態2。按鍵盤什...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

  • 手機掉水里一定壞嗎,手機掉水里照樣能用

    手機掉水里一定壞嗎,手機掉水里照樣能用 相關圖片手機掉水里一定會進水嗎我們都很珍惜自己的手機,但有時我們在生活中卻不注意手機,讓手機掉進水里。當你心愛的手機掉進水里,我們該怎么辦?一。當你看到它掉進水里時,不要...

  • 為什么圖片預覽不出來,圖片沒有預覽怎么辦

    為什么圖片預覽不出來,圖片沒有預覽怎么辦 相關圖片圖片預覽是什么意思HTML5圖像預覽需要兩種方法:1。網址2。文件讀取器直接編碼!Doctypehtmlhtmlheadometacharset=utf-8titlehtml5圖懷舊影苑新圖片...

  • 喜馬拉雅聽下載到電腦,喜馬拉雅fm怎么下載到電腦

    喜馬拉雅聽下載到電腦,喜馬拉雅fm怎么下載到電腦 相關圖片喜馬拉雅聲音下載到電腦大多數喜歡聽的朋友都會選擇喜馬拉雅聽力應用。喜馬拉雅聽書是用手機,所以你可以隨時隨地聽書,這是非常方便的,但是有些人花更多的時間在電腦前,他...

  • video事件,video屬性和事件

    video事件,video屬性和事件 相關圖片數據挖掘應用實例一。獲取視頻時間長度。當視頻加載到視頻中時,使用onloaded metadata事件獲取視頻時間長度。代碼如下:視頻。Onloadedmetadata=funAjax應用...

  • 谷歌三件套一鍵下載,谷歌三件套干嘛的

    谷歌三件套一鍵下載,谷歌三件套干嘛的 相關圖片谷歌三件套指的是經常拋售Android手機的用戶可以聽到更多關于Google三件套的消息,但剛剛聯系的用戶并不十分清楚。谷歌的三件套是什么?谷歌三件套有什么用?Google的三qooapp下載安卓...

  • 獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示

    獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示 相關圖片獨立顯卡接口我們使用的大多數普通計算機都是集成顯卡。當用戶開始顯示或擁有具有獨特顯示的主機以獲得更好的體驗時,則不需要將顯示器連接到集成顯卡端口。那么顯示器是如何...

  • animation屬性,animation的屬性及其意思

    animation屬性,animation的屬性及其意思 相關圖片animation元素一、動畫語法1,@key frames插入關鍵幀(1)form to form:CSS code復制內容到剪貼板@keyframes demo{from{proanimation教程...

  • 電腦過熱關機,電腦總是過熱關機

    電腦過熱關機,電腦總是過熱關機 相關圖片筆記本頻繁過熱關機谷歌的親兒子系列Google pixel 3于2018年10月9日發布。谷歌Pixel3的售后服務經常出現一些漏洞。近日,谷歌Pixel3被曝光存在問題。一些用電腦過熱關機要等多久...

熱評文章

  • 雙卡雙待單通優缺點,雙卡雙待單通怎么切換

    雙卡雙待單通優缺點,雙卡雙待單通怎么切換 相關圖片打電話單通是什么意思除了Android系統的開放性外,很多手機用戶之所以選擇小米移動,是因為Android具有雙卡雙備的功能。不過,有些用戶會了解更多。一些Android手機支持雙僅a卡上網...

  • lte服務是什么意思啊,網絡為什么顯示lte

    lte服務是什么意思啊,網絡為什么顯示lte 相關圖片什么是lte小米手機的一些早期版本是LTE版本,但很多用戶不知道LTE在這里的含義。LTE是通用移動通信技術的長期演進,簡單的理解就是3G技術的升級版LTE是英文全稱L什么是lte網絡...

  • 動畫效果怎么設置,ppt切換動畫

    動畫效果怎么設置,ppt切換動畫 相關圖片幻燈片如何取消動畫一些開發者說HTML5將給個人開發者帶來更多的機會。下面詳細介紹一個漂亮的動畫效果,實現登錄表單和注冊表單在同一頁面的轉換。這些效果完全由HTML5和CSS3實怎么...

  • 閃念膠囊是什么,閃念膠囊怎么用

    閃念膠囊是什么,閃念膠囊怎么用 相關圖片堅果閃念膠囊怎么用flash膠囊是hammer技術的智能語音助手,它可以朗讀文本并保存音頻格式。閃光膠囊操作簡單,可以掛在桌面上。界面很漂亮,有美感和內容語音備忘,您可以長按錘子...

  • 走向,就讓我走向你

    走向,就讓我走向你 相關圖片十二正經走向眾所周知,Facebook一直在努力推動開源jsgamebench工具HTML5的發展,首席技術官BRET Taylor也多次提到HTML5的重要性。甚至有傳聞《走向復興》...

  • hifi有什么用,hifi怎么打開

    hifi有什么用,hifi怎么打開 相關圖片hifi一些手機用戶在手機的宣傳資料或說明書中看到手機支持高保真。有些人不知道hifi是什么意思,但對于喜歡聽音樂的用戶來說,他們非常關心hifi。高保真是英式高配hifi是啥...

  • win7重裝installer,win10重裝installer

    win7重裝installer,win10重裝installer 相關圖片win7不能正常進入系統用戶在整理win7系統磁盤時找到了安裝程序文件夾。您想知道是否可以清理安裝程序文件夾嗎?畢竟,安裝程序占用了C盤很大的空間。只有安裝程序文件夾是一個部...

  • position有哪些屬性,position四個屬性

    position有哪些屬性,position四個屬性 相關圖片position屬性值position屬性決定如何定位元素。大約有五個值:每一頁都可以看作是一堆層,如下圖所示,當position設置為relative時,元素仍處于正常流中,位置為position怎么用...

  • 后續ota是什么意思,ota升級怎么弄

    后續ota是什么意思,ota升級怎么弄 相關圖片電視ota升級怎么辦無論是Android還是蘋果,用戶每隔一次升級系統時都會被提示通過OTA進行升級。OTA升級意味著什么?本文以Android陣營的小米為例,講述了OTA升級的含ota工作經驗指什么...

  • 視差效果,視差

    視差效果,視差 相關圖片視差貼圖視差效應在互聯網上越來越流行。如果你還沒有聽說過視差效應,那實際上就是用圖片形成不同的圖層,分別以不同的速度和方向移動的效果。這將產生一個非常美妙的視覺效...

關注微信

变脸官网查询