# webPractice

**Repository Path**: hilarywwt/webPractice

## Basic Information

- **Project Name**: webPractice
- **Description**: This is responsive page, there are a lot of animation effects inside.（响应式的静态页面，包含很多动画效果）
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-12
- **Last Updated**: 2021-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webPractice
> This is responsive page, there are a lot of animation effects inside.<br>
  这是响应式的静态页面，包含很多动画效果

****
	
|Author|窩窩头:panda_face:|
|---|---
|E-mail|hilaryha@qq.com


****
## 目录
* [项目说明](#项目说明)
* [图片展示](#图片展示)
* [总结](#总结)

  
*****
### 项目说明
-----
1. 此项目属于静态响应式网页，根据不同分辨率，展示不同效果  

2. 布局运用Bootstrap框架+jQuery

3. 对应的动画插件有`AOS.js`、`TypeIt.js`、`fancybox.js`、`Swiper.js`等

4. 主要实现，通过媒体查询@media 和自适应单位rem
   > css主要利用sass预编译，所以先安装sass，然后sass基于Ruby，<br>
     因为使用的windows，所以要安装Ruby  
     最后根据不同分辨率，调整对应的效果，其实就是每一个分辨率下，修改对应样式，<br>
     主要修改字体大小、行高、padding、margin、width、height等
  

*****
### 图片展示
------

|分辨率|展示图|
|---|---
|`1920*1080分辨率`|![image](https://github.com/HilaryHA/webPractice/blob/master/static/image/wp_1.png)![image](https://github.com/HilaryHA/webPractice/blob/master/static/image/wp_2.png)
|`1366*768分辨率`|![static/image](https://github.com/HilaryHA/webPractice/blob/master/static/image/wp_3.png)![static/image](https://github.com/HilaryHA/webPractice/blob/master/static/image/wp_4.png)
|`768*1024分辨率`|![static/image](https://github.com/HilaryHA/webPractice/blob/master/static/image/wp_5.png)

  
*****
### 总结：
-----
1. 响应式页面，主要是对应不同分辨率下，部分布局的改动，大体布局的缩小放大
2. 其中修改对应不同分辨率的样式，时间花费比较久，可能注重细节，哈哈，然后是动画插件的运用