# 仿360浏览器demo

**Repository Path**: itsandy/demo-like-360-browser

## Basic Information

- **Project Name**: 仿360浏览器demo
- **Description**: 仿360浏览器静态demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 仿站360浏览器demo

> 项目目录
>

```
360
|————index.html
|————js
	 |————jquery.min.js
	 |————fullpage.js
|————images
|————css
	 |————index.css
	 |————fullpage.css
```

> fullPage插件

基于jQuery制作全屏网站

官网：http://fullpage.81hu.com/

> 定位bug疑问

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-22_13-03-53.png)

疑问：我设置了背景图片为什么我的导航栏消失了

是因为定位有叠加层级的，可以通过z-index提高层级

```sh
#定位叠加层级：z-index：数值
#后面的数值越大，层级越高，相当于css的层级
#只有定位的盒子才有z-index的属性
```

> demo布局

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-25_21-41-38.png)

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-22_16-07-38.png)

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-25_21-42-23.png)

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-25_21-42-37.png)

> 重要笔记

```sh
# 文字垂直居中
line-height:盒子高度
# 文字水平居中
text-align:center
# 盒子水平居中
margin:auto
# 字间距
letter-spacing:px
# 图片垂直居中
vertical-align: middle
```

> 精灵技术

```sh
# 借助于背景位置来实现
background-position:xpx,ypx
x表示正值，y表示负值
```

![](G:\仿站360浏览器demo\360\笔记images\Snipaste_2020-09-25_21-21-43.png)