初识前端三件套（CSS HTML JS）

<div class="todo-form">
    <input type="text" placeholder="请输入你的任务">
    <button class="btn gradient-btn">添加</button>
</div>  

<div class="item">
    <input type="checkbox" id="item1">
    <div class="name" contenteditable="false">吃饭</div>
    <div class="time">2025-01-22 12:00:00</div>
    <button class="btn scale-btn edit-btn">编辑</button>
    <button class="btn glow-btn delete-btn">删除</button>
</div>

<div class="item">
    <input type="checkbox" id="item2">
    <div class="name" contenteditable="false">睡觉</div>
    <div class="time">2025-01-22 22:00:00</div>
    <button class="btn scale-btn edit-btn">编辑</button>
    <button class="btn glow-btn delete-btn">删除</button>
</div>

<div class="item">
    <input type="checkbox" id="item3">
    <div class="name" contenteditable="false">打游戏</div>
    <div class="time">2025-01-22 14:00:00</div>
    <button class="btn scale-btn edit-btn">编辑</button>
    <button class="btn glow-btn delete-btn">删除</button>
</div>

hello pig

/* 添加背景渐变色到body */
body {
    min-height: 100vh;  /* 确保背景色填充整个视口高度 */
 /* 多彩渐变 */
    background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    margin: 0;  /* 移除默认边距 */
    padding: 20px;  /* 添加内边距 */
}

.todo-app
{
    width: 98%;
    height: 500px;
    background-color: #ffffff;
    border-radius: 15px;  /* 添加圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */
    margin: 20px auto;  /* 添加上下边距并水平居中 */
}   

.item
{
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    gap: 15px;  /* 添加元素之间的间距 */
}   

.title h1 {
    font-size: 24px;          /* 设置字体大小 */
    color: #333;              /* 设置颜色 */
    margin-bottom: 20px;      /* 设置下边距 */
    font-weight: bold;        /* 设置字体粗细 */
    text-align: center;       /* 文字居中 */
}

.item .name {
    flex: 1;  /* 让名称占据剩余空间 */
    font-size: 16px;
}

.item .time {
    color: #666;
    font-size: 14px;
    margin-right: 15px;
}

.item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 选中状态的样式 */
.item input[type="checkbox"]:checked + .name {
    text-decoration: line-through;
    color: #999;
}

.box
{
    width: 100px;
    height: 100px;
    background-color: red;
}


h1 
{
font-size: 32px;
color: #f72121;  /* 深灰色 */
font-weight: bold;  /* 加粗 */
margin-bottom: 20px;  /* 下方间距 */
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* 基础按钮样式 */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-weight: bold;
}

/* 发光按钮 */
.glow-btn {
    background-color: #4CAF50;
    box-shadow: 0 0 10px #4CAF50;
}
.glow-btn:hover {
    box-shadow: 0 0 20px #4CAF50;
    transform: translateY(-2px);
}

/* 渐变按钮 */
.gradient-btn {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    background-size: 200% auto;
}
.gradient-btn:hover {
    background-position: right center;
}

/* 脉冲按钮 */
.pulse-btn {
    background-color: #FF6B6B;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.pulse-btn:hover {
    animation: none;
    transform: scale(1.1);
}

/* 缩放按钮 */
.scale-btn {
    background-color: #6C63FF;
}
.scale-btn:hover {
    transform: scale(1.1);
}



.todo-form {
    display: flex;
    gap: 10px;
    padding: 20px;
}

.todo-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}



.todo-form button:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item .delete-btn {
    margin-left: 10px;
    background-color: #ff4757;  /* 红色背景 */
}

.name[contenteditable="true"] {
    padding: 2px 5px;
    border-radius: 4px;
    outline: none;
}

/* 调整按钮大小 */
.item .btn {
    padding: 8px 16px;  /* 稍微小一点的按钮 */
    font-size: 14px;
}