小demo | 用HTML和CSS写一个简单的菜单栏块
程序员文章站
2022-04-24 12:37:36
...
大致思路是这样的：
两个空白是为了让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>
效果如下：
点击前：
鼠标放置在上面：