MOneterの小站

CSS 基础教学

1. CSS选择器

CSS选择器用于选择要样式化的HTML元素。常见的选择器包括：

元素选择器：选择特定HTML元素
类选择器：选择具有特定class的元素
ID选择器：选择具有特定id的元素
伪类选择器：选择元素的特定状态

/* 元素选择器 */
p {
    color: blue;
    font-size: 16px;
}

/* 类选择器 */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
}

/* ID选择器 */
#header {
    background-color: #333;
    color: white;
}

/* 伪类选择器 */
a:hover {
    color: red;
    text-decoration: underline;
}

2. 盒模型

CSS盒模型是网页布局的基础概念。每个元素都被视为一个矩形盒子，包含：

内容(content)：元素的实际内容
内边距(padding)：内容与边框之间的空间
边框(border)：围绕内容和内边距的边界
外边距(margin)：盒子与其他元素之间的空间

.box {
    /* 内容尺寸 */
    width: 200px;
    height: 100px;
    
    /* 内边距 */
    padding: 20px;
    
    /* 边框 */
    border: 2px solid #333;
    
    /* 外边距 */
    margin: 15px;
    
    /* 盒模型计算 */
    /* 总宽度 = width + padding-left + padding-right + border-left + border-right */
    /* 总高度 = height + padding-top + padding-bottom + border-top + border-bottom */
}

/* 使用box-sizing: border-box可以更直观地控制元素尺寸 */
.border-box {
    box-sizing: border-box;
    width: 200px; /* 包含padding和border */
    padding: 20px;
    border: 2px solid #333;
}

CSS 动画教学

1. Transition 过渡

CSS过渡允许属性值在一定时间内平滑地变化，而不是立即改变。

transition-property：指定要过渡的属性
transition-duration：过渡持续时间
transition-timing-function：过渡速度曲线
transition-delay：过渡开始前的延迟

/* 基础过渡效果 */
.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: red;
}

/* 多个属性的过渡 */
.card {
    opacity: 0.8;
    transform: scale(1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* 分别设置不同属性的过渡 */
.complex-transition {
    transition: 
        opacity 0.3s ease,
        transform 0.5s ease-out 0.1s,
        background-color 0.2s linear;
}

2. Keyframes 动画

CSS关键帧动画允许创建更复杂的动画序列，通过定义动画在不同时间点的状态。

@keyframes：定义动画序列
animation-name：指定要使用的关键帧动画
animation-duration：动画持续时间
animation-iteration-count：动画播放次数

/* 定义关键帧动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 应用动画 */
.slide-element {
    animation: slideIn 0.8s ease-out;
}

.bounce-element {
    animation: 
        bounce 2s infinite,
        slideIn 1s ease-out;
}

/* 完整的动画属性 */
.advanced-animation {
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

3. 动画效果演示

点击下面的按钮查看不同的CSS动画效果：

JavaScript DOM 操作

1. 元素选择与操作

JavaScript提供了多种方法来选择和操作DOM元素。

getElementById()：通过id选择元素
querySelector()：使用CSS选择器选择第一个匹配元素
querySelectorAll()：选择所有匹配元素
修改内容：innerHTML, textContent

// 选择元素的不同方法
const elementById = document.getElementById('myElement');
const elementByQuery = document.querySelector('.my-class');
const elementsByQuery = document.querySelectorAll('div');

// 修改元素内容
elementById.innerHTML = '新内容';
elementByQuery.textContent = '纯文本内容';

// 修改样式
elementById.style.color = 'red';
elementById.style.fontSize = '20px';

// 添加/移除CSS类
elementByQuery.classList.add('active');
elementByQuery.classList.remove('inactive');
elementByQuery.classList.toggle('hidden');

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);

2. 遍历DOM树

了解如何在DOM树中导航和查找相关元素。

parentNode：访问父节点
childNodes：访问所有子节点
firstChild/lastChild：访问第一个/最后一个子节点
nextSibling/previousSibling：访问相邻节点

// 获取父元素
const parent = element.parentNode;

// 获取所有子元素
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

// 获取相邻元素
const nextElement = element.nextElementSibling;
const prevElement = element.previousElementSibling;

// 在DOM树中查找特定元素
const container = document.querySelector('.container');

// 在容器内查找元素
const button = container.querySelector('button');

// 检查元素是否包含特定类
if (element.classList.contains('active')) {
    console.log('元素处于激活状态');
}

// 遍历所有子元素
Array.from(container.children).forEach(child => {
    console.log(child.tagName);
});

3. DOM操作演示

尝试下面的DOM操作演示：

DOM操作演示区域

JavaScript 事件处理

1. 事件监听器

事件监听器允许JavaScript响应用户交互和其他事件。

addEventListener()：添加事件监听器
removeEventListener()：移除事件监听器
事件对象：包含事件相关信息
事件冒泡和捕获：事件传播机制

// 添加点击事件监听器
const button = document.querySelector('#myButton');

function handleClick(event) {
    console.log('按钮被点击了!');
    console.log('事件类型:', event.type);
    console.log('目标元素:', event.target);
    event.preventDefault(); // 阻止默认行为
}

button.addEventListener('click', handleClick);

// 添加多个事件类型
button.addEventListener('mouseover', function() {
    console.log('鼠标悬停在按钮上');
});

button.addEventListener('mouseout', function() {
    console.log('鼠标离开按钮');
});

// 使用事件委托
document.addEventListener('click', function(event) {
    if (event.target.classList.contains('item')) {
        console.log('点击了项目:', event.target.textContent);
    }
});

// 移除事件监听器
button.removeEventListener('click', handleClick);

2. 事件对象和方法

事件对象提供了丰富的信息和方法来控制事件行为。

preventDefault()：阻止默认行为
stopPropagation()：停止事件传播
target：触发事件的元素
currentTarget：绑定事件的元素

// 事件对象的使用
document.addEventListener('keydown', function(event) {
    console.log('按键代码:', event.keyCode);
    console.log('按键:', event.key);
    
    if (event.key === 'Escape') {
        console.log('ESC键被按下');
    }
});

// 表单提交事件
const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交
    
    const formData = new FormData(form);
    console.log('表单数据:', Object.fromEntries(formData));
});

