demo | 用HTML和CSS写一个简单的菜单栏块

最新推荐文章于 2023-07-11 09:00:06 发布

yanwuhc

最新推荐文章于 2023-07-11 09:00:06 发布

阅读量324

点赞数

分类专栏：自学 html css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44303404/article/details/107588506

版权

css 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

自学

11 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

大致思路是这样的：
在这里插入图片描述
两个空白是为了让p标签在div标签中能够垂直居中（属于比较笨的方法）。

HTML和CSS代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        div.outer{width: 175px;text-align: center;}
        a{text-decoration: none;}
        div.inner{height: 60px;color: black; font: lighter 21px black;font-family:sans-serif;}
        div.inner:hover{background-color: #0677b3;color: white;border-radius: 5px;}
        div.none{height:15px;margin: 0px;padding: 0px;}
        p{height:15px;margin: 0px;padding: 0px;;}
    </style>
    <body>
        <div class="outer">
            <a href="https://www.baidu.com">
                <div class="inner"><div class="none"></div><p>百度首页</p><div class="none"></div></div>
            </a>
        </div>
    </body>
</html>

效果如下：

点击前：
在这里插入图片描述
鼠标放置在上面：

yanwuhc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo | 用HTML和CSS写一个简单的菜单栏块

大致思路是这样的：两个空白是为了让p标签在div标签中能够垂直居中（属于比较笨的方法）。HTML和CSS代码如下：<html> <head> <meta charset="utf-8"> </head> <style> div.outer{width: 175px;text-align: center;} a{text-decoration: none;}
复制链接

扫一扫

专栏目录