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. Git 使用心得 & 常见问题整理

    开源Linux 回复"读书",挑选书籍资料~ Git 流程图 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remot ...

  2. 【爬虫+情感判定+Top10高频词+词云图】“谷爱凌”热门弹幕python舆情分析

    一.背景介绍 最近几天,谷爱凌在冬奥会赛场上夺得一枚宝贵的金牌,为中国队贡献了自己的荣誉! 针对此热门事件,我用Python的爬虫和情感分析技术,针对小破站的弹幕数据,分析了众网友弹幕的舆论导向,下面 ...

  3. 896.Montonic Array - LeetCode

    Question 896. Monotonic Array Solution 题目大意: 类似于数学中的减函数,增函数和物理中的加速度为正或为负 思路: 先比较前两个是大于0还是小于0,如果等于0就比 ...

  4. sublime速查手册

    零.sublime的优势 容易上手 支持多点编辑 包管理:Package Control 速度快 深度可订制,配置文件放github上 sublime-config 快速文件切换 cmd + p 输入 ...

  5. 112_Power Pivot 销售订单按 sku 订单类型特殊分类及占比相关

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 经过了一个双十一后,天天面对的都是订单.于是有了关于销售订单按sku类型分类的需求. 说明:(暂且不讨论这样分类 ...

  6. Python实现将excel文件转化为html文件

    需要转化的excel文件(nsrxx.xlsx): 源代码: import pandas as pdimport codecspd.set_option('display.width', 1000)p ...

  7. node包的降版本

    1.安装版本更高的node包直接到官网去安装. 2.从版本高的node包,降低到版本低的node包. 要先卸载现在的node包,在菜单栏中可以删除. 然后通过https://nodejs.org/zh ...

  8. 关于Redis的问题探讨(二)：Range方法返回的对象是LinkeHashMap以及转换办法

    上一篇:关于Redis的问题探讨(一):为何存放集合偏向于转String后存放而非直接存 在上篇中发现了一个问题,明明存的是一个对象的集合,为什么通过range方法返回的却是LinkeHashMap ...

  9. 产品揭秘】来也Lead 2022产品亮点解读-RPA学习天地

    2022年4月26日,来也举行新品发布会.作为技术人员,花里胡哨的我且不说,我且说技术相关.整体架构"概念"整个平台覆盖了智能自动化的全生命周期包含:业务理解.流程创建.随处运行. ...

  10. linux 查询文件命令

    jps; 当前服务器中所有的java进程: jps |grep XXX; 查询当前服务器某个进程: locate xxx;查询某个文件的位置: