css分类导航和圆角菜单的制作

最新推荐文章于 2022-11-18 13:42:06 发布

wzdprofessor

最新推荐文章于 2022-11-18 13:42:06 发布

阅读量1.2k

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/wangjiadongge/article/details/82079138

版权

html 专栏收录该内容

4 篇文章

订阅专栏

#纵向分类
<!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>

横向：

<!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：

图2：

圆角菜单：

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

<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>