小米侧边栏--css

悠悠 2023-07-02 09:26 52阅读 0赞

<!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>
            /* 把a转化成块级元素 */
            a {
        
                display: block;
                width: 230px;
                height: 40px;
                background-color: #55585a;
                font-size: 14px;
                color: #fff;
                text-decoration: none;
                text-indent: 2em;
    			line-height: 40px;
            }
            /* 2.鼠标经过a则更换背景颜色 */
            a:hover{
        
                background-color: #ff6700;
            }
        </style>
    </head>
    
    <body>
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200128185115663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关简约好看侧边栏(HTML、CSS)

简约好看侧边栏(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 12:54/ 0 赞/ 2 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 53 阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 373 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 341 阅读

相关 css基础案例2-小米商城侧边栏

案例图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

超、凢脫俗/ 2022年11月04日 12:24/ 0 赞/ 131 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 334 阅读

相关 JavaScript + CSS/CSS3 + HTML 侧边栏界面设计

下文将介绍两种侧边栏的界面设计，一种是在页面的右边显示侧栏内容；另一种是在页面左边显示侧栏，同时主体内容随着侧栏的出现整体向右移动。右侧边栏界面设计在撸码开始

深藏阁楼爱情的钟/ 2022年03月21日 13:52/ 0 赞/ 318 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 398 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 705 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 674 阅读