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. 印尼医疗龙头企业Halodoc的数据平台转型之路：数据平台V1.0

    1. 摘要 数据是每项技术业务的支柱,作为一个健康医疗技术平台,Halodoc 更是如此,用户可以通过以下方式与 Halodoc 交互: 送药 与医生交谈 实验室测试 医院预约和药物 所有这些交互都会 ...

  2. k8s和Docker关系简单说明

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 这篇文章主要介绍了k8s和Docker关系简单说明,本文利用图文讲解的很透彻,有需要的同学可以 ...

  3. 再见 FTP/SFTP！是时候拥抱下一代文件传输利器了！

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 两台电脑之间该如何传送档案,其实方法有超多种的,像是 FTP 或透过 SSH 方式来传送档案, ...

  4. MySQL 高频面试题，都在这了

    点击上方"开源Linux",选择"设为星标"回复"学习"获取独家整理的学习资料! 前言 本文主要受众为开发人员,所以不涉及到MySQL的服务 ...

  5. js项目案例

    2021.04.12 --mouseover抖动情况之一

  6. Celery-Task参数方法

    @celery.task(bind=True, name='name') def function_name(): pass # task方法参数 name : 可以显式指定任务的名字:默认是模块的命 ...

  7. 【多线程】创建线程方式一：继承Thread类

    创建线程方式一:继承Thread类 代码示例: /** * @Description 继承Thread类,重写run方法,调用start开启线程 * @Author hzx * @Date 2022- ...

  8. 数仓选型必列入考虑的OLAP列式数据库ClickHouse（上）

    概述 定义 ClickHouse官网地址 https://clickhouse.com/ 最新版本22.4.5.9 ClickHouse官网文档地址 https://clickhouse.com/do ...

  9. 【Java面试】如何理解Spring Boot中的Starter？

    一个工作了3年的Java程序员,遇到一个Spring Boot的问题. 他对这个问题有一些了解,但是回答得不是很好,希望参考我的高手回答. 这个问题是:"如何理解Spring Boot中的S ...

  10. Microsoft Office 代码执行漏洞临时防范方法

    一.删除ms-msdt URI 注册表 1．按下键盘上的快捷组合键:win键 和 R键,打开运行(也可以在开始菜单打开运行). 2．在运行窗口中输入命令:regedit,点击确定或敲回车键就可以快速打 ...