前端开发入门教程

欢迎来到前端开发入门教程！本教程将指导您了解创建基本网页所需的HTML, CSS和JavaScript的基础知识。

目录

HTML基础

HTML是构建网页内容的骨架。以下是创建一个基础HTML页面的步骤：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>网页标题</h1>
    </header>
    <nav>
        <!-- 导航链接 -->
    </nav>
    <main>
        <h2>主要内容标题</h2>
        <p>这里是主要内容。</p>
    </main>
    <footer>
        <!-- 联系信息 -->
    </footer>
</body>
</html>
  • DOCTYPE 声明定义了文档类型，告诉浏览器页面使用的是HTML5。
  • html 是页面的根元素。
  • head 包含了所有的元数据和页面标题。
  • body 包含了网页的所有内容。

CSS基础

CSS用于设置网页的样式。可以通过以下方法将CSS添加到HTML中：

/* 直接在HTML文件中通过 <style> 标签添加 */
<style>
    body {
        background-color: #f0f0f0;
    }
    h1 {
        color: #333;
    }
</style>

/* 通过链接外部CSS文件 */
<link rel="stylesheet" type="text/css" href="styles.css">

在CSS中，您可以使用类（.classname）、ID（#idname）或HTML标签来定义样式规则。

CSS 进阶实战

创建仿纸张层 Paper-Like Overlay

We’ll start with the CSS for the paper-like overlay that gives the feeling of a semi-transparent letter paper.

.paper-like-overlay {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 0;
    margin-top: -5vh; /* Adjust this value as per your layout */
    position: relative; /* To position it above the footer */
    z-index: 10; /* Ensures it's above other elements */
}

This CSS snippet gives a div a semi-transparent white background with a slight shadow, making it appear like a piece of paper. It’s centered using Flexbox and positioned above other elements with z-index.

把图片切割成圆形 Circular Profile Picture

For creating a circular profile picture, we use the following CSS:

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

The border-radius: 50% property is key to making the image circular. The object-fit: cover ensures that the image covers the entire area without distortion.

Aligning Content

Lastly, we ensure that the content is well-aligned and presents well on various screen sizes.

.content {
    max-width: 800px; /* Sets a max width for the content */
    margin: auto;
    padding: 20px;
    text-align: center; /* Centers the text */
}

The .content class is used to wrap your textual content and images, ensuring they are centered and don’t stretch too wide on larger screens.

Remember to practice these CSS properties and experiment with different values to see how they affect your layout. The best way to learn is by doing, so don’t hesitate to tweak and play with the code!

CSS 快速参考手册

在这个手册中，我们将汇总之前讨论的一些关键CSS知识点，以及响应式设计的实践技巧。这将帮助你设计和实现一个在不同设备上均能良好展现的网页。

基础选择器和样式

/* 元素选择器 */
body {
    font-family: 'Roboto Mono', monospace;
    color: #333;
}

/* 类选择器 */
.paper {
    background: white;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}

/* ID选择器 */
#unique-element {
    border: 1px solid #333;
}

/* 属性选择器 */
input[type="text"] {
    background-color: #f1f1f1;
}

布局和定位

/* Flexbox布局 */
.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 绝对定位 */
.absolute-element {
    position: absolute;
    top: 50px;
    right: 100px;
}

/* 固定定位 */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
}

响应式设计

视口元标签

<meta name="viewport" content="width=device-width, initial-scale=1">

媒体查询

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
    .paper {
        width: 100%; /* 纸条宽度为100% */
        margin: 10px 0;
    }
}

使用视口单位（vw/vh）

.element {
    width: 50vw; /* 宽度为视口宽度的50% */
    height: 50vh; /* 高度为视口高度的50% */
}

交互和动画

/* 悬停效果 */
.button:hover {
    background-color: #555;
    color: #fff;
}

/* 过渡效果 */
.transition-element {
    transition: background-color 0.3s ease;
}

文本和字体

/* 字体样式 */
.font-styling {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: bold;
}

/* 文本装饰 */
.no-decoration {
    text-decoration: none; /* 去除下划线 */
    color: inherit; /* 继承父元素颜色 */
}

其他实用样式

/* 盒模型 */
.box-model {
    width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    margin: 20px;
}

/* 背景和边框 */
.background-border {
    background-color: #f1f1f1;
    border-radius: 4px; /* 圆角边框 */
}

请确保测试您的CSS在不同的设备和浏览器上的表现，以确保所有用户都能获得良好的体验。

JavaScript 基础到动画入门教程

欢迎来到JavaScript基础到动画入门教程！本教程将指导您从JavaScript基础开始，一直学习到创建基本动画的技巧。

目录

JavaScript 基础

JavaScript是一种高级、解释执行的编程语言，广泛用于网页交互。

数据类型和变量

JavaScript有几种数据类型：String, Number, Boolean, Object, Function, Symbol, undefined, 和 null。

// 字符串
var name = "Alice";

// 数字
var age = 25;

// 布尔值
var isStudent = true;

