网页导航栏的两种形式

最新推荐文章于 2024-06-26 20:20:57 发布

weixin_48765207

最新推荐文章于 2024-06-26 20:20:57 发布

阅读量1.0k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_48765207/article/details/107235262

版权

本文介绍了网页导航栏的两种常见形式：竖版和横版。对于竖版导航，展示了鼠标不在菜单项时的效果以及鼠标悬停在"招生就业"时的变化。而对于横版导航，给出了鼠标悬停在"招生就业"时的展示效果。提供完整CSS和HTML代码实现这两种导航样式。

摘要由CSDN通过智能技术生成

1.竖版显示
效果如下：
鼠标不在“招生就业”：
在这里插入图片描述
鼠标停留在招生就业：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .acd{
   
        display:inline-block;
        color:black;
        text-align:center;
        padding:10px 12px;
        text-decoration:none;
        font-weight:bold;
    }
    .aaa{
   
        display:inline-block;
        font-size:10px;
    }