Sass之CSS模块化

一般在项目目录中我们会建一个sass文件夹,内容一般为partials文件夹还有一个app.scss文件,partials文件夹存放我们的CSS模块,app.scss中进行import

@import 'partials/temp;'

partials文件夹中的模块scss文件最前面必须加上下划线 _

阅读更多

Sass语法点总结

类似PHP,Sass提供了一种类似PHP的感觉,声明变量的方式与PHP相同,赋值方式则与CSS类似$变量名:值;

常用关键词

阅读更多

CSS学习笔记02 nav上下居中

1
2
3
4
5
6
7
8
9
10
11
12
.nav-desktop{
background-color: #e83a37;
font-size: 18px;
padding-top: 0px;
padding-bottom: 0px;
height: 60px;
}

.menu-text {
line-height: 60px;
padding: 0px;
}

只需要调整line-height与nav导航栏的高度一致,将padding设置为0,就能够轻松实现上下居中

法二:
直接修改padding-top,用devTool动态改变数值看结果

CSS学习笔记05 图片放大特效

1
2
3
4
5
6
7
8
9
10
11
.img-zoom-in img {
transition:all .2s ease-in-out;
} //记得加上浏览器前缀或者自动补全prefix

.img-zoom-in:hover img {
transform: scale(1.1);
}

.post-thumb {
overflow: hidden;
} //防止图片爆出外层div