// 对象
var person = {
  name: "Alice",
  age: 25
};

// 函数
function greet() {
  console.log("Hello World!");
}

控制结构

JavaScript提供了标准的控制结构，如 if, for, while。

// if语句
if (age > 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

// for循环
for (var i = 0; i < 5; i++) {
  console.log(i);
}

// while循环
while (isStudent) {
  console.log("Studying");
  // 假设有一个退出循环的条件
  break;
}

JavaScript 于网页交互基础

JavaScript为网页添加交互性。可以直接在HTML文件中添加：

<script>
    // 这里是JavaScript代码
    console.log('Hello, World!');
</script>

或者链接外部JavaScript文件：

<script src="scripts.js"></script>

DOM 操作

文档对象模型（DOM）是HTML和XML文档的编程接口。

javascript

// 获取元素
var myElement = document.getElementById('myElement');

// 改变内容
myElement.innerHTML = "New Content";

// 改变样式
myElement.style.color = "blue";

事件处理

事件处理允许您响应用户的行为。

// 添加事件监听器
myElement.addEventListener('click', function() {
  console.log('Element clicked!');
});

动画基础

在JavaScript中，动画可以通过多种方式实现，例如 setInterval, requestAnimationFrame 或 CSS动画与JavaScript相结合。

使用 setInterval

// 每1000ms改变一次颜色
setInterval(function() {
  myElement.style.color = myElement.style.color == 'blue' ? 'red' : 'blue';
}, 1000);

使用 requestAnimationFrame

function animate() {
  // 动画代码
  myElement.style.left = (parseInt(myElement.style.left, 10) || 0) + 1 + 'px';
  
  // 递归调用
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

创建动态效果

示例 - 动态墨点动画

创建不规则墨点效果的动画，让墨点在屏幕上随机位置出现，并具有随机的形状和大小。在本节中，我们将学习如何使用JavaScript和CSS来创建一个动态的墨点动画效果。

1. 创建基本的墨点结构

我们首先需要在HTML中创建一个容器，用来放置我们的墨点。

<div id="ink-container"></div>

2. 使用JavaScript动态生成墨点

为了生成墨点，我们将编写一个JavaScript函数来创建一个新的div元素，并赋予它一些随机的属性，比如位置和大小。

function createInkDrop() {
    var inkDrop = document.createElement('div');
    inkDrop.classList.add('ink-drop');
    inkDrop.style.top = randomPosition() + 'vh';
    inkDrop.style.left = randomPosition() + 'vw';
    inkDrop.style.transform = `scale(${Math.random() * 1})`;
    // ...其他样式属性
    return inkDrop;
}

3. 生成初始墨点并设置定时器

我们将使用window.onload事件来初始化动画，并设置一个定时器来定期添加新的墨点。

window.onload = function() {
    generateInkDrops(5); // 生成5个初始墨点
    // 每秒添加一个新墨点
    setInterval(() => {
        document.getElementById('ink-container').appendChild(createInkDrop());
    }, 1000);
};

4. CSS动画效果

在CSS中，我们定义墨点的基本样式和动画效果。

.ink-drop {
    position: absolute;
    border-radius: 50%;
    background: black;
    width: 10px;
    height: 10px;
    animation: ink-splash 2s linear infinite;
}

@keyframes ink-splash {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

5. 结合使用JavaScript和CSS

在CSS中设置 animation: ink-splash 2s linear infinite; 意味着墨点将应用 ink-splash 关键帧动画，动画每次执行将持续2秒，以线性的速度过渡（即匀速），并且动画将无限次重复。

而JavaScript中使用 setInterval 每秒添加一个新的墨点则是控制DOM（文档对象模型）动态添加新的墨点元素。这些墨点一旦添加到DOM中，就会立即开始应用CSS定义的动画。

这里的关系是：

  • CSS定义了单个墨点动画的外观和行为。
  • JavaScript则定期每秒在页面上生成并添加一个新的墨点元素。

当新的墨点通过JavaScript创建并插入到DOM中时，浏览器检测到该元素有一个CSS动画定义，因此新的墨点会立即开始动画。由于动画设置为无限循环，每个墨点会独立地无限重复其动画。

结合这两部分，你的网页会持续不断地在随机位置生成新的墨点，而每个墨点都会执行2秒渐隐的动画，然后重新开始。这就创造了一种看起来墨点不断出现并渐隐的动态效果。

JavaScript控制墨点的动态生成和位置设置，CSS则控制它们的外观和动画效果。通过这种方式，我们创建了一个简单但是动态和有趣的墨点效果。

结语

本教程介绍了如何使用HTML, CSS, 和JavaScript来创建一个简单的动态墨点效果。这只是一个起点，通过实践，您可以进一步探索并创造出更多复杂和精细的动态效果。记住，编程是一个不断学习和创造的过程，不要害怕尝试和犯错误。继续编码，享受创造！

请将这段内容加入到你的教程文件中，你可以使用Markdown来格式化和组织这些信息。这会帮助你巩固新学到的知识，并且随时可以回来复习。