1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#纵向分类
<!DOCTYPE html>
< html >
< head >
< meta  charset = "utf-8" >
< title ></ title >
< style  type = "text/css" >
/*清除默认的边框*/
*{margin: 0px;padding: 0px;}
/*不显示li前面的.号 */
ul{list-style: none;width: 100px;}
/* 取消a标签的下划线,把a标签变成独立的块,text-indent:10px为向右缩进10px*/
a{text-decoration: none;display: block;}
/*让鼠标点上分类项时变色*/
a:hover{background-color: #00DB00;color: #fff;}
</ style >
</ head >
< body >
< ul >
< li >< a  href = "" >首页</ a > </ li >
< li >< a  href = "" >玄幻</ a > </ li >
< li >< a  href = "" >都市</ a > </ li >
< li >< a  href = "" >言情</ a > </ li >
</ ul >
</ body >
</ html >


横向：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
     < title ></ title >
     < style  type = "text/css" >
             *{margin:0;padding:0;}
         .fenlei{
             width: 100%;background: green;
             overflow: hidden;
             margin-top: 100px;
         }
         ul{list-style: none;margin: 0 auto;width: 1000px;}
         
               \\注意：这里如果不加*{margin:0;padding:0;}的话ul的外边距会对a标签产生影响，造成a标签的每个块不能占满div的整块，
               所以要对ul去掉外边距，让a标签的字体上下占满class="fenlei"的div。
               对比图见图1和图2：     
         a{
             float: left;           #向左浮动，横向展示
             width: 70px;           #每个a标签的宽度
             text-decoration: none; #a标签不显示下划线
             color: white;
             text-align: center;    #字体横向居中
             
             /* line-height设置像素和行高一致时，为垂直居中 */
             
             display: block;        #块状显示
             padding: 10px;         #内边距大小
             font-size: 16px;       #字体大小
             font-weight: bold;     #字体粗细
         }
 
         a:hover{background-color: #00DB00;}
     </ style >
</ head >
< body >
< div  class = "fenlei" >
< ul >
     < li >< a  href = "#" >首页</ a > </ li >
     < li >< a  href = "#" >玄幻</ a > </ li >
     < li >< a  href = "#" >都市</ a > </ li >
     < li >< a  href = "#" >言情</ a > </ li >
</ ul >
</ div >
</ body >
</ html >


图1：

wKiom1k1FmWA03G5AAAiAtiAzik687.jpg

图2：

wKioL1k1FimA9HVjAAA-HR8oklg135.jpg


圆角菜单：

圆角菜单的原理就是制作一个图片，上面白色圆角，下面是绿色圆角。a标签的高度正好是图像的一半高度，a标签的宽等于图像的宽度，当鼠标点上去时让图像上移一半的高度，这就实现了圆角变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< html >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
< title >导航菜单</ title >
< style  type = "text/css" >
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
li{float:left}
a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(test.jpg); margin-left:1px;}
a.shouye, a:hover{ background-position:0 30px; color:#fff;}
//这里需要改变的就是background-position
</ style >
 
</ head >
< body >
 
< ul  class = "nav" >
     < li >< a  class = "shouye"  href = "#" >首页</ a ></ li >
     < li >< a  href = "#" >玄幻</ a ></ li >
     < li >< a  href = "#" >都市</ a ></ li >
     < li >< a  href = "#" >言情</ a ></ li >
     < li >< a  href = "#" >排行</ a ></ li >
   </ ul >
 
</ body >
</ html >