1、首先引用Less

有npm安装、cdn引用、或者下载Less.js本地引用，我采用的是第三种方法

less.js引用：

下载地址：https://github.com/less/less.js/tree/master/dist

<script src="./js/less.js" type="text/javascript"></script>

cdn引用：

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

login.less引用（该文件代码贴下面啦）

<link rel="stylesheet/less" type="text/css" href="css/login.less">

2、Html布局

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>管理员登录</title>

  <link rel="stylesheet/less" type="text/css" href="css/login.less">

</head>

<body>

<!--登录表单父级盒子--开始-->

  <div class="form-container">

    <!--登录表单--开始-->

    <form class="form-main">

      <!--表单名-->

      <div class="form-item form-title">

        管理员登录

      </div>

      <!--表单组件-->

      <div class="form-item">

        <!--用户名输入框-->

        <input type="text" name="username" id="username" class="form-input" placeholder="用户名">

      </div>

      <div class="form-item">

        <!--用户名密码输入框-->

        <input type="password" name="password" id="password" class="form-input" placeholder="用户名密码">

      </div>

      <div class="form-item">

        <!--登录按钮-->

        <input type="submit" value="登 录" class="form-btn">

      </div>

      <div class="form-item form-forget">

        <!--忘记密码-->

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

      </div>

    </form>

    <!--登录表单--结束-->

  </div>

<!--表单父级盒子--结束-->

<script src="./js/less.js" type="text/javascript"></script>

</body>

</html>

3、样式login.less

//定义变量
@formWidth: 400px; //表单宽度

@formHeight: 300px; //表单高度

@inputWidth: 300px; //输入框宽度

@transition: 1.5s; //动画响应时间

@inputBottomBorder: 1px solid; //边框样式

@lineHeight: 52px; //行高

@focusColor: darkgreen; //聚焦颜色

@defaultColor: #ccc; //默认颜色

@fontFamily: "幼圆"; //字体样式

@fontSize: 16px; //字体大小

//代码部分

body{

  padding-top: 6%; //顶部距离

}

.form-container{

  margin: 0 auto; //水平居中

  padding: 50px; //内边距

  .form-main(); //混合

  transition: @transition; //延迟加载动画

}

.form-container:hover{ //鼠标移动至该区域触发

  box-shadow: 0px 0px 15px @defaultColor; //盒阴影

}

.form-main{

  width: @formWidth; //宽，变量

  height: @formHeight; //高

  text-align: center; //文本居中

  .form-input{ //嵌套

    width: @formWidth - 5px;

    line-height: @lineHeight - 10px;

    font-size: @fontSize;

    border: none; //去除原边框样式，变成底部横线样式，有点像app的登录界面输入框样式

    border-bottom: @inputBottomBorder @defaultColor;

    outline: none; //轮廓

    transition: @transition - 0.5s;

  }

  .form-input:focus{

    font-size: @fontSize + 5px;

  }

  .form-input::-webkit-input-placeholder{

    font-size: @fontSize - 1px;

    color: @defaultColor;

  }

  .form-input::-webkit-input-placeholder:hover{

    font-size: @fontSize - 5px;

  }

  .form-btn{

    width: @formWidth;

    line-height: @lineHeight - 10px;

    margin-top: @lineHeight - 10px;

    background: @focusColor;

    transition: @transition - 0.5s;

    font-weight: bold;

    border: none;

    border-radius: 2px; //按钮边缘圆滑

    color: white;

    cursor: pointer; //鼠标移至按钮改变鼠标样式

  }

}

.form-btn:hover{

  background: darkseagreen;

}

.form-item{

  line-height: @lineHeight;

}

.form-title{

  margin-bottom: @lineHeight - 40px;

  font-size: @fontSize + 20px;

  font-family: @fontFamily;

  color: @focusColor;

}

.form-forget{ //忘记密码样式

  margin-top: @lineHeight - 40px;

  color: @focusColor;

  text-align: right;

  border: none;

  a{

    text-align: right;

    text-decoration: none;

    color: @focusColor;

    font-size: @fontSize - 4px;

  }

}

