css案例练习简洁版的小米侧边栏

飞天小女侠~

已于 2022-03-29 09:41:11 修改

阅读量730

点赞数

分类专栏：前端案例练习文章标签： css html 前端

于 2022-03-05 16:39:36 首次发布

本文链接：https://blog.csdn.net/xuan971130/article/details/123296941

版权

前端案例练习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

本文探讨了HTML中行内元素与块元素的使用，特别是如何在a标签中嵌套块级元素div。作者建议尽量将a标签转换为块元素以确保样式设置的稳定性，并提供了两种实现方式：一种是保留a标签内的div，另一种是直接将a标签转换为块元素。示例代码展示了如何实现导航侧边栏的布局效果。

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

此案例主要练习，块元素、行内元素、行内块元素。

实现以下效果：

方法一：在a中设置了块元素div。a是行内元素，在学习行内元素时，要求行内元素只能容纳文本或行内元素。但是特殊情况a中，可以放块元素，但是pink老师讲，最好还是转换成块级元素，更为安全一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航侧边栏</title>
    <style>
        .head {
            height: 350px;
            width: 200px;
            
        }
        .ai {
            width: 200px;
            height:50px;
            background-color: rgb(59, 58, 56);
        }
        a {
            text-decoration: none;
            color: white;
            line-height: 50px;
            text-align: center;
            /* display: block; */

        }
        a:hover .ai{
            background-color:orange;
        }
    </style>
</head>
<body>
    <div class="head">
        <a href="#"><div class="ai">手机 电话卡</div></a>
        <a href="#"><div class="ai">电视 盒子</div></a>
        <a href="#"><div class="ai">笔记本 平板</div></a>
        <a href="#"><div class="ai">出行 穿戴</div></a>
        <a href="#"><div class="ai">智能 路由器</div></a>
        <a href="#"><div class="ai">健康 儿童</div></a>
        <a href="#"><div class="ai">耳机 音响</div></a>
    </div>
</body>
</html>

方法二：按照pink老师的做法，直接将a转换为块元素，这样就能为其设置宽高了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航侧边栏</title>
    <style>
        .head {
            height: 350px;
            width: 200px;
            
        }
        .ai {
            width: 200px;
            height:50px;
            background-color: rgb(59, 58, 56);
        }
        a {
            display: block;
            text-decoration: none;
            color: white;
            line-height: 50px;
            text-align: center;
            width: 200px;
            height:50px;
            background-color: rgb(59, 58, 56);
            

        }
        a:hover {
            background-color:orange;
        }
    </style>
</head>
<body>
    <div class="head">
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
    </div>
</body>
</html>