昨日学习css简洁版侧边案例

Ara~追着风跑 2022-01-15 08:10:13
<!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>
        /* 分析1.把来链接a转换为块级元素,这样链接就可以独占一行,并且有宽度和高度
                2.鼠标经过a给链接设置背景颜色 */
        /* 步骤1 */
        
        a {
            width: 230px;
            height: 40px;
            line-height: 40px;
            background-color: #535758;
            display: block;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
        }
        /* 步骤2 */
        
        a:hover {
            background-color: #fe6700;
        }
    </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>

 

...全文
101 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

508,357

社区成员

发帖
与我相关
我的任务
社区描述
我命由我不由天,来吧,和哪吒一起奋发图强,搬砖工逆袭Java架构师!
社区管理员
  • 哪 吒
  • Baker-Chen
  • 是Lay
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

【Java技能树】和哪吒一起,打卡100天,每天分享一个知识点,一起学习,一起进步,告别CRUD,搬砖工逆袭Java架构师,加油!

【积分榜】积分榜前十每周都有精彩礼包赠送!

【添加微信】备注1024,加入哪吒微信交流群,一起学习交流进大厂

试试用AI创作助手写篇文章吧