css

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

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

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用于

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上下居中 .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

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

.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