新聞資訊  快訊  焦點  財經  政策  社會
互 聯 網   電商  金融  數據  計算  技巧
生活百科  科技  職場  健康  法律  汽車
手機百科  知識  軟件  修理  測評  微信
軟件技術  應用  系統  圖像  視頻  經驗
硬件技術  知識  技術  測評  選購  維修
網絡技術  硬件  軟件  設置  安全  技術
程序開發  語言  移動  數據  開源  百科
安全防護  資訊  黑客  木馬  病毒  移動
站長技術  搜索  SEO  推廣  媒體  移動
財經百科  股票  知識  理財  財務  金融
教育考試  育兒  小學  高考  考研  留學
您當前的位置:首頁 > IT百科 > 程序開發 > 語言 > css

標簽ul與css樣式實現菜單特效實例

時間:2019-11-22 11:20:46  來源:  作者:

在程序開發中,標簽ul與css樣式實現菜單,也是經常用到的技巧,這里給大家介紹2個實例:

標簽ul與css樣式實現菜單特效實例1

如下圖所示:

標簽ul與css樣式實現菜單特效實例

標簽ul與css樣式實現菜單特效實例1

menu1.html網頁代碼如下:

<!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" lang="gb2312" xml:lang="gb2312">

<head>

<title>標簽ul與css樣式實現菜單特效</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div id="mymenu">

<ul>

<li><a href="" title="">首頁</a></li>

<li><a href="" title="">產品介紹</a></li>

<li><a href="" title="">熱門推薦</a></li>

<li><a href="" title="">行業動態</a></li>

<li><a href="" title="">加盟我們</a></li>

<li><a href="" title="">聯系我們</a></li>

<li><a href="#" id="rightcorner"> </a></li>

</ul>

</div>

<br style="clear: left" />

</body>

</html>

css.css代碼如下:

#mymenu{

border-top: 7px solid black;

margin: 0;

padding: 0;

}

#mymenu ul{

margin: 0;

margin-left: 15px;

float: left;

padding-left: 10px;

font: 12px 宋體;

background-color: black;

}

* html #mymenu ul{

margin-bottom: 1em;

margin-left: 7px;

}

#mymenu ul li{

display: inline;

}

#mymenu ul li a{

float: left;

color: white;

font-weight: ;

padding: 2px 11px 7px 7px;

text-decoration: none;

}

#mymenu ul li a:visited{

color: white;

}

#mymenu ul li a:hover, #mymenu ul li a#selected{

color: white;

background-color: darkred;

}

#mymenu ul li a#rightcorner{

padding-right: 0;

padding-left: 8px;

}

標簽ul與css樣式實現菜單特效實例2

如下圖所示:

標簽ul與css樣式實現菜單特效實例

標簽ul與css樣式實現菜單特效實例2

<!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>標簽ul與css樣式實現菜單特效</title>

<style type="text/css">

*

{

font-size:13px;

font-weight:800;

text-decoration:none;

margin:0;

padding:0;

}

body

{

background:#ddd;

}

#menu

{

list-style-type: none;

border:1px solid #fff;

margin:50px auto;

width:770px;

height:30px;

overflow:hidden;

background:#000 url(a.png) 0 0 repeat-x;

}

#menu li

{

border-right:1px solid #fff;

float:left;

}

#menu li a

{

display:block;

text-align:center;

color:#fff;

line-height:30px;

padding:0 10px;

}

#menu li a:hover,#menu li.current

{

background:#fff url(b.png) 0 0 repeat-x;

}

</style>

</head>

<body>

<ul id="menu">

<li><a href="" title="Index">首頁</a></li>

<li><a href="" title="Produces">產品介紹</a></li>

<li><a href="" title="Hot">熱門推薦</a></li>

<li><a href="" title="">行業動態</a></li>

<li><a href="" title="">加盟我們</a></li>

<li><a href="" title="">聯系我們</a></li>

</ul>

</body>

</html>

看完代碼實現后,大家是不是覺得比較簡單呀,趕快來diy吧。



