css菜單欄樣式,css菜單欄特效

css3級(jí)菜單怎么設(shè)置

1.boder-radis圓角的制作

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出新野免費(fèi)做網(wǎng)站回饋大家。

2.linear-gradient漸變背景的制作

3.box-shadow陰影效果的制作

4.transition轉(zhuǎn)換效果的制作

5.transparent透明效果

6.CCS3中before的作用

實(shí)現(xiàn)的效果圖如下：

搭建HTML容器

一級(jí)菜單ul的樣式修飾：

設(shè)置一級(jí)菜單的寬度、整體居中顯示、用border設(shè)置顏色為#222的1像素寬的邊框、用background-color設(shè)置背景顏色為#111、用background-image和linear-gradient設(shè)置背景圖片為#444和#111的漸變效果、用border-radius設(shè)置圓角邊框?yàn)?px、用before和after的方式給一級(jí)ul填充內(nèi)容是清除二級(jí)浮動(dòng)的一種方式保證背景能夠包裹所有ul內(nèi)的元素

.top-nav{width:969px;margin:60px auto;border:1px solid #222;background-color:#111; ? ? ? ? ? ? ? ?background-image:linear-gradient(#444,#111);border-radius:6px;box-shadow:0 1px 1px #777; ? ? ? ? ? ? ? ?padding:0;list-style:none;} .top-nav:before,.top-nav:after{content: "";display: table;} .top-nav:after{clear: both;}

一級(jí)菜單內(nèi)li的樣式修飾：

用float將所有的li左浮動(dòng)、用boder-right給每一個(gè)li制作一個(gè)左邊框效果、用box-shadow制作陰影效果、position：relative是為了下面二級(jí)菜單的顯示二級(jí)菜單會(huì)以absolute的方式定位

.top-nav li{float: left;border-right:1px solid #222;box-shadow:1px 0 0 #444;position: relative;}

一級(jí)菜單內(nèi)li中a元素以及鼠標(biāo)移動(dòng)到a元素上之后的樣式修飾

這些屬性比較簡(jiǎn)單，就不作一一介紹了

.top-nav li a{float:left;text-decoration: none;padding:12px 30px;font-size:12px;font-weight:bold;text-shadow: 0 2px 0 #000;color: #999;} .top-nav li a:hover{color: #fafafa;}

二級(jí)菜單ul的樣式修飾

二級(jí)菜單默認(rèn)是隱藏狀態(tài)，用絕對(duì)定位的方式（相對(duì)于一級(jí)菜單）將二級(jí)菜單定位在top:38px;left:0;的位置上、同樣給二級(jí)菜單設(shè)置漸變背景色和陰影的效果box-shadow中的rgba屬性可以制作透明度的效果、用opacity這是透明級(jí)別為0、用transition制作一個(gè)過(guò)度顯示和隱藏的效果

.top-nav li ul{visibility: hidden;position: absolute;list-style: none;top:38px;left: 0;z-index: 1;padding: 0; ? ? ? ? ? ? ? ? ? ? ?background-color: #444;background-image: linear-gradient(#444,#111);box-shadow: 0 -1px 0 ? ? ? ? ? ? ? ? ? ? rgba(255,255,255,.3);border-radius: 3px;opacity: 0;margin: 20px 0 0 0;transition: all .2s ease-in-out; ? ? ? ? ? ? ? ? ? ? }

當(dāng)鼠標(biāo)移動(dòng)到一級(jí)菜單欄的時(shí)候二級(jí)菜單欄顯示

hover屬性的應(yīng)用

.top-nav li:hover ul{opacity: 1;visibility: visible;margin: 0;}

設(shè)置二級(jí)菜單li和a的樣式

方法和一級(jí)菜單的li和a的修飾差不多，不做過(guò)多的解釋

.top-nav ul li{float: none;display: block;border: 0;box-shadow: 0 1px 0 #111,0 2px 0 #666;} .top-nav ul a{padding: 10px;width: 130px;display: block;float: none;} .top-nav ul a:hover{background-color: #0186ba;background-image: linear-gradient(#04acec,#0186ba);} .top-nav ul li:first-child a{border-radius: 3px 3px 0 0;} .top-nav ul li:last-child a{border-radius: 0 0 3px 3px;}

三角形的制作

用css3制作三角形的的方法就是四邊設(shè)置同樣寬度的border，將要保留的那一邊的border設(shè)置顏色，其他三邊的顏色設(shè)置為透明(transparent)，則保留顏色的那一邊的三角形就制作出來(lái)了

.top-nav ul li:first-child a:before{ ?content: "";position: absolute;left:40px;top: -6px; ? ? ? ? ? display: block;width: 0;border-bottom: 6px solid #444;border-left: 6px solid transparent; ?border-right: 6px solid transparent; ?} .top-nav ul li:first-child a:hover:before{border-bottom-color:#04acec; }

三級(jí)菜單位置的變換

將三級(jí)菜單定位到二級(jí)菜單的右邊顯示

.top-nav ul ul{top:0;left: 150px;margin: 0 0 0 20px;box-shadow: -1px 0 0 rgba(255,255,255,.3);} .top-nav ul ul li:first-child a:before{left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent; ? ? ? ? ? ? ? ? ? ? ?border-top: 6px solid transparent;border-right: 6px solid #3b3b3b;} .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3;border-bottom-color:transparent;}

完整代碼(其中有針對(duì)IE6的兼容性處理)

!DOCTYPE html html head ? meta charset="UTF-8" ? !--script src=""/script-- ? title用CSS3實(shí)現(xiàn)動(dòng)畫(huà)效果的制作/title ? style type="text/css" ? ? ? .top-nav{width:969px;margin:60px auto;border:1px solid #222;background-color:#111; ? ? ? ? ? ? ? ?background-image:linear-gradient(#444,#111);border-radius:6px;box-shadow:0 1px 1px #777; ? ? ? ? ? ? ? ?padding:0;list-style:none;} ? ? ? .top-nav:before,.top-nav:after{content: "";display: table;} ? ? ? .top-nav:after{clear: both;} ? ? ? /*針對(duì)IE6,_margin，_height是針對(duì)IE6的,其他瀏覽器中不需要*/ ? ? ? .top-nav{z-index: 1;} ? ? ? .top-nav li{float: left;border-right:1px solid #222;box-shadow:1px 0 0 #444;position: relative;} ? ? ? .top-nav li a{float:left;text-decoration: none;padding:12px 30px;font-size:12px;font-weight:bold; ? ? ? ? ? text-shadow: 0 2px 0 #000;color: #999;} ? ? ? .top-nav li a:hover{color: #fafafa;} ? ? ? .top-nav li ul{visibility: hidden;position: absolute;list-style: none;top:38px;left: 0;z-index: 1;padding: 0; ? ? ? ? ? ? ? ? ? ? ?background-color: #444;background-image: linear-gradient(#444,#111);box-shadow: 0 -1px 0 rgba(255,255,255,.3); ? ? ? ? ? ? ? ? ? ? ?border-radius: 3px;opacity: 0;margin: 20px 0 0 0;transition: all .2s ease-in-out; ? ? ? ? ? ? ? ? ? ? ?_margin:0; ?} ? ? ? .top-nav li:hover ul{opacity: 1;visibility: visible;margin: 0;} ? ? ? .top-nav ul li{float: none;display: block;border: 0;box-shadow: 0 1px 0 #111,0 2px 0 #666;} ? ? ? .top-nav ul a{padding: 10px;width: 130px;display: block;float: none;_height:10px;} ? ? ? .top-nav ul a:hover{background-color: #0186ba;background-image: linear-gradient(#04acec,#0186ba);} ? ? ? .top-nav ul li:first-child a{border-radius: 3px 3px 0 0;} ? ? ? .top-nav ul li:last-child a{border-radius: 0 0 3px 3px;} ? ? ? .top-nav ul li:first-child a:before{ ?content: "";position: absolute;left:40px;top: -6px; ? ? ? ? ? display: block;width: 0;border-bottom: 6px solid #444;border-left: 6px solid transparent; ?border-right: 6px solid transparent; ?} ? ? ? .top-nav ul li:first-child a:hover:before{border-bottom-color:#04acec; } ? ? ? .top-nav ul ul{top:0;left: 150px;margin: 0 0 0 20px;_margin:0;box-shadow: -1px 0 0 rgba(255,255,255,.3);} ? ? ? .top-nav ul ul li:first-child a:before{left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent; ? ? ? ? ? ? ? ? ? ? ?border-top: 6px solid transparent;border-right: 6px solid #3b3b3b;} ? ? ? .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3;border-bottom-color:transparent;} ? /style ? script type="text/javascript" ? ? ? !--針對(duì)IE6處理hover的問(wèn)題-- // ? ? ? ?$(function () { // ? ? ? ? ? ?if($.browser.msie $.broswer.version.substr(0,1)7){ // ? ? ? ? ? ?$("li").has("ul").mouseover(function () { // ? ? ? ? ? ? ? ?$(this).children("ul").css("visibility","visible"); // ? ? ? ? ? ?}).mouseout(function () { // ? ? ? ? ? ? ? ?$(this).children("ul").css("visibility","hidden"); // ? ? ? ? ? ?}); // ? ? ? ? ? ?} // ? ? ? ?}) ? /script /head body ul ? lia href="#"首頁(yè)/a/li ? lia href="#"課程大廳/a/li ? lia href="#"學(xué)習(xí)中心 +/a ? ? ? ul ? ? ? ? ? lia href="#"視頻學(xué)習(xí)/a ? ? ? ? ? ? ? ul ? ? ? ? ? ? ? ? ? lia href="#"css/a/li ? ? ? ? ? ? ? ? ? lia href="#"js/a/li ? ? ? ? ? ? ? ? ? lia href="#"jquery/a/li ? ? ? ? ? ? ? /ul ? ? ? ? ? /li ? ? ? ? ? lia href="#"案例學(xué)習(xí)/a/li ? ? ? ? ? lia href="#"交流平臺(tái)/a/li ? ? ? /ul ? /li ? lia href="#"關(guān)于我們/a/li /ul /body

怎樣創(chuàng)建css樣式表？

CSS（層疊樣式表）級(jí)聯(lián)樣式表是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML

（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：

外聯(lián)式Linking（也叫外部樣式）：將網(wǎng)頁(yè)鏈接到外部樣式表。

嵌入式Embedding（也叫內(nèi)頁(yè)樣式）：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。

內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。

在Dreamweaver 8中，可以在開(kāi)始彈出框中點(diǎn)擊新建CSS文件。也可以在最上面的菜單欄里占擊

文件，新建。在彈出框中選擇CSS文件就可以了。

CSS技巧分享：如何用css制作橫排二級(jí)下拉菜單

工具/材料

notepad++

瀏覽器

打開(kāi)Notepad++，先輸入個(gè)頁(yè)面框架

！DOCTYPE html

html xmlns=""

hade

/hade

body

/body

框架好了，那么就該定義頁(yè)面的title，關(guān)鍵詞keyword，和描述description

meta charset="UTF-8" content="text/html" http-equiv="content-type"

title純css二級(jí)導(dǎo)航下拉菜單/title

meta name="keyword" content="搜狗略懂"

meta name="description" content="描述"

這些內(nèi)容只能在head/head中完成。

定義頁(yè)面使用的css樣式，也是需要在head里定義的。

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只選擇nav下一級(jí)里面的ul元素

nav ul選擇nav內(nèi)所包含的所有ul元素

navul比nav ul限定更嚴(yán)格，必須后面的元素只比前面的低一個(gè)級(jí)別。

這里根據(jù)你的需求來(lái)自己定義。

/style

添加一個(gè)DIV標(biāo)簽，在頁(yè)面中劃分出一個(gè)塊來(lái)，用來(lái)顯示。

div中所用的樣式為剛才咱們聲明的樣式“jiao”這個(gè)盒子來(lái)描述

然后使用無(wú)序標(biāo)簽ul+樣式li 來(lái)實(shí)現(xiàn)模塊。

div class="jiao"

lia href="#"搜狗略懂/a

lia href="#"搜狗問(wèn)問(wèn)/a/li

lia href="#"搜狗輸入法/a/li

lia href="#"搜狗瀏覽器/a/li

lia href="#"搜狐/a/li

/ul

/div

放上全部的代碼吧，可以參考一下啊，

!DOCTYPE html

html xmlns=""http://允許你通過(guò)一個(gè)網(wǎng)址來(lái)識(shí)別你的標(biāo)記

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="keyword" content="利用css實(shí)現(xiàn)下拉菜單"

meta name="description" content="搜狗略懂、css分享"

titlecss實(shí)現(xiàn)下拉導(dǎo)航欄菜單/title