css实现横向导航和竖向导航栏的方法（代码）

最新推荐文章于 2025-07-11 21:10:47 发布

weixin_30362233

最新推荐文章于 2025-07-11 21:10:47 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/chenduzizhong/p/9993235.html

本文详细介绍如何使用CSS实现横向和竖向导航栏，包括利用a标签的display属性设置链接区域，以及通过float属性创建水平菜单。代码示例清晰，适合前端开发者学习。

一、竖着的代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

}

 

a{

display:block;

background-color:green;

color:white;

width:80px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active{

background-color:#98bf21;

}

 

</style>

</head>

<body>

<ul>

<li><a herf="">首页</a></li>

<li><a herf="">学习中心</a></li>

<li><a herf="">考试中心</a></li>

<li><a herf="">考试动态</a></li>

</ul>

</body>

</html>

二、横着的导航

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li{

float:left;

}

a{

display:block;

background-color:pink;

color:white;

width:80px;

text-align:center;

padding:4px 0px;

text-decoration:none;

}

a:hover,a:active{

background-color:gray;

}

 

</style>

</head>

<body>

<ul>

<li><a herf="">首页</a></li>

<li><a herf="">学习中心</a></li>

<li><a herf="">考试中心</a></li>

<li><a herf="">考试动态</a></li>

</ul>

</body>

</html>