# front-end-base

**Repository Path**: ciclebyte/front-end-base

## Basic Information

- **Project Name**: front-end-base
- **Description**: 前端基础入门
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-26
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Front-End-Base

前端基础学习项目，包含了 HTML5、CSS2、CSS3 等前端基础技术的示例代码和练习项目。

## 项目结构

```
front-end-base/
├── 2_CSS2/              # CSS2 基础示例
│   ├── favicon.ico
│   └── images/          # 相关图片资源
│       ├── arrow.png
│       ├── bg.gif
│       └── video.gif
├── 3_HTML5/             # HTML5 基础示例
│   ├── favicon.ico
│   └── .vscode/         # VS Code 配置
├── 4_CSS3/              # CSS3 高级特性示例
│   ├── demo.html        # CSS3 演示页面
│   └── images/          # CSS3 相关图片资源
└── self/soft/           # 综合实战项目
    ├── index.html       # 首页
    ├── category.html    # 分类页
    ├── css/
    │   ├── index.css    # 主样式文件
    │   └── reset.css    # CSS 重置样式
    └── images/          # 项目图片资源
```

## 主要功能

### 1. CSS2 基础示例
- CSS2 基本语法和选择器
- 基础样式布局练习

### 2. HTML5 基础示例
- HTML5 新标签使用
- 语义化结构组织

### 3. CSS3 高级特性
- 动画效果
- 过渡效果
- 阴影、圆角等新特性

### 4. 综合实战项目
- 响应式导航栏设计
- 搜索功能实现
- 分类页面布局
- 轮播图/横幅展示
- 页脚版权信息

## 技术栈

- HTML5
- CSS2 / CSS3
- 原生 JavaScript（如有需要）

## 快速开始

直接用浏览器打开相应目录下的 `.html` 文件即可查看效果：

1. 查看 CSS3 演示：`4_CSS3/demo.html`
2. 查看综合项目首页：`self/soft/index.html`
3. 查看分类页面：`self/soft/category.html`

## 适用人群

- 前端初学者
- 需要复习基础知识的开发者
- 前端面试准备者

## 贡献指南

欢迎提交 Issue 或 Pull Request 来改进项目内容。

## 许可证

本项目仅供学习交流使用。