line-height | 易学教程

jQuery导航栏，点击切换颜色

阅读更多关于 jQuery导航栏，点击切换颜色

1.写好静态页面 <div class="navBox"> <div class="comWidth"> <ul class="nav"> <li class="active"><a href="javascript:void(0)">网站首页</a><span></span></li> <li><a href="javascript:void(0)">公司简介</a><span></span></li> <li><a href="javascript:void(0)" >产品优势</a><span></span></li> <li><a href="javascript:void(0)" >公司新闻</a><span></span></li> <li><a href="javascript:void(0)" >在线订单</a><span></span></li> <li><a href="javascript:void(0)">客户留言</a><span></span></li> <li><a href="javascript:void(0)">联系我们</a></li> </ul> </div> </div> css样式 /*导航*/ .navBox{ height: 48px; width: 100%; background-color: #319BF3; } .navBox

微信小程序出现 text 设置行高 line-height 无效的问题

阅读更多关于微信小程序出现 text 设置行高 line-height 无效的问题

前言：我在写程序过程中遇到过给text加line-height不生效的问题，但是也有生效的情况，如果不生效了就按下面的解决方法处理吧。解决办法：在text的外层嵌套一层view,然后给view设置样式line-height即可。来源： https://www.cnblogs.com/zmdComeOn/p/11921522.html

react中登录注册使用验证码验证

阅读更多关于 react中登录注册使用验证码验证

后端接口 var express = require('express'); var router = express.Router(); var User = require('./../sql/collection/users'); var sql = require('./../sql'); var utils = require('./../utils') var uuid = require('node-uuid'); var bcrypt = require('bcryptjs'); var jwt = require('jsonwebtoken'); var salt = bcrypt.genSaltSync(10); // 加密级别 var code = require('./../utils/code'); // 快速登陆 router.post('/quicklogin', (req, res, next) => { let { tel } = req.body; sql.find(User, { tel }, { _id: 0 }).then(data => { if (data.length === 0) { res.send({ code: '10086', msg: '该用户未注册' }) } else { let userid = data[0]

Input-number 数字输入框组件

阅读更多关于 Input-number 数字输入框组件

需求加、减按钮初始值最大、最小值数值改变时，触发一个自定义事件来通知父组件目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例实现关键 Vue组件是单向数据流，无法从组件内部直接修改prop的值，解决办法就是给组件生命一个data，默认引用prop值，然后在组件内部维护这个data Vue.component('input-number', { data: function () { return { currentValue: this.value // value来自props里的属性 } }}); 上述解决了初始化引用父组件value的问题，但如果父组件更新了value，input-number组件中的currentValue也需要一起更新为了实现同步更新的功能，我们需要使用 watch 监听功能(watch选项可以用来监听某个prop或data的改变，并在它们发送改变时，触发watch配置的函数) 在这里我们要监听两个数据，value和currentView；监听value是为了得知父组件修改了value，监听currentValue是为了当currentValue改变时，更新value input中绑定currentValue值，当用户输入结束时使用change事件来更新currentValue

css字体样式

阅读更多关于 css字体样式

css字体样式 font-size ：字体大小 font-size属性用于设置字号，该属性的值可以使用相对单位长度，也可以使用绝对单位长度。相对长度单位说明 em 相对当前对象内文本的字体尺寸 px 像素最常用推荐使用绝对长度单位说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有的段落文本的字体变黑，可以使用css样式代码： p {font-family: "微软雅黑";} 1.现在网页中普遍使用14px+。 2.尽量使用偶数字号的字体.ie6等老数浏览器支持奇数号字体有bug 3.各种字体之间必须使用英文状态下的逗号隔开。 4.中文字体需要加英文状态下的符号，英文字体一般不需要加引号。当需要设置引英文字体时，英文字体名必须位于中英文字体名之间。 5.如果字体名中包含空格、#、$等符号时，则该字体必须加英文状态下的单引号或双引号，如`font-family："times new roman"` 6.尽量使用系统默认字体，保证在任何用户浏览器中都能正确显示 unicode字体浏览器兼容性好，去编码表中查看对用字体 font-weight：粗细 bold：加粗 normal：正常 bolder：特粗体 lighter：细体 400

如何给HTML页面设置行高

阅读更多关于如何给HTML页面设置行高

设置行高由于简单还是老样子直接上代码了哦，注意： line-height 属性值可以使用固定值如：20px..和百分比如：20%。如果想让文字垂直居中如下：行高的主要作用是用来设置文本的垂直方向居中对齐行高的值与高度的值一样即可。让我们进入 line-height 属性实践，实践内容如：将 p 标签行高设置为20px。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>设置字符和单词距离</title> <style> p{ line-height: 20px; } </style> </head> <body> <p>成功不是打败别人，而是改变自己。</p> <p>成功不是打败别人，而是改变自己。</p> <p>成功不是打败别人，而是改变自己。</p> </body> </html> 结果图注意：使用百分比如下简陋的代码块。 <style> p{ line-height: 20%; } </style> 来源： https:/

CSS实现响应式布局

阅读更多关于 CSS实现响应式布局

用CSS实现响应式布局响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询，下面就介绍一下怎么运用：使用@media 的三种方法 1.直接在CSS文件中使用： @media 类型 and (条件1) and (条件二){ css样式 } @media screen and (max-width:1024px) { body{ background-color: red; } } 2.使用@import导入 @import url("css/moxie.css") all and (max-width:980px); 3.也是最常用的方法--直接使用link连接，media属性用于设置查询方法 <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/> 下面是一个简单的响应式的布局HTMl代码： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>响应式</title> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type

如何让div中的内容垂直居中

阅读更多关于如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：一、行高（ line-height ）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。二、内边距（ padding ）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:30px; } 这段代码的效果和line-height法差不多。三、模拟表格法模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。先看下面的Html代码： <div id="box"> <div id="content">居中显示</div> </div> 参照以上Html代码，让最外面名为box的Div呈表格样式显示

Vue学习笔记-使用ElementUI

阅读更多关于 Vue学习笔记-使用ElementUI

ElementUI官方地址：https://element.eleme.cn/2.11/#/zh-CN 1.初期准备　　首先我们准备几个基本的样式文件：normalize.css 和 base.css 　　normalize.css：一个CSS RESET(样式重置)的文件，下载地址：https://necolas.github.io/normalize.css/，具体可以搜索 "reset.css和normalize.css" 　　base.css：根据项目或个人需求定义的一些基本样式，这里我们只简单定义一下 *{ outline: none; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } textarea { resize: none !important; } input[type="text"]:disabled { background: 0 0!important; color: #c2c2c2; cursor: not-allowed; user-select: none; } .hidden { display: none; } .unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user

博客入门--自定义博客主题

阅读更多关于博客入门--自定义博客主题

　　对于以往博客网站已提出较多主题供用户使用，但对于海量用户而言其主题难免过于单一。　　为突出博客主题个性化显示，目前已有第三方开源库（https://github.com/BNDong/Cnblogs-Theme-SimpleMemory）供大家使用。本文以博客园为例，实现自定义主题设置。进入博客园设置页面下载第三方库。本文重要使用资源包中的.\src\style\base.min.css的样式资源（https://github.com/BNDong/Cnblogs-Theme-SimpleMemory）。其中包含详细的说明文档，供大家参考（ https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/Customization/config ）。设置博客皮肤为SimpleMemory。　　页面定制css代码，并禁用模板默认css样式。　　 #EntryTag{margin-top:20px;font-size:9pt;color:gray}.topicListFooter{text-align:right;margin-right:10px;margin-top:10px}#divRefreshComments{text-align:right;margin-right:10px

订阅 line-height