# 前端基础学习

**Repository Path**: LovelyHzz/webpage-basic-learning

## Basic Information

- **Project Name**: 前端基础学习
- **Description**: html,css,javascript的基础学习案例
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/README.md
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-11
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript, JSON

## README

# 前端基础学习

## 介绍
`html`,`css`,`javascript`,`JQuery`的**基础**学习案例


## HTML
+ [HTML模板](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/HTML%E6%A8%A1%E6%9D%BF.md)
+ [HTML常用标签](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/HTML%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE.md)

### HTML案例制作

案例<b>使用了`css`样式</b>，不会<ins>可以先不加样式</ins>！
1. [连连看](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/llk.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/103428_ac03ebae_8254421.png "llk.png")

2. [旅游联盟注册页面](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/reg.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/103802_3b33af08_8254421.png "zc1.png")

3. [用户注册页面](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/register.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/104111_07f62c5d_8254421.png "zc2.png")

## CSS
+ [引入CSS样式表的3种方式](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/css%E5%BC%95%E5%85%A5%E7%9A%843%E7%A7%8D%E6%96%B9%E5%BC%8F.md)
+ [CSS单位](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS%E5%8D%95%E4%BD%8D.md)
+ [CSS选择器](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/CSS%E9%80%89%E6%8B%A9%E5%99%A8.md)
+ [盒子模型](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.md)
+ [CSS元素的三种显示模式](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%89%E7%A7%8D%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F.md)
+ [CSS浮动](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/%E6%B5%AE%E5%8A%A8.md)
+ [盒子定位](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/%E7%9B%92%E5%AD%90%E5%AE%9A%E4%BD%8D.md)

### CSS案例制作

1. [防百度首页](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/baidu.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/110634_b7b4427d_8254421.png "百度.png")

2. [新浪首页导航条](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/news.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/112745_8ebc96db_8254421.png "sing.png")

3. [QQ首页导航条](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/qq.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/113357_82cd94e8_8254421.png "qqnav.png")

4. [QQ注册页面](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/qq_register.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/113153_5eeeba5a_8254421.png "qq.png")

## JavaScript
+ [数组对象](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/%E6%95%B0%E7%BB%84.md)
+ [location对象](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/location%E5%AF%B9%E8%B1%A1.md)
+ [date日期对象,定时器](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/date%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1.md)
+ [js内置函数](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/js%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0.md)
+ [DOM操作](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/dom%E6%93%8D%E4%BD%9C.md)


### JavaScript案例制作

1. [仿Windows简易计算器](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/cal.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/115501_2ac9bdd0_8254421.png "cal.png")

2. [仿奥运五环](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/cutimg.html)  
**案例效果**  
<ins>普通的定义属性，无法完成真正的样式</ins>
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/120131_ae20059c_8254421.png "oly.png")

3. [alert模拟银行取款](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/money.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/120928_2fde7d03_8254421.png "pwd.png")

4. [猜大小](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/random.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/121113_b8618eb7_8254421.png "rand.png")

5. [九九乘法表](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/mul.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/121256_79b8a1ad_8254421.png "mul.png")

6. [随机选取图片](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/Olympic_rings.html)
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/130937_81ee4c6e_8254421.png "selectimg.png")

7. [QQ注册js自动切换图片效果](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/qq_register.html)
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/131229_cf4c11d1_8254421.png "qq1.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/131238_e5ae5dbf_8254421.png "qq2.png")

8. [注册验证](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/reg.html)
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/131423_9db34cf9_8254421.png "zcyz.png")


## 源码
+ [HTML案例源码](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/HTML/html-study.zip)
+ [CSS案例源码](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/CSS/css-study.zip)
+ [javascript案例源码](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JS/js-study.zip)

## html+css+js综合案例
+ [html+css+js的各种案例](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/html_css_js%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B.zip)
> 百度音乐，表格，畅销书排行榜，超链接，电影，购物车，古诗，家用电器，计算器，京东，精灵图（雪碧图），快乐庄园，图片切换（轮播）/透明，下拉框，新浪，注册，Json
**部分案例效果**<br>
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134801_b4cfd283_8254421.png "1.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134814_2316146f_8254421.png "2.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134825_d64e83f8_8254421.png "3.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134835_fd1cce70_8254421.png "4.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134844_30bd03f4_8254421.png "5.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134853_e6a25c3a_8254421.png "6.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0911/134903_95ddb94f_8254421.png "8.png")

## JQuery案例
[正则验证](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JQuery/%E6%AD%A3%E5%88%99%E9%AA%8C%E8%AF%81.html)  
**案例效果**  
![注册验证](https://images.gitee.com/uploads/images/2021/0915/151700_8f0e60fe_8254421.png "reg.png")

[json格式增删改查](https://gitee.com/LovelyHzz/webpage-basic-learning/blob/master/JQuery/json%E6%A0%BC%E5%BC%8F%E8%AF%BB%E5%8F%96.html)  
**案例效果**  
![输入图片说明](https://images.gitee.com/uploads/images/2021/0915/151910_2221c431_8254421.png "json.png")