简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

html5 css3網站選單實作程式碼_html5教學技巧

WBOY
發布： 2016-05-16 15:48:29
原創
1755 人瀏覽過

實現的困難在於：first-child,last-child 兩個選擇器，以後margin-left:-1px;的應用，33%,34%寬度的技巧處理。

另外一個困難是：box-shadow:1px 0 0 #F1F1F1 inset; 的實作。

最後是：

複製代碼
代碼如下:

background:- webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear- gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);


複製程式碼
程式碼如下:

http://www.w3.org/1999/xhtml" xml:lang=" en">


html5,css3選單 title><br> <style type="text/css"><br /> .jikey_demo{ width:80%; margin:0 auto; background:#f1f1f1;}<br /> .news_info{margin-bottom:5px;b :1px solid #bbb;border-radius:5px;box-shadow:0 1px 0 #f1f1f1;}<br /> .news_info a{display:inline-block;width:33%;height:26px;font-family:"微軟雅黑";line-height:26px;text-align:center;color:#555;border-right:1px solid #ccc;box-shadow:1px 0 0 #F1F1F1 inset;}<br /> .news_info a: first-child{width:33%;box-shadow:none;border-radius:4px 0 0 4px;}<br /> .news_info a:last-child{width:34%;border-right:none;margin-left :-2px;border-radius:0 4px 4px 0;}<br /> .news_info a:hover, .news_info a.current{color:#208edd;background:-webkit-gradient(linear, left top, left bottom, fromleft (#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background: linear-gradient(top, #f9f9f9, #b6b4b4);}<br /> </style> <br><br>







相關標籤：
css3网站 菜单实现
來源：php.cn
上一篇：html5 canvas實作圓形時鐘實例程式碼 下一篇：html5畫布旋轉效果範例_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
在行動視圖中，當使用者點擊連結時，如何關閉此導覽列？ 當使用者點擊連結瀏覽網站時，導覽列沒有關閉？我曾嘗試向每個連結新增點擊事件偵聽器以關閉導覽欄，但它不起作用！此外，處於活動位置（即X）的hamberberger選單圖示也沒有很好地...
來自於 2024-04-06 19:23:03
0
1
411
無法從網站取得輸入元素 所以我試圖從Twitter獲取一個輸入元素，但當我運行它時，它不斷在節點終端中給我一個這樣的錯誤，結果，由此代碼創建的瀏覽器窗口將自行關閉，因為它找不到正確的輸入選擇器。如何取得正...
來自於 2024-04-06 18:59:57
0
1
442
使用SCSS產生預設值和CSS變數 我正在實現網站樣式。出於遺留支援的原因，我需要支援IE11，至少一段時間。出於工作流程和我的理智原因，我想盡可能使用css變數。我已經研究過這個解決方案，它會產生一些有效的東西，但...
來自於 2024-04-06 17:46:54
0
1
355
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！