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

不念不忘少年蓝@ 2023-10-03 12:54 34阅读 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>padding案例02</title>
        <style>
            /*   1、把a转换成块级元素 */
            a {
        
                display: block;
                width: 200px;
                height: 50px;
                line-height: 50px;
                background-color: rgba(0, 0, 0, .7);
                font-size: 14px;
                color: #fff;
                padding-left: 30px;
                text-decoration: none;
                text-indent: 2em;
    
    
                /*    让文字居中  文字行高等于盒子高度即可实现*/
    
            }
    
            /*  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 条评论，34人围观）

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

相关阅读

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

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

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

相关简约好看导航栏(HTML、CSS)

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

迷南。/ 2023年10月03日 12:39/ 0 赞/ 33 阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 165 阅读

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

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

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

相关小米侧边栏--css

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

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

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

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

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

相关侧边导航栏

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

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

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

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

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

相关侧边栏实现思路

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

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

相关侧边栏组件(Vue)

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

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