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. Java-GUI 编程之 JList、JComboBox实现列表框

    目录 JList.JComboBox实现列表框 简单列表框 不强制存储列表项的ListModel和ComboBoxModel 强制存储列表项的DefaultListModel和DefaultCombo ...

  2. linux网络配置,查看IP地址

    linux等等学习参考博客:https://www.cnblogs.com/pyyu/p/9276851.html 1.在安装好的linux上面输入cd /etc/sysconfig/network- ...

  3. nodejs + typescript + koa + eslint + typescript eslint + prettier + webstorm

    ESLint 安装 yarn add -D eslint 生成配置文件 yarn eslint --init cli 选项 How would you like to use ESLint? To c ...

  4. 好客租房31-事件绑定this指向（bind）

    事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react     import React from 'react'           ...

  5. 134_Power BI Report Server之某消费品运营数据监控

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一背景 最近很久都没有更新文章了,研究了下Power BI Report Server(下文简称pbirs). 今天把pb ...

  6. HTML区块

    1.HTML 可以通过 <div> 和 <span>将元素组合起来. 2.HTML <div> 元素 HTML <div> 元素是块级元素,它可用于组合 ...

  7. 【单片机】CH32V103C8T6 ——窗口看门狗

    本章教程通过串口调试助手打印显示程序运行状态,具体现象如下: 若计数器值在上窗口值和下窗口值0X40之间的时候,进行喂狗操作,计数器重新计数,程序正常运行,串口打印显示:The program run ...

  8. Go中rune类型浅析

    一.字符串简单遍历操作 在很多语言中,字符串都是不可变类型,golang也是. 1.访问字符串字符 如下代码,可以实现访问字符串的单个字符和单个字节 package main import ( &qu ...

  9. WPF|快速添加新手引导功能（支持MVVM）

    阅读导航 前言 案例一 案例二 案例三(本文介绍的方式) 如何使用? 控件如何开发的? 总结 1. 前言 案例一 站长分享过 眾尋 大佬的一篇 WPF 简易新手引导 一文,新手引导的效果挺不错的,如下 ...

  10. java中synchronized关键字基础-1

    1.synchronized关键字简介 synchronized是java中的一个关键字,在中文中为同步,也被称之为'同步锁',以此来达到多线程并发访问时候的并发安全问题,可以用来修饰代码块.非静态方 ...