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. js--promise、async 和 await 相关知识总结

    前言 promise 是前端开发人员必须掌握的知识点,本文来总结一下相关学习笔记. 正文 1.什么是prommise,promise 解决了什么问题 a.promise 是什么 Promise 是承诺 ...

  2. 【算法】快速排序（Quick Sort）（六）

    快速排序(Quick Sort) 快速排序的基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序. ...

  3. CentOS下安装与配置Maven

    安装Maven 当前系统 [root@141 ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 下载 http://ma ...

  4. 个人冲刺（四）——体温上报app（二阶段）

    冲刺任务:完成用户注册功能和数据库类 RegisterActivity.java package com.example.helloworld; import android.content.Inte ...

  5. 手把手教你使用Git管理你的软件代码

    什么是分布式版本控制系统?Git有哪些常用命令?什么是仓库?Git的操作区域包括哪些?Git有哪些常用对象(object)?git rebase和git merge的区别是什么?git reset,g ...

  6. uni-simple-router

    目录 uni-simple-router 一.快速上手 扩一:webpack插件之DefinePlugin 扩二:uni-read-pages 如何获取pages.json中的路由 二.H5模式 2. ...

  7. React简单教程-4-事件和hook

    前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...

  8. Django 学习记录（AcWing）

    Django 2.1 搭建文件结构 前面的都是配置基本步骤,不需要理解,其他Django项目同样步骤操作: 接下来用Django-admin新建一个Django项目: django-admin sta ...

  9. 开源流程引擎camunda如何扩展

    ​  市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...

  10. SAP 下拉框(选择屏幕)

    一.选择屏幕下拉框. DATA: g_vrmid TYPE vrm_id, "id of value set gt_vlist TYPE vrm_values, "internal ...