3月30日笔记

1.悬浮鼠标状态效果添加

点击查看代码 
<style type="text/css">
a{
/*内联、行元素，默认*/
display:inline;
/*可以转成块元素*/
/*display:block;*/
/*更改超级链接默认的样式*/
/*更改文本颜色*/
color:#666666;
/*去掉下划线修饰*/
text-decoration:none;
/*字号48像素*/
font-size:48px;
/*鼠标悬停状态*/
a:hover{
text-decoration:underline;
</style>
2.创建效果图：

62d6dd921e995bfaafbc71e10f5a40bf

点击查看代码 
<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: #f5f5f5;
            gap: 2px; /* 字母之间轻微间距，更美观 */
        }

        /* 字母容器样式 */
        .letter {
            display: inline-block;
            font-size: 48px;
            font-weight: bold;
            color: #888; /* 默认灰色字体 */
            padding: 8px 12px;
            background: transparent;
            border: 3px solid transparent;
            box-sizing: border-box; /* 核心修复：防止悬停抖动 */
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* 鼠标悬停效果 */
        .letter:hover {
            background-color: #000;
            border-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <span class="letter">programe</span>
</body>
</html>
posted @ 2026-04-06 20:13  createcoding  阅读(4)  评论(0)    收藏  举报