// 鼠标事件
document.addEventListener('mousemove', function(event) {
    console.log(`鼠标位置: X=${event.clientX}, Y=${event.clientY}`);
});

// 阻止事件冒泡
const innerElement = document.querySelector('.inner');
innerElement.addEventListener('click', function(event) {
    console.log('内部元素被点击');
    event.stopPropagation(); // 阻止事件冒泡到外层元素
});

const outerElement = document.querySelector('.outer');
outerElement.addEventListener('click', function() {
    console.log('外部元素被点击 - 这不会在点击内部元素时触发');
});

3. 事件处理演示

尝试下面的交互演示：

鼠标悬停区域

事件日志将显示在这里...

计算机基础

1. 文件路径详解

理解文件路径是网页开发的基础：

绝对路径：从根目录开始的完整路径
相对路径：相对于当前文件的路径
URL路径：网络资源的地址
路径符号：./, ../, / 的含义

/* 文件结构示例：
project/
├── index.html
├── styles/
│   └── style.css
├── images/
│   ├── logo.png
│   └── background.jpg
└── pages/
    └── about.html
*/

/* 在 index.html 中引用资源： */


<link rel="stylesheet" href="styles/style.css">
<img src="images/logo.png" alt="Logo">
<a href="pages/about.html">关于我们</a>


<link rel="stylesheet" href="/styles/style.css">
<img src="/images/logo.png" alt="Logo">


<!-- 在 about.html 中引用根目录的样式 -->
<link rel="stylesheet" href="../styles/style.css">

/* 路径符号说明：
./   当前目录（可省略）
../  上级目录
/    根目录
*/

2. 资源文件管理

合理的文件组织结构让项目更易维护：

Behavior_Pack (BP)：存放脚本文件
Resource_Pack (RP)：存放资源文件
分类存储：图片、样式、脚本分开存放
命名规范：使用有意义的文件名

3. 资源调用实践

学习如何在HTML中正确引用资源文件：

图片引用：使用img标签或CSS背景
样式引用：link标签引入CSS
脚本引用：script标签引入JS
资源预加载：提高页面加载性能

<!DOCTYPE html>
<html>
<head>
    <!-- 引用Resource_Pack中的样式 -->
    <link rel="stylesheet" href="Resource_Pack/styles/main.css">
    
    <!-- 预加载重要资源 -->
    <link rel="preload" href="Resource_Pack/images/hero-bg.jpg" as="image">
</head>
<body>
    <!-- 引用Resource_Pack中的图片 -->
    <img src="Resource_Pack/images/logo.png" alt="网站Logo">
    
    <!-- 使用CSS引用背景图片 -->
    <div class="hero" style="background-image: url('Resource_Pack/images/hero-bg.jpg');">
        <h1>欢迎来到我的网站</h1>
    </div>
    
    <!-- 引用Behavior_Pack中的脚本 -->
    <script src="Behavior_Pack/script.js"></script>
</body>
</html>

4. 路径解释器工具

使用下面的工具来理解文件路径：

前端开发教学

Welcome at M.E.T.S_TG' Official Stations