CSS元素显示模式(行内块)小米侧边栏

最新推荐文章于 2024-02-23 13:38:19 发布

原创最新推荐文章于 2024-02-23 13:38:19 发布 · 462 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何通过 display属性将行内元素转变为块级元素（如侧边栏设计）和行内块元素（如导航栏），并展示了小米侧边栏的具体实现，包括CSS样式和HTML结构。

元素显示模式（块级元素，行内元素，行内块）

标签本身都有自己的属性；在实际开发中，有些标签想使用其他标签的属性，怎么用呢，很简单。

块，行内，行内块元素是可以随意转换的，语法：

display:block;   // 把元素转化为块级元素，也就具有了块级元素的属性，此时每个元素都独占一行，可以设置他的宽高，边距等；eg:侧边栏的设计

display:inline-block; // 把元素转化为，行内块元素，此时可以显示在一行，且为块级元素，eg: 导航栏的设计

注意事项：当转化以后也就失去了本身的属性。

小米侧边栏的设计：

// 样式
a {
    display: block;       //侧边栏，将行内元素转化为块级元素
    width: 200px;
    height: 36px;
    text-decoration: none;
    color: aliceblue;
    background-color: #55585A;
    padding-left: 32px;
    line-height: 36px;
}

a:hover {
    background-color: #ff6700;
}

// 结构；
	<a href="#">手机 电话卡</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
    <a href="#">电视 盒子</a>

示例图：
在这里插入图片描述
自学前端的兔兔