使用a标签写小米官网侧边栏--CSS

最新推荐文章于 2023-05-25 22:35:01 发布

H千面

最新推荐文章于 2023-05-25 22:35:01 发布

阅读量528

点赞数

分类专栏： # HTML&CSS&Sass 文章标签： html css

本文链接：https://blog.csdn.net/H200102/article/details/110388901

版权

本文介绍如何利用CSS将a标签转换为块级元素，使其能单独占据一行并设置背景颜色。通过调整文字行高实现垂直居中，讲解了块级行级元素的概念，以及如何处理因padding导致的盒子大小变化问题。

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

效果：
在这里插入图片描述
案例的核心思路分为两步:

把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
鼠标经过a 给链接设置背景颜色

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

涉及到的知识点：块级行级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
    
            display: block;
            width: 230px;
            height: 40px;