css

Sass之CSS模块化

css
总计 220 字
一般在项目目录中我们会建一个sass文件夹,内容一般为partials文件夹还有一个app.scss文件,partials文件夹存放我们的C

Sass语法点总结

css
总计 108 字
类似PHP,Sass提供了一种类似PHP的感觉,声明变量的方式与PHP相同,赋值方式则与CSS类似$变量名:值; 常用关键词 @import 引入sass模块

CSS 学习笔记01 wrapper class实现居中

css
总计 108 字
div内容居中 <!-- DESKTOP NAVIGATION --> <nav class="top-bar"> <div class="wrap"> <div class="top-bar-left"> <h3>site title</h3> </div> <div class="top-bar-right"> <ul class="menu"> <li><input type="search" placeholder="Search"></li> <li><button type="button" class="button">Search</button></li> </ul> </div> </div> </nav> .wrap{ width: 90%; margin: 0 auto; max-width: 1000px; } 1.用百分号的好处就是能够实时计算 2.margin用于

CSS 学习笔记03 按钮Full Height全高度实现

css
总计 45 字
nav a.button.alert{ background-color: #e83a37; font-size: 1.1rem; line-height: 60px; padding-top: 0px; padding-bottom: 0px; } line-height 保证居中 接着将padding-top和buttom设置为0即可

CSS学习笔记02 nav上下居中

css
总计 123 字
CSS学习笔记 02 nav上下居中 .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导航栏的高度一致,将paddin

CSS学习笔记04 背景

css
总计 68 字
透明背景 nav { background-color: black; } .menu { background-color: transparent; } 设置透明 这样就使得菜单的颜色与导航栏的颜色一致 背景加亮凸显文字 .menu > li > a:hover { background-color: rgba(255,255,255, 0.1); } 0.1代表透明度为百分之十

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

css
总计 54 字
.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