input[type="text"]:focus, //输入框聚焦样式

input[type="password"]:focus {

  border-bottom: @inputBottomBorder @focusColor;

}

其实这里用css也可以实现，主要想入门less，所以使用一点less简单的语法。

4、效果展示

总结：less的初步使用

优点：可以减少重复代码的工作量，让代码之间的逻辑性更强、层次关系更清楚。

缺点：相比CSS，页面加载会变慢，因为此过程中需要将less转化为css文件。

【每天学一点-03】 使用Html5+Less实现简单的静态登录界面（入门Less）的更多相关文章

  1. 学一点 MYSQL 双机异地热备份—-MYSQL主从，主主备份原理及实践

    简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做 ...

  2. 每天学一点Python

    9月11日 1.用List实现Python里的?:条件表达式 ["false","true"][判断条件] 其实就是一个List[0]还是List[1]的问题. ...

  3. 最近都会来学一点Python

    https://www.cnblogs.com/hellosecretgarden/p/9206648.html 打开电脑,发现Python都是之前的代码,将近一年之前的时间. 最近都会重新掌握起来, ...

  4. 零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

    原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend ...

  5. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  6. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  7. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  8. 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  9. 《Linux就该这么学》培训笔记_ch10_使用Apache服务部署静态网站

    <Linux就该这么学>培训笔记_ch10_使用Apache服务部署静态网站 文章最后会post上书本的笔记照片. 文章主要内容: 网站服务程序 配置服务文件参数 SELinux安全子系统 ...

随机推荐

  1. Rainbond结合NeuVector实践容器安全管理

    前言 Rainbond 是一个云原生应用管理平台,使用简单,不需要懂容器.Kubernetes和底层复杂技术,支持管理多个Kubernetes集群,和管理企业应用全生命周期.但是随着云原生时代的一点点 ...

  2. python使用vosk进行中文语音识别

    操作系统:Windows10 Python版本:3.9.2 vosk是一个离线开源语音识别工具,它可以识别16种语言,包括中文. 这里记录下使用vosk进行中文识别的过程,以便后续查阅. vosk地址 ...

  3. 151-模型-Power BI&Power Pivot模型DAX函数使用量分析

    151-模型-Power BI&Power Pivot模型DAX函数使用量分析 1.背景 我们在 Power BI 或者 Power Pivot 项目中会写很多的 DAX 表达式.在最后项目交 ...

  4. 117_PowerQuery使用ODBC访问带密码的Access

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一. 有朋友在问pq访问带密码的access的时候会报错,导致无法访问(如下图): 1.选择更多 图1 2.选择Acces ...

  5. Windows 程序安装与更新方案： Clowd.Squirrel

    我的Notion Clowd.Squirrel Squirrel.Windows 是一组工具和适用于.Net的库,用于管理 Desktop Windows 应用程序的安装和更新. Squirrel.W ...

  6. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  7. C# 四舍五入中一处易错点

    ,你没看错,四舍五入的结果 和我们期待的不太一样 Why?? 进入源码看下,注释中解释的很清楚.. 默认情况下,Math.Round()方法返回的是最接近的整数,这个没问题,问题是当要转换的数据在 两 ...

  8. 优秀开源平台，前后端分离快速开发平台，一站式多端开发（PC+APP）

    JNPF平台架构介绍 JNPF快速开发平台采用前后端分离技术.采用B/S架构开发,形成一站式开发多端(APP+PC)使用. PC端版本介绍 第一个当然是当下热门的.net core了,运行环境为Vis ...

  9. java面试：关于public static void main(String[] args)是什么意思？

    它是作为JAVA中的主函数,所有java程序的运行起点就是这个方法,除了args这个名字可以不一样外,其他必须是这样. 主函数的一般写法如下: public static void main(Stri ...

  10. 以字节跳动内部 Data Catalog 架构升级为例聊业务系统的性能优化

    背景 字节跳动 Data Catalog 产品早期,是基于 LinkedIn Wherehows 进行二次改造,产品早期只支持 Hive 一种数据源.后续为了支持业务发展,做了很多修修补补的工作,系统 ...