Tags:css   點擊:()  評論:()
聲明:本站部分內容來自互聯網,內容觀點僅代表作者本人,如有任何版權侵犯請與我們聯系,我們將立即刪除。
▌相關評論
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
▌相關推薦
用 CSS 隱藏頁面元素有許多種方法。你可以將 opacity 設為 0、將 visibility 設為 hidden、將 display 設為 none 或者將 position 設為 absolute 然后將位置設到不可見區域...【詳細內容】
2019-11-26   css  點擊:(2)  評論:(0)  加入收藏
在程序開發中,標簽ul與css樣式實現菜單,也是經常用到的技巧,這里給大家介紹2個實例:標簽ul與css樣式實現菜單特效實例1如下圖所示:標簽ul與css樣式實現菜單特效實例1menu1.html網...【詳細內容】
2019-11-22   css  點擊:(3)  評論:(0)  加入收藏
sass和less地出現大大的提升了代碼的復用性,按常理來說它們也是css,被稱為CSS擴展語言(簡稱強化版的css),理論來說sass也需要編譯成為css才能在瀏覽器上面運行的。那么為什么會出...【詳細內容】
2019-11-15   css  點擊:(10)  評論:(0)  加入收藏
效果展示:1、模擬直播,去除進度條、當前觀看時間,剩余時間。 效果: 2、去除 video 標簽全部控件 效果:...【詳細內容】
2019-11-08   css  點擊:(75)  評論:(0)  加入收藏
一個客戶的需求想知道單頁面用戶哪一塊兒停留的時間長,有沒有反復的看,于是做了個簡單demo。比較精簡前端只寫了個簡單的框架,原理是css偽元素去訪問后端接口。css前端部分: 通...【詳細內容】
2019-11-08   css  點擊:(6)  評論:(0)  加入收藏
今天給大家介紹一些常用的css屬性:1 font-size:用于設置字體大小font-size:20px; font-size:150%2 font-weight:設置字體是否加粗normal 不加粗 2 bold:加粗3 font-style:設...【詳細內容】
2019-11-06   css  點擊:(2)  評論:(0)  加入收藏
對于 CSSer 來說,多多少少都會遇到過 “樣式規則不生效?”、“樣式規則被覆蓋?” 等等問題,這些都與 CSS 權重有關系。我自己是一名從事了多年開發的web前端老程序員,目前辭職在...【詳細內容】
2019-11-01   css  點擊:(15)  評論:(0)  加入收藏
作者:前端攻城獅 出處:cnblogs鏈接:http://www.cnblogs.com/qianduantuanzhang/p/783251嘿,朋友!把你的注意力從方法和技術的洪流中移開一會,你就可能會錯過什么!上周我遇到我的一...【詳細內容】
2019-10-23   css  點擊:(8)  評論:(0)  加入收藏
如何使用它們,為什么樣式表通過使用所謂的選擇器來引用HTML中的特定元素。這些選擇器可以是Clsaa,ID,元素本身等。我們將在本文中重點介紹的選擇器是combinator。它們以一種方...【詳細內容】
2019-10-23   css  點擊:(11)  評論:(0)  加入收藏
前言也許你曾經看到過很多樣式命名規則,也參考了我們制定的命名規范,但是大部分的具體樣式還是不知道如何命名,主要思想或者標準是什么,也就是前面.m-panel-后面的應該如何命名,...【詳細內容】
2019-10-23   css  點擊:(29)  評論:(0)  加入收藏
HTML的組成部分 dtd部分:文檔類型說明,聲明版本、標準 header部分:給機器看的 body部分:給人看的CSS控制div顯示 <div> 是一個塊級元素。這意味著它的內容自動地開始一個...【詳細內容】
2019-10-22   css  點擊:(11)  評論:(0)  加入收藏
不同的項目中對于等待加載時轉圈圈的樣式是不同的,有的是傳統的轉圈的gif圖片,見得比較多的是將轉圈圈的換成了可愛的圖標。有時候項目中加入等待加載的圖片會很違和,不符合...【詳細內容】
2019-10-10   css  點擊:(40)  評論:(0)  加入收藏
瀑布流又稱瀑布流式布局,是比較流行的一種網站頁面布局方式。即多行等寬元素排列,后面的元素依次添加到其后,等寬不等高,根據圖片原比例縮放直至寬度達到我們的要求,依次按照規則...【詳細內容】
2019-10-10   css  點擊:(10)  評論:(0)  加入收藏
CSS 選擇器是用來指定該組 CSS 樣式會對什么元素生效的,是連接 HTML 結構和 CSS 樣式的橋梁。這一篇將給大家介紹一下 CSS 里基礎選擇器的用法,同時會對使用上給出一些建議。...【詳細內容】
2019-10-09   css  點擊:(11)  評論:(0)  加入收藏
在章中,我介紹了一種使用類似CSS的選擇器語法的快速編寫HTML代碼的新方法-一組用于高速HTML和CSS編碼的便捷工具。您花費多少時間編寫HTML代碼:所有這些標記,屬性,引號,花括號等...【詳細內容】
2019-10-08   css  點擊:(22)  評論:(0)  加入收藏
直接開門見山啦,請看下面代碼與效果:<style>.one{height:100px;width:100px;box-sizing:border-box;//設置了該屬性padding:5px;margin:5px;border:5px solid green;backgroun...【詳細內容】
2019-09-26   css  點擊:(9)  評論:(0)  加入收藏
color 設置文字的顏色,如: color:red;font-size 設置文字的大小,如:font-size:12px;font-family 設置文字的字體,如:font-family:&lsquo;微軟雅黑&rsquo;;font-style 設置字體是否...【詳細內容】
2019-09-19   css  點擊:(16)  評論:(0)  加入收藏
前端開發是一個比較繁瑣的工作,不僅要有別人不一樣的審美觀和設計觀,還需要了解很多的JS插件等錯綜復雜的技術,一份工作在別人眼中看似簡單,其實當做的,完成的時候又是另一回事了...【詳細內容】
2019-09-18   css  點擊:(18)  評論:(0)  加入收藏
CSS權重指的是樣式的優先級,有兩條或多條樣式作用于一個元素,權重高的那條樣式對元素起作用,權重相同的,后寫的樣式會覆蓋前面寫的樣式。權重的等級可以把樣式的應用方式分為幾...【詳細內容】
2019-09-16   css  點擊:(15)  評論:(0)  加入收藏
元素就是標簽,布局中常用的有三種標簽,塊元素、內聯元素、內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面布局。塊元素塊元素,也可以稱為行元素,布局中常用的標簽如:div、p、...【詳細內容】
2019-09-16   css  點擊:(16)  評論:(0)  加入收藏
最新更新
欄目熱門
欄目頭條
31选7开奖11185