line-height
对于16px字体，行高21px 细体16px字体，行高20-21px 细体16px符号，行高20-22px 来源： https://www.cnblogs.com/webkb/p/12008092.html
line-height
vue中模拟四格验证码输入
vue中模拟四格验证码输入 １．Template 代码 ２．JS代码 ３．css代码 新的甘特图功能，丰富你的文章 １．Template 代码 < template > < div class = " send_otp " > < h3 class = " cancel_otp_title " > Cancel Trip </ h3 > < p class = " cancel_otp_des " > Confirm code has been sent to {{contactPhone | keepSecrect}} </ p > < p class = " cancel_otp_des " > Please enter the confirm code to continue. </ p > < div class = " cancel_otp_code_box " > < div class = " otpInputs " > < input v-enterfocus ref = " otpInputs " type = " number " v-model = " code " @keydown.delete = " changeCode " > < span class = " code_list " > {{code1}} </ span > < span class
PC版通用布局页面
footer可以根据浏览器视口高度自适应显示位置，当页面垂直方向可以滚动时，footer显示在文档最底部，当不可滚动时，footer显示在浏览器视口最底部 <div class="root"> <div class="place"></div> <div class="content"> <div class="header">header</div> <div class="main">main</div> </div> <div class="footer">footer</div> </div> html, body, .root, .place { height: 100%; } body { margin: 0; font-size: 0; line-height: 1; } .place, .content { display: inline-block; vertical-align: top; box-sizing: border-box; padding-bottom: 100px; } .content { width: 100%; } .header { font-size: 26px; text-align: center; line-height: 100px; background: blue; } .main { font-size: 26px;
移动端浏览器之兼容性问题总结
前言:这里收集一些业内见到的移动端浏览器的兼容性问题. 如果大家也也到过, 欢迎补充. 1 虚拟键盘引起的兼容问题。 2 touch 事件引起的问题. 3 iOS 和 android 系统导致的差别。比如，微信内置浏览器 4 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 解决方案: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> （部分 安卓 手机的UC浏览器写完以后还是可以放大缩小） 5 忽略将页面中的数字识别为电话号码 解决方案: <meta name="format-detection" content="telephone=no" />（ iOS 上会明显 有时候会把数字当成电话号码） 6 忽略Android平台中对邮箱地址的识别 解决方案: <meta name="format-detection" content="email=no" /> 7 移动端浏览器部分兼容问题 解决方案: viewport模板: <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0
pip安装任何包都出现问题
<!DOCTYPE html> */ /*--> */ PS：以下操作全部基于win10 64位操作系统 pip安装任何包都出现问题： Cannot unpack file /tmp/pip-KzJgHD-unpack/simple 报错： Cannot unpack file /tmp/pip-KzJgHD-unpack/simple (downloaded from /tmp/pip-M1hKq2-build, content-type: text/html; charset=utf-8); cannot detect archive format Cannot determine archive format of /tmp/pip-M1hKq2-build 解决： 需要添加 --extra-index-url 如： pip install --extra-index-url http://mirrors.aliyun.com/pypi/simple/ config --extra-index-url <url> Extra URLs of package indexes to use in addition to --index-url. Should follow the same rules as --index-url 安装模块失败，错误如下 error:
博客园主题美化
主题作者的博客：https://www.cnblogs.com/Dy1an/，感谢作者！ 本博客就是使用当前主题，具体效果如下： 页面定制 CSS 代码 * { margin: 0; padding: 0 } a { text-decoration: none; color: #1c2b36 } body { background-color: #fff; font-size: 13px; letter-spacing: 1px } #header { background-image: url(https://img2018.cnblogs.com/blog/979767/201911/979767-20191115092708101-1793403956.jpg); background-size: cover; min-height: 600px; } #header::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .8; background: #1C1D21; height: 600px; } #header a, h1, img { z-index: 1; color: white; position: relative; } #header
理解css中的长度单位
很基础的一个问题，但是，其实看起来很复杂的样子～～我们来捋一捋吧～～ css3中也对css中用到的单位进行了改进，单位也就是那几个，所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米 mm——毫米 pt——point，大约1/72寸； pc——pica，大约6pt，1/6寸； px——屏幕的一个像素点； em——元素的font-size； ex——font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半。 我们常用的有px、%、em，px就不多说了，em和%多说点儿： 1 2 3 .box { line-height : 1.3em ; } 元素的行高是当前元素继承的font-size的1.3倍， 1 2 3 .box { font-size : 1.3em ; } 当前元素的字体大小是其继承的font-size的1.3倍。 1 2 3 .box { line-height : 130% ; } 元素的行高是当前元素继承的font-size的130%倍，等同于1.3em。 1 2 3 .box { font-size : 130% ; } 当前元素的字体大小是其继承的font-size的130%倍，等同于1.3em。 恩，迷惑了吗？ em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。 而%对于font
项目一总结 滚动监听
重点css3的动画效果 (时间及偏移位置)设置 和滚动监听位置的选择 HTML <!-- section1 --> <div class="section1"> <ul class=""> <li class="tt t1"><span class="cent1">骁龙855旗舰处理器</span><span class="cent2">年度超旗舰处理器</span></li> <li class="tt t2 "><span class="cent1">索尼 4800 万像素三摄</span><span class="cent2">DxOMark拍照评分领先</span></li> <li class="tt t3 "><span class="cent1">支持超广角、微距拍摄</span><span class="cent2">开启手机摄影非凡视野</span></li> <li class="tt t4"><span class="cent1">小米首款20W无线闪充</span><span class="cent2">速度堪比有线快充</span></li> <li class="tt t5"><span class="cent1">全息幻彩玻璃机身</span><span class="cent2">手心中的梦幻彩虹光</span></li> <li class="tt
Element_InputNumber组件
一、InputNumber简介 1、仅允许输入标准的数字值，可定义范围 二、InputNumber使用 <el-input-number :controls="true" type="number" v-model="inputNumber" :min="1" :max="10" controls-position="right" class="inputNumberContent"></el-input-number> 三、更改样式 提示：可在组件中，用css更改其默认样式。（注意：1、inputNumber要设置其class，避免影响到其他组件中的inputNumber；2、不要设置scoped,因为设置了scoped则样式仅仅应用到 style 元素的父元素及其子元素,导致该样式优先级低于组件的默认样式优先级，使设置样式失效） 1、实现代码 #app { background: #002140; width:100%; height: 1000px; padding: 300px; .inputNumberContent { width: 168px; line-height: 28px; .el-input-number__decrease, .el-input-number__increase { height: 14px !important; line-height:
使用css实现点击切换效果
使用css制作简单的点击切换效果，参考了以下教程： css实现的轮播和点击切换(无js版) 首先先制作一个容器，用来容纳所显示的内容： HTML代码： <html></html> <head> <meta charset="utf-8"> <link href="css/test.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="contain"> <ul> <li></li> <li></li> <li>/li> </ul> </div> </body> </html> CSS代码： .contain{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; } 接下来，根据需要设置ul的长度，这里先制作三个切换窗口，因此将ul的宽度设置为容器宽度的300%，li即为每次切换时显示的子元素，宽度设置为显示容器的100%； HTML代码： <div class="contain"> <ul> <li class="sildeInput-1">one-点击切换</li> <li class=