- sass
- git
- webpack
node
git
安装完成之后打开gitBash(Windows)或者terminal.app(mac)
将命令行的位置移动至目标文件夹:
cd 目标文件位置(XXXX/XXX/modern-lab)
首先使用一下命令初始化git
git init
如果还没有配置用户名和邮箱的可以使用以下命令配置:
git config user.name 'your name'
git config user.email 'yourEmail@example.com'
接下来添加远程库
git remote add origin git@github.com:dengyf5/modern-lab.git
然后使用pull命令将仓库的文件下载到本地:
git pull
将github上的代码同步到本地之后,使用以下命令初始化npm
cnpm install
也可以使用一下命令:
npm install
**大陆推荐使用第一种方法 如果还没有安装cnpm,可以使用以下命令安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org
至此,项目同步完毕。
项目结构主要是
modern-lab
├── README.md
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── images
│ │ └── icon
│ ├── index.js
│ ├── js
│ ├── style
│ │ ├── column.scss
│ │ ├── common.scss
│ │ ├── content.scss
│ │ ├── index.scss
│ │ ├── reset.scss
│ │ ├── sprites.scss
│ │ └── style.scss
│ └── view
│ ├── column.html
│ ├── content.html
│ └── index.html
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js
其中图片images文件夹区分为icon文件夹,如需使用icon文件里的图片,请看下方的icon目录
使用以下命令进行开发
npm start
如果需要调试不同的页面在网页地址更改即可,如:
默认: http://localhost:8080/
栏目页: http://localhost:8080/column.html
内容页:http://localhost:8080/content.html
由于使用了热更新,所以只需要更改你的源代码,网页就会自动更新
使用以下命令输出最后的打包的文件
npm run build
使用该命令之后,打包后的文件就会生成到dist文件夹中
此项目的icon使用sprites插件生成雪碧图,具体用法如下
- 将icon图片放到src/images/icon/文件夹之下
- 在你的sass(.scss)文件上方添加
@import 'sprites'
- 然后在你需要使用icon的选择器使用
@include sprite($icon-name)
实例:
//文件: tag.png
@import 'sprites';
.tag {
@include sprite($tag);
}
已经自动为.tag设置width、height以及background 当然,也可以查看style里面的sprites.scss文件,查找相应的变量
ssh-keygen -t rsa -C "youremail@example.com"
然后将密钥添加至GitHub设置中,详情请看:git教程
git push
现代化学实验与技术首页_ hover效果文字说明
-
Nav: 正常:#4A78A8 Hover:#365479
-
Content 1: 正常:无呈现带三角的横线 Hover:呈现,如图
-
Content 2卡片图: 正常:设备无变化 Hover:设备放大,显示突出效果
-
Content 3 icon: 正常:icon无动作 Hover:icon轻微抖动,以吸引注意力
-
Footer文字: 正常:黑色#000000 Hover:#4A78A8