CSS+HTML製作一個一般的導航欄

3.2標籤選擇器

行內選擇器>id選擇器>class選擇器>標籤選擇器

常用到的為 id選擇器、class選擇器、標籤選擇器。

例如：

 

 

 

 

 


具體用法見：
4.導航欄的框框
模塊標籤特點：
 
 
背景色background-color ：暗紅色；
形狀：長方塊block 、寬width、高height,左邊有突出小方塊樣式， 分析為內邊距padding。
內容：字體font-family、字體顏色color、字體大小font-size, 垂直居中line-height=height
邊框：border：solid 1px #ff0；
litems類標籤 中 <a>標籤的樣式如下： 
 .litems>a
{
	background-color:#990020; /*背景色*/
	height:30px; 
	display:block; /*塊顯示*/
	line-height:30px; /*垂直居中*/
	border-left: solid 12px #711515; /*邊框*/
	padding-left:5px; /*左邊距*/
}
5.鼠標懸浮變化--- a:hover 屬性 
鼠標未懸浮狀態
 
鼠標懸浮狀態
特點：鼠標懸浮時，字體變為黃色。
a:hover
{
	color:#FF0;
}

 製作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。
以下附帶部分樣式源碼：
 
HTML列表內容
CSS樣式表源碼：
*
{
 margin:0px;
 padding:0px;
 font-family:Arial, Helvetica, sans-serif;
}
body
{
	background-color:#C19F12;
}
a
{
	color:#FFF;
	text-decoration:none;
}
a:hover
{
	color:#FF0;
}
.litems
{
	width:200px;
}
.litems>a
{
	background-color:#990020;
	height:30px;
	display:block;
	line-height:30px;
	border-left: solid 12px #711515;
	padding-left:5px;
}
.litems >a:hover
{
	background-color:#990020;
}
.uitems li
{
	border:solid 1px #ED9F9F;
}
.uitems a 
{
	background-color:#E85070;
	height:30px; 

	display:block;
	line-height:30px;
	border-left:solid 29px #A71F1F;
	padding-left:5px;
}
.uitems >a:hover
{
	background-color:#C2425D;
}

 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



 閱讀更多  劍雲鋒 
的文章

關鍵字:
製作
HTML
JavaScript