sass登陆页面实例

一、总结

一句话总结：

sass使用非常方便：使用就是将sass转化为css引入，并且动态监听让sass转化为css，可以很方便的所见即所得

1、sass安装？

npm就可以按照了：npm install -g sass

2、sass文件如何使用？

Sass使用.scss作为文件后缀名，不能直接在<link>标签中使用，需要编译为.css文件。
将sass文件转化为css文件：sass input.scss output.css

3、sass的作用是什么？

Sass可以让我们使用一些CSS中没有实现的功能，例如变量、嵌套、组合、继承等等；

4、实时监控并且将sass文件转化为css文件？

sass--watch input.scss:output.css
sass --watch scss:dist/css  将sass文件夹中的sass文件转化为dist/css文件夹中的css文件

5、弹性布局居中？

display: flex;
justify-content: center;
align-items: center;

6、弹性布局左右分布实例？

display: flex;
justify-content: space-between;

7、after做body的颜色块？

after里面可以定义内容，样式等，很方便
  &::after {

    content: "";

    position: absolute;

    top:;

    left:;

    width: 100%;

    height: 100%;

    z-index: -1;

    background: $main-color;

    opacity: 0.8;

  }

8、css动画实例？

有hover属性后，可以加个transition: all 0.4s;
&:last-child {

  color: #fff;

  background: $second-color;

  transition: all 0.4s;

  &:hover {

    background: $main-color;

  }

}

9、vh使用实例？

min-height: 100vh;
body {

  position: relative;

  min-height: 100vh;

  background: url(../img/bg.jpg) no-repeat center center/cover;

  display: flex;

  justify-content: center;

  align-items: center;

}

二、sass登陆页面实例

1、效果图

 

2、代码

1）html代码：index.html

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="UTF-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <link rel="stylesheet" href="css/main.css" />

     <title>Document</title>

   </head>

   <body>

     <div class="card">

       <h3>登录后更精彩</h3>

       <form>

         <input type="email" id="email" name="email" placeholder="邮箱" />

         <input type="password" id="password" name="password" placeholder="密码" />

         <input type="submit" value="登录" />

       </form>

       <ul>

         <li><a href="#">注册</a></li>

         <li><a href="#">忘记密码</a></li>

       </ul>

     </div>

   </body>

 </html>

2）sass代码：main.scss

 $main-color: #2ecc71;

 $second-color: #27ae60;

 * {

   margin:;

   padding:;

   box-sizing: border-box;

 }

 body {

   position: relative;

   min-height: 100vh;

   background: url(../img/bg.jpg) no-repeat center center/cover;

   display: flex;

   justify-content: center;

   align-items: center;

   &::after {

     content: "";

     position: absolute;

     top:;

     left:;

     width: 100%;

     height: 100%;

     z-index: -1;

     background: $main-color;

     opacity: 0.8;

   }

   .card {

     width: 400px;

     padding: 2rem 3rem;

     background: #fff;

     h3 {

       font-weight:;

       color: $second-color;

       margin-bottom: 1rem;

     }

     form input {

       display: block;

       width: 100%;

       border: 1px solid #ddd;

       padding: 0.5rem;

       margin-bottom: 1rem;

       &:last-child {

         color: #fff;

         background: $second-color;

         transition: all 0.4s;

         &:hover {

           background: $main-color;

         }

       }

       &:focus {

         outline: 1px solid $main-color;

       }

     }

     ul {

       list-style: none;

       display: flex;

       justify-content: space-between;

       font-size: 0.9rem;

       li a {

         color: #333;

         text-decoration: none;

         border-bottom: 1px solid transparent;

         transition: all 0.4s;

         &:hover {

           color: $main-color;

           border-bottom: 1px solid $main-color;

         }

       }

     }

   }

 }

3）css代码：main.css

 * {

   margin:;

   padding:;

   box-sizing: border-box;

 }

 body {

   position: relative;

   min-height: 100vh;

   background: url(../img/bg.jpg) no-repeat center center/cover;

   display: flex;

   justify-content: center;

   align-items: center;

 }

 body::after {

   content: "";

   position: absolute;

   top:;

   left:;

   width: 100%;

   height: 100%;

   z-index: -1;

   background: #2ecc71;

   opacity: 0.8;

 }

 body .card {

   width: 400px;

   padding: 2rem 3rem;

   background: #fff;

 }

 body .card h3 {

   font-weight:;

   color: #27ae60;

   margin-bottom: 1rem;

 }

 body .card form input {

   display: block;

   width: 100%;

   border: 1px solid #ddd;

   padding: 0.5rem;

   margin-bottom: 1rem;

 }

 body .card form input:last-child {

   color: #fff;

   background: #27ae60;

   transition: all 0.4s;

 }

 body .card form input:last-child:hover {

   background: #2ecc71;

 }

 body .card form input:focus {

   outline: 1px solid #2ecc71;

 }

 body .card ul {

   list-style: none;

   display: flex;

   justify-content: space-between;

   font-size: 0.9rem;

 }

 body .card ul li a {

   color: #333;

   text-decoration: none;

   border-bottom: 1px solid transparent;

   transition: all 0.4s;

 }

 body .card ul li a:hover {

   color: #2ecc71;

   border-bottom: 1px solid #2ecc71;

 }

 /*# sourceMappingURL=main.css.map */
 

