案例-简介小米侧边栏（HTML、CSS）

古城微笑少年丶 2023-10-03 12:39 7阅读 0赞

### 案例-简介小米侧边栏（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>综合案例---简介小米侧边栏</title>
        <style>
            /*   1、把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: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>
        <a href="#">耳机 音响</a>
    </body>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关案例-简介小米侧边栏（HTML、CSS）

案例-简介小米侧边栏（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

古城微笑少年丶/ 2023年10月03日 12:39/ 0 赞/ 8 阅读

相关 postman——工具简介——界面简介——侧边栏（sidebar）

一、侧边栏 postman的侧边栏(sidebar)可以进行查找、管理请求和集合操作。侧边栏包括两个选项卡，分别是：history(历史)、collections(集合)选项

浅浅的花香味﹌/ 2023年10月02日 08:38/ 0 赞/ 23 阅读

相关 postman——工具简介——界面简介——侧边栏里面详解

集合的…… [![e769b46bb5950e943e24f7842ebcff6b.png][]][e769b46bb5950e943e24f7842ebcff6b.png

╰半橙微兮°/ 2023年10月02日 08:37/ 0 赞/ 6 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 157 阅读

相关 JS 固定右侧侧边栏案例

1.页面滚动到一定位置.侧边栏改为固定定位. 2.页面继续滚动,会让返回顶部盒子显示出来. ![在这里插入图片描述][20200219154328915.gif]

àì夳堔傛蜴生んèń/ 2023年07月06日 14:30/ 0 赞/ 29 阅读

相关小米侧边栏--css

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

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

相关侧边导航栏

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

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

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

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

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

相关侧边栏组件(Vue)

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

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

相关手风琴导航栏侧边-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

朴灿烈づ我的快乐病毒、/ 2021年06月22日 15:36/ 0 赞/ 673 阅读