鱼C论坛

 找回密码
 立即注册
查看: 3487|回复: 0

[作品展示] 简陋侧边栏

[复制链接]
发表于 2021-7-24 13:23:46 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏</title>
    <style>
        body{
            margin: 0px;
            background-color: aqua;
            height:1000px;
        }
        #wall{
            width: 150px;
            background-color: aqua;
            position:absolute;
            right:0px;
            top:250px;
        }
        #wall a{
            position: relative;
            left: 120px;
            display: block;
            text-decoration: none;
            background-color: white;
        }
        #wall a em{
            font-style: normal;
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: blue;
            color: white;
            text-align: center;
            margin-right: 30px;
        }
        #wall:hover a{
            left: 0;
        }
        #wall a:hover{
            background-color: Cyan;
        }
        #wall a:hover em{
            background-color: DodgerBlue;
        }
    </style>
</head>
<body>
    <div id="wall">
       <a href="" style="-webkit-transition-duration: 0.1s;"><em>1</em>asdfg</a>
       <a href="" style="-webkit-transition-duration: 0.2s;"><em>2</em>sdfgh</a>
       <a href="" style="-webkit-transition-duration: 0.3s;"><em>3</em>dfghj</a>
       <a href="" style="-webkit-transition-duration: 0.4s;"><em>4</em>fghjk</a>
       <a href="" style="-webkit-transition-duration: 0.55s;"><em>5</em>ghjkl</a>
       <a href="" style="-webkit-transition-duration: 0.6s;"><em>6</em>qwert</a>
       <a href="" style="-webkit-transition-duration: 0.7s;"><em>7</em>werty</a>
       <a href="" style="-webkit-transition-duration: 0.8s;"><em>8</em>ertyu</a>
       <a href="" style="-webkit-transition-duration: 0.9s;"><em>9</em>asdfv</a>
       <a href="" style="-webkit-transition-duration: 1s;"><em>10</em>fdmfigf</a>
       <a href="" style="-webkit-transition-duration: 1.1s;"><em>11</em>dcf</a>
       <a href="" style="-webkit-transition-duration: 1.2s;"><em>12</em>difj</a>
       <a href="" style="-webkit-transition-duration: 1.3s;"><em>13</em>fdkfsd</a>
    </div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:31

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表