參考下面方法
創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司,集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商,主營產(chǎn)品:成都響應(yīng)式網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立,網(wǎng)絡(luò)互動的體驗(yàn),以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案,我們深知市場的競爭激烈,認(rèn)真對待每位客戶,為客戶提供賞析悅目的作品,網(wǎng)站的價值服務(wù)。
CSS 背景屬性(Background)
background
在一個聲明中設(shè)置所有的背景屬性。
1
background-attachment
設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。
1
background-color
設(shè)置元素的背景顏色。
1
background-image
設(shè)置元素的背景圖像。
1
background-position
設(shè)置背景圖像的開始位置。
1
background-repeat
設(shè)置是否及如何重復(fù)背景圖像。
1
CSS 邊框?qū)傩裕˙order 和 Outline)
border
在一個聲明中設(shè)置所有的邊框?qū)傩浴?/p>
1
border-bottom
在一個聲明中設(shè)置所有的下邊框?qū)傩浴?/p>
1
border-bottom-color
設(shè)置下邊框的顏色。
2
border-bottom-style
設(shè)置下邊框的樣式。
2
border-bottom-width
設(shè)置下邊框的寬度。
1
border-color
設(shè)置四條邊框的顏色。
1
border-left
在一個聲明中設(shè)置所有的左邊框?qū)傩浴?/p>
1
border-left-color
設(shè)置左邊框的顏色。
2
border-left-style
設(shè)置左邊框的樣式。
2
border-left-width
設(shè)置左邊框的寬度。
1
border-right
在一個聲明中設(shè)置所有的右邊框?qū)傩浴?/p>
1
border-right-color
設(shè)置右邊框的顏色。
2
border-right-style
設(shè)置右邊框的樣式。
2
border-right-width
設(shè)置右邊框的寬度。
1
border-style
設(shè)置四條邊框的樣式。
1
border-top
在一個聲明中設(shè)置所有的上邊框?qū)傩浴?/p>
1
border-top-color
設(shè)置上邊框的顏色。
2
border-top-style
設(shè)置上邊框的樣式。
2
border-top-width
設(shè)置上邊框的寬度。
1
border-width
設(shè)置四條邊框的寬度。
1
outline
在一個聲明中設(shè)置所有的輪廓屬性。
2
outline-color
設(shè)置輪廓的顏色。
2
outline-style
設(shè)置輪廓的樣式。
2
outline-width
設(shè)置輪廓的寬度。
2
CSS 文本屬性(Text)
color
設(shè)置文本的顏色。
1
direction
規(guī)定文本的方向 / 書寫方向。
2
letter-spacing
設(shè)置字符間距。
1
line-height
設(shè)置行高。
1
text-align
規(guī)定文本的水平對齊方式。
1
text-decoration
規(guī)定添加到文本的裝飾效果。
1
text-indent
規(guī)定文本塊首行的縮進(jìn)。
1
text-shadow
規(guī)定添加到文本的陰影效果。
2
text-transform
控制文本的大小寫。
1
unicode-bidi
設(shè)置文本方向。
2
white-space
規(guī)定如何處理元素中的空白。
1
word-spacing
設(shè)置單詞間距。
1
CSS 字體屬性(Font)
font
在一個聲明中設(shè)置所有字體屬性。
1
font-family
規(guī)定文本的字體系列。
1
font-size
規(guī)定文本的字體尺寸。
1
font-size-adjust
為元素規(guī)定 aspect 值。
2
font-stretch
收縮或拉伸當(dāng)前的字體系列。
2
font-style
規(guī)定文本的字體樣式。
1
font-variant
規(guī)定是否以小型大寫字母的字體顯示文本。
1
font-weight
規(guī)定字體的粗細(xì)。
1
CSS 外邊距屬性(Margin)
margin
在一個聲明中設(shè)置所有外邊距屬性。
1
margin-bottom
設(shè)置元素的下外邊距。
1
margin-left
設(shè)置元素的左外邊距。
1
margin-right
設(shè)置元素的右外邊距。
1
margin-top
設(shè)置元素的上外邊距。
1
CSS 內(nèi)邊距屬性(Padding)
padding
在一個聲明中設(shè)置所有內(nèi)邊距屬性。
1
padding-bottom
設(shè)置元素的下內(nèi)邊距。
1
padding-left
設(shè)置元素的左內(nèi)邊距。
1
padding-right
設(shè)置元素的右內(nèi)邊距。
1
padding-top
設(shè)置元素的上內(nèi)邊距。
1
CSS 列表屬性(List)
list-style
在一個聲明中設(shè)置所有的列表屬性。
1
list-style-image
將圖象設(shè)置為列表項(xiàng)標(biāo)記。
1
list-style-position
設(shè)置列表項(xiàng)標(biāo)記的放置位置。
1
list-style-type
設(shè)置列表項(xiàng)標(biāo)記的類型。
1
marker-offset
2
內(nèi)容生成(Generated Content)
content
與 :before 以及 :after 偽元素配合使用,來插入生成內(nèi)容。
2
counter-increment
遞增或遞減一個或多個計(jì)數(shù)器。
2
counter-reset
創(chuàng)建或重置一個或多個計(jì)數(shù)器。
2
quotes
設(shè)置嵌套引用的引號類型。
2
CSS 尺寸屬性(Dimension)
height
設(shè)置元素高度。
1
max-height
設(shè)置元素的最大高度。
2
max-width
設(shè)置元素的最大寬度。
2
min-height
設(shè)置元素的最小高度。
2
min-width
設(shè)置元素的最小寬度。
2
width
設(shè)置元素的寬度。
1
CSS 定位屬性(Positioning)
bottom
設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
2
clear
規(guī)定元素的哪一側(cè)不允許其他浮動元素。
1
clip
剪裁絕對定位元素。
2
cursor
規(guī)定要顯示的光標(biāo)的類型(形狀)。
2
display
規(guī)定元素應(yīng)該生成的框的類型。
1
float
規(guī)定框是否應(yīng)該浮動。
1
left
設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
2
overflow
規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。
2
position
規(guī)定元素的定位類型。
2
right
設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
2
top
設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
2
vertical-align
設(shè)置元素的垂直對齊方式。
1
visibility
規(guī)定元素是否可見。
2
z-index
設(shè)置元素的堆疊順序。
2
CSS 打印屬性(Print)
orphans
設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面底部保留的最少行數(shù)。
2
page-break-after
設(shè)置元素后的分頁行為。
2
page-break-before
設(shè)置元素前的分頁行為。
2
page-break-inside
設(shè)置元素內(nèi)部的分頁行為。
2
widows
設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面頂部保留的最少行數(shù)。
2
CSS 表格屬性(Table)
border-collapse
規(guī)定是否合并表格邊框。
2
border-spacing
規(guī)定相鄰單元格邊框之間的距離。
2
caption-side
規(guī)定表格標(biāo)題的位置。
2
empty-cells
規(guī)定是否顯示表格中的空單元格上的邊框和背景。
2
table-layout
設(shè)置用于表格的布局算法。
2
CSS 偽類(Pseudo-classes)
:active
向被激活的元素添加樣式。
1
:focus
向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。
2
:hover
當(dāng)鼠標(biāo)懸浮在元素上方時,向元素添加樣式。
1
:link
向未被訪問的鏈接添加樣式。
1
:visited
向已被訪問的鏈接添加樣式。
1
:first-child
向元素的第一個子元素添加樣式。
2
:lang
向帶有指定 lang 屬性的元素添加樣式。
2
CSS 偽元素(Pseudo elements)
:first-letter
向文本的第一個字母添加特殊樣式。
1
:first-line
向文本的首行添加特殊樣式。
1
:before
在元素之前添加內(nèi)容。
2 :after 在元素之后添加內(nèi)容。
工具/材料
notepad++
瀏覽器
打開Notepad++,先輸入個頁面框架
!DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了,那么就該定義頁面的title,關(guān)鍵詞keyword,和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title純css二級導(dǎo)航下拉菜單/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
這些內(nèi)容只能在head/head中完成。
定義頁面使用的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下一級里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格,必須后面的元素只比前面的低一個級別。
這里根據(jù)你的需求來自己定義。
--
/style
添加一個DIV標(biāo)簽,在頁面中劃分出一個塊來,用來顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述
然后使用無序標(biāo)簽ul+樣式li 來實(shí)現(xiàn)模塊。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代碼吧,可以參考一下啊,
!DOCTYPE html
html xmlns=""http://允許你通過一個網(wǎng)址來識別你的標(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
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下一級里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格,必須后面的元素只比前面的低一個級別。
這里根據(jù)你的需求來自己定義。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜單,只需要后邊繼續(xù)添加ul/li即可
特別提示
寫代碼過程中一定要記得換行,開頭留空,否則過后找東西,連你自己都不知道寫的是什么。何談從哪里找起?
代碼粘貼的太復(fù)雜;
先給你分析一下原理:二級菜單沒有在沒有hover屬性的情況下是隱藏的所以需要display:none,當(dāng)鼠標(biāo)hover的時候二級菜單才會列出來,這是純css可以實(shí)現(xiàn)的;
知道上面的原理之后,下面比較容易實(shí)現(xiàn)具體看例子:
HTML代碼:
ul
lia?href=""一級菜單/a/li
lia?href=""一級菜單/a
ul?class="drop-ul"
li?a?href=""二級菜單/a/li
/ul
/li
/ul
CSS代碼:
ul?li?ul.drop-ul{?display:?none;position:relative?}/*正常情況下隱藏*/
ul?li:hover?ul.drop-ul?li{display:?block;}?/*當(dāng)鼠標(biāo)放上去二級菜單li?顯示出來*/
/*這個時候你會發(fā)現(xiàn)二級菜單顯示的位置可能不對可以使用position屬性*/
ul?li:hover?ul.drop-ul?li{position:absolute;}
/*通過top?right?left?調(diào)整位置,根據(jù)實(shí)際情況調(diào)整背景顏色,字體顏色等,細(xì)節(jié)東西*/
此時可能會發(fā)現(xiàn)會二級菜單出現(xiàn)有那么一點(diǎn)點(diǎn)的生硬;沒關(guān)系配合jquery實(shí)現(xiàn)緩慢展現(xiàn)效果
$(document).ready(function()?{
if($(window).width()??768)?{
$('ul?li').hover(
function()?{
$('ul',?this).stop().slideDown(200);
},
function()?{
$('ul',?this).stop().slideUp(200);
}
);
}
});
注意不知道jquery的新手使用記住先加載Jquery.min.js文件,放在此段js前面;
參考下面方法
CSS 背景屬性(Background)
background
在一個聲明中設(shè)置所有的背景屬性。
1
background-attachment
設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。
1
background-color
設(shè)置元素的背景顏色。
1
background-image
設(shè)置元素的背景圖像。
1
background-position
設(shè)置背景圖像的開始位置。
1
background-repeat
設(shè)置是否及如何重復(fù)背景圖像。
1
CSS 邊框?qū)傩裕˙order 和 Outline)
border
在一個聲明中設(shè)置所有的邊框?qū)傩浴?/p>
1
border-bottom
在一個聲明中設(shè)置所有的下邊框?qū)傩浴?/p>
1
border-bottom-color
設(shè)置下邊框的顏色。
2
border-bottom-style
設(shè)置下邊框的樣式。
2
border-bottom-width
設(shè)置下邊框的寬度。
1
border-color
設(shè)置四條邊框的顏色。
1
border-left
在一個聲明中設(shè)置所有的左邊框?qū)傩浴?/p>
1
border-left-color
設(shè)置左邊框的顏色。
2
border-left-style
設(shè)置左邊框的樣式。
2
border-left-width
設(shè)置左邊框的寬度。
1
border-right
在一個聲明中設(shè)置所有的右邊框?qū)傩浴?/p>
1
border-right-color
設(shè)置右邊框的顏色。
2
border-right-style
設(shè)置右邊框的樣式。
2
border-right-width
設(shè)置右邊框的寬度。
1
border-style
設(shè)置四條邊框的樣式。
1
border-top
在一個聲明中設(shè)置所有的上邊框?qū)傩浴?/p>
1
border-top-color
設(shè)置上邊框的顏色。
2
border-top-style
設(shè)置上邊框的樣式。
2
border-top-width
設(shè)置上邊框的寬度。
1
border-width
設(shè)置四條邊框的寬度。
1
outline
在一個聲明中設(shè)置所有的輪廓屬性。
2
outline-color
設(shè)置輪廓的顏色。
2
outline-style
設(shè)置輪廓的樣式。
2
outline-width
設(shè)置輪廓的寬度。
2
CSS 文本屬性(Text)
color
設(shè)置文本的顏色。
1
direction
規(guī)定文本的方向 / 書寫方向。
2
letter-spacing
設(shè)置字符間距。
1
line-height
設(shè)置行高。
1
text-align
規(guī)定文本的水平對齊方式。
1
text-decoration
規(guī)定添加到文本的裝飾效果。
1
text-indent
規(guī)定文本塊首行的縮進(jìn)。
1
text-shadow
規(guī)定添加到文本的陰影效果。
2
text-transform
控制文本的大小寫。
1
unicode-bidi
設(shè)置文本方向。
2
white-space
規(guī)定如何處理元素中的空白。
1
word-spacing
設(shè)置單詞間距。
1
CSS 字體屬性(Font)
font
在一個聲明中設(shè)置所有字體屬性。
1
font-family
規(guī)定文本的字體系列。
1
font-size
規(guī)定文本的字體尺寸。
1
font-size-adjust
為元素規(guī)定 aspect 值。
2
font-stretch
收縮或拉伸當(dāng)前的字體系列。
2
font-style
規(guī)定文本的字體樣式。
1
font-variant
規(guī)定是否以小型大寫字母的字體顯示文本。
1
font-weight
規(guī)定字體的粗細(xì)。
1
CSS 外邊距屬性(Margin)
margin
在一個聲明中設(shè)置所有外邊距屬性。
1
margin-bottom
設(shè)置元素的下外邊距。
1
margin-left
設(shè)置元素的左外邊距。
1
margin-right
設(shè)置元素的右外邊距。
1
margin-top
設(shè)置元素的上外邊距。
1
CSS 內(nèi)邊距屬性(Padding)
padding
在一個聲明中設(shè)置所有內(nèi)邊距屬性。
1
padding-bottom
設(shè)置元素的下內(nèi)邊距。
1
padding-left
設(shè)置元素的左內(nèi)邊距。
1
padding-right
設(shè)置元素的右內(nèi)邊距。
1
padding-top
設(shè)置元素的上內(nèi)邊距。
1
CSS 列表屬性(List)
list-style
在一個聲明中設(shè)置所有的列表屬性。
1
list-style-image
將圖象設(shè)置為列表項(xiàng)標(biāo)記。
1
list-style-position
設(shè)置列表項(xiàng)標(biāo)記的放置位置。
1
list-style-type
設(shè)置列表項(xiàng)標(biāo)記的類型。
1
marker-offset
2
內(nèi)容生成(Generated Content)
content
與 :before 以及 :after 偽元素配合使用,來插入生成內(nèi)容。
2
counter-increment
遞增或遞減一個或多個計(jì)數(shù)器。
2
counter-reset
創(chuàng)建或重置一個或多個計(jì)數(shù)器。
2
quotes
設(shè)置嵌套引用的引號類型。
2
CSS 尺寸屬性(Dimension)
height
設(shè)置元素高度。
1
max-height
設(shè)置元素的最大高度。
2
max-width
設(shè)置元素的最大寬度。
2
min-height
設(shè)置元素的最小高度。
2
min-width
設(shè)置元素的最小寬度。
2
width
設(shè)置元素的寬度。
1
CSS 定位屬性(Positioning)
bottom
設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
2
clear
規(guī)定元素的哪一側(cè)不允許其他浮動元素。
1
clip
剪裁絕對定位元素。
2
cursor
規(guī)定要顯示的光標(biāo)的類型(形狀)。
2
display
規(guī)定元素應(yīng)該生成的框的類型。
1
float
規(guī)定框是否應(yīng)該浮動。
1
left
設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
2
overflow
規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。
2
position
規(guī)定元素的定位類型。
2
right
設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
2
top
設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
2
vertical-align
設(shè)置元素的垂直對齊方式。
1
visibility
規(guī)定元素是否可見。
2
z-index
設(shè)置元素的堆疊順序。
2
CSS 打印屬性(Print)
orphans
設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面底部保留的最少行數(shù)。
2
page-break-after
設(shè)置元素后的分頁行為。
2
page-break-before
設(shè)置元素前的分頁行為。
2
page-break-inside
設(shè)置元素內(nèi)部的分頁行為。
2
widows
設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面頂部保留的最少行數(shù)。
2
CSS 表格屬性(Table)
border-collapse
規(guī)定是否合并表格邊框。
2
border-spacing
規(guī)定相鄰單元格邊框之間的距離。
2
caption-side
規(guī)定表格標(biāo)題的位置。
2
empty-cells
規(guī)定是否顯示表格中的空單元格上的邊框和背景。
2
table-layout
設(shè)置用于表格的布局算法。
2
CSS 偽類(Pseudo-classes)
:active
向被激活的元素添加樣式。
1
:focus
向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。
2
:hover
當(dāng)鼠標(biāo)懸浮在元素上方時,向元素添加樣式。
1
:link
向未被訪問的鏈接添加樣式。
1
:visited
向已被訪問的鏈接添加樣式。
1
:first-child
向元素的第一個子元素添加樣式。
2
:lang
向帶有指定 lang 屬性的元素添加樣式。
2
CSS 偽元素(Pseudo elements)
:first-letter
向文本的第一個字母添加特殊樣式。
1
:first-line
向文本的首行添加特殊樣式。
1
:before
在元素之前添加內(nèi)容。
2
:after
在元素之后添加內(nèi)容。
分享標(biāo)題:css菜單樣式,css樣式標(biāo)簽大全
網(wǎng)頁地址:http://muchs.cn/article12/phisdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)