sass登陆页面实例的更多相关文章

  1. web系统登陆页面增加验证码

    传统登陆页面中包含两个输入项: • 用户名 • 密码有时为了防止机器人进行自动登陆操作,或者防止恶意用户进行用户信息扫描,需增加动态验证码功能.此时,登陆页面中包含了三个输入项: • 用户名 • 密码 ...

  2. Shrio登陆验证实例详细解读（转）

    摘要:本文采用了Spring+SpringMVC+Mybatis+Shiro+Msql来写了一个登陆验证的实例,下面来看看过程吧!整个工程基于Mavevn来创建,运行环境为JDK1.6+WIN7+to ...

  3. 用java编写一个微博登陆页面

    上次也写了一个微博登陆页面,不过功能还不够完善.今天重新完善了一些功能,分享出来给大家. 基本功能如下: (1)具有类似新浪微博的用户注册图形界面. (2)使用用户名或手机号注册,注册时需要提供新密码 ...

  4. [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...

  5. Shiro学习总结（4）——Shrio登陆验证实例详细解读

    最终效果如下: 工程整体的目录如下: Java代码如下: 配置文件如下: 页面资源如下: 好了,下面来简单说下过程吧! 准备工作: 先建表: [sql] view plain copy drop ta ...

  6. 编写大型项目web页面 从写web登陆页面开始

    web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用的cutterman) sketch 可以使用阿里的工具 ...

  7. Springsecurity3.1.3配置多个登陆页面

    需求:网站的前台和后台不同的url需要不同的登陆页面,不同的异常捕获方式. spring-security3.1以后的版本支持多个<http>标签,因此本文所采用的方式就是使用两个,实际上 ...

  8. MUI APP防止登陆页面出现白屏

    最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以, ...

  9. Ajax 提交session实效跳转到完整的登陆页面

    在spring security 中 Ajax提交时,session超时,局部加载登陆页面,为解决这个问题,重写ajax提交,返回的是modeview或者没有制定datatype时; 如果检测到加载到 ...

随机推荐

  1. sqlserver TOP 问题（转载）

          来谈谈SQL数据库中"简单的"SELECT TOP—可能有你从未注意到的细节 首先从博客园的Jerome Wong网友说起 他提出了一个这样的问题 本人写了好几年SQL ...

  2. JavaScript: 自动类型转换

    我们都知道,JavaScript是类型松散型语言,在声明一个变量时,我们是无法明确声明其类型的,变量的类型是根据其实际值来决定的,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期 ...

  3. nginx 是如何分配 worker 进程连接数的

    客户端连接过来后,多个空闲的进程,会竞争这个连接,很容易看到,这种竞争会导致不公平,如果某个进程得到 accept 的机会比较多,它的空闲连接很快就用完了,如果不提前做一些控制,当 accept 到一 ...

  4. Python——迭代器&可迭代对象

    可迭代对象 什么是对象: Python中,一切皆对象.一个变量,一个列表,一个字符串,文件句柄,函数等等都可称为一个对象.一个对象就是一个实例,就是实实在在的东西. 什么是迭代 迭代就是一个重复的过程 ...

  5. springboot引用三方jar包

    在springboot项目中可能会用到三方工具类(比如接入短信网关时给出的工具jar包),这时候需要在springboot项目中手动引入进来 1. springboot工程目录, lib/ucpaas ...

  6. Go数据类型之复合数据类型--Slice

    3.2 Slice 一个slice是一个轻量级的数据结构,提供了访问数组子序列(或者全部)元素的功能,而且slice的底层确实引用一个数组对象. 一个slice由三个部分构成:指针.长度和容量.指针指 ...

  7. [LeetCode] 0155. Min Stack 最小栈 & C++Runtime加速

    题目 Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. ...

  8. Linux系统下文件压缩与打包命令

    Linux系统下文件压缩与打包命令 常用的压缩文件拓展名 * .Z * .zip * .gz * .bz2 * .xz * .tar * .tar.gz * .tar.bz2 * .tar.xz 压缩 ...

  9. 移动App性能评测与优化-Android内存测试 ，DVM原理

    常见的测试方法包括Monkey/UIAutomator类的常规压力测试,大数据/操作的峰值压力测试,长时间运行的稳定性测试等. 前提: 测试准备:版本是纯净版本,不应该附加多余的log和调试用组件. ...

  10. Union-Find(并查集): Union-Find Application

    Union-find 可以应用在很多方面 之前我们看到了union-find在dynamic connectivity上的应用,接下来介绍它在percolation上的应用. union-find在K ...