# lesson-html
**Repository Path**: greengis/lesson-html
## Basic Information
- **Project Name**: lesson-html
- **Description**: HTML+CSS 基础课，通过多个网页设计实例讲解HTML常用标签以及CSS常用样式，围绕CSS Grid布局学习来快速上手网页设计及排版的基础课程。
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 17
- **Forks**: 0
- **Created**: 2022-01-13
- **Last Updated**: 2024-11-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# lesson-html
#### 课程介绍
HTML+CSS 基础课，通过多个网页设计实例讲解HTML常用标签以及CSS常用样式，围绕CSS Grid布局学习来快速上手网页设计及排版的基础课程。全部课程包含：HTML基础课程3节，CSS基础课程4节，新闻稿网页1节，个人简历网页2节，wordle游戏页面1节，仿163邮箱登录页面2节，仿京东商城页面4节，个人网站首页附动画2节，个人网站自适应1节。
以下按课程顺序，列举分支导航：
#### HTML基础课程
01. HTML元素：正常开闭标记vs无内容元素 块级元素vs行内元素 HTML5元素（基础）（分支html-01）
https://gitee.com/greengis/lesson-html/tree/html-01
02. 表格元素：（分支html-02）https://gitee.com/greengis/lesson-html/tree/html-02
03. 多媒体元素：video、audio（分支html-03）https://gitee.com/greengis/lesson-html/tree/html-03
#### CSS基础课程
01. CSS 选择器：常见CSS选择器（类选择器、id选择器、标签选择器）（分支css-01）
https://gitee.com/greengis/lesson-html/tree/css-01
02. CSS 盒模型：（分支css-02）
https://gitee.com/greengis/lesson-html/tree/css-02
03. CSS 定位：相对定位与绝对定位（分支css-03）
https://gitee.com/greengis/lesson-html/tree/css-03
04. CSS Grid布局：（分支css-04）
https://gitee.com/greengis/lesson-html/tree/css-04
#### 新闻稿页面实例
01. 新闻稿文章页面设计与排版（分支article-01）
https://gitee.com/greengis/lesson-html/tree/article-01
#### 个人简历页面实例
01. 布局Layout（分支resume-01）
https://gitee.com/greengis/lesson-html/tree/resume-01
02. 着色Coloring（分支resume-02）
https://gitee.com/greengis/lesson-html/tree/resume-02
#### Wordle游戏页面实例
01. Wordle——网页设计与布局（分支wordle-01）https://gitee.com/greengis/lesson-html/tree/wordle-02
#### 仿163邮箱登录页面实例
01. 布局Layout（分支login-01）https://gitee.com/greengis/lesson-html/tree/login-01
02. 着色Coloring（分支login-02）
https://gitee.com/greengis/lesson-html/tree/login-02
#### 仿京东商城页面实例
01. 布局Layout（分支jingdong-01）https://gitee.com/greengis/lesson-html/tree/jingdong-01
02. 导航栏部分着色及优化（分支jingdong-02）https://gitee.com/greengis/lesson-html/tree/jingdong-02
03. 功能栏部分着色及优化（分支jingdong-03）https://gitee.com/greengis/lesson-html/tree/jingdong-03
04. 商品栏部分着色及优化（分支jingdong-04）https://gitee.com/greengis/lesson-html/tree/jingdong-04
#### 个人网站首页实例1——动画部分
01. 布局Layout（分支animation-01）https://gitee.com/greengis/lesson-html/tree/animation-01
02. 添加动画（分支animation-02）https://gitee.com/greengis/lesson-html/tree/animation-02
#### 个人网站首页实例2——自适应部分
01. 媒体查询，适配多种分辨率下屏幕显示（分支mediaquery-01）https://gitee.com/greengis/lesson-html/tree/mediaquery-01
> PS: 注意获取对应分支，准备课程以及课外进阶可以参考其它相关课程
>
>
> 分支clone命令(他人仓库，只读，请clone)
> git clone -b html-01 https://gitee.com/greengis/lesson-html.git "html-01"
>
> 分支获取流程(自己或合作者仓库，读写，请pull+checkout)
> 01. git init
> 02. git remote add origin https://gitee.com/greengis/lesson-html.git
> 03. 获取master: git pull origin master
> 04. 获取指定分支: git pull --all
> 05. 获取指定分支: git checkout -b html-01 origin/html-01