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. Android Jetpack组件之Lifecycles库详解

    Android Jetpack 组件是库的集合,这些库是为了协同工作而构建的,不过也可以单独采用,接下来会一一详细地学习这些库, 下面源码版本是com.android.support:appcompa ...

  2. python协程详解，gevent asyncio

    python协程详解,gevent asyncio 新建模板小书匠 #协程的概念 #模块操作协程 # gevent 扩展模块 # asyncio 内置模块 # 基础的语法 1.生成器实现切换 [1] ...

  3. python算法与数据结构-冒泡排序算法(32)

    一.冒泡排序介绍 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要 ...

  4. 【OI备忘录】trick汇总帖

    OI中的那些实用的小trick 在OI中,我们时常会用到一些小技巧,无论是代码方面还是数学方面抑或是卡常,都有很多不错的小技巧. 鄙人不才,往往没办法想出来,于是就有了这篇汇总帖~ 如有疏漏,还请da ...

  5. 01 浅谈c++及面向对象编程

    参考链接: 学习完c++但是对c++面向对象编程还是比较模糊,现在花时间总体来总结一下: c++中的对象是使用类来定义的,下面先重点讲一下类的概念. 说到类就要先说一下类的三种特性:封装,继承,多态. ...

  6. 《你们都是魔鬼吗》第八次团队作业：第四天Alpha冲刺

    <你们都是魔鬼吗>第八次团队作业:Alpha冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 完成最 ...

  7. 「TJOI2018」str

    碱基序列 题目描述 小豆参加了生物实验室.在实验室里,他主要研究蛋白质.他现在研究的蛋白质是由$k$个氨基酸按一定顺序构成的.每一个氨基酸都可能有$a$种碱基序列$s_{i,j}$构成. 现在小豆有一 ...

  8. 用Visio画流程图

    一:基本流程图 主要用于创建流程图.顺序图.信息跟踪图.流程规划图和结构预测图,包含了形状.连接线和链接. 步骤: (1)打开Visio,单击"类别"->"流程图& ...

  9. python API _ 1 (EasyDict)

    作用:参数调用文件一:from easydict import EasyDict as edictimport numpy as np config = edict() config.IMG_HEIG ...

  10. jquery中ajax跨域加载

    今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...