大前端-html/css
文章平均质量分 97
天空影
此生多磨难,此身越重洋
展开
-
input只读模式下IE表现
问题1:input输入框如果设置readonly点击输入框照样有光标解决:加上unselectable='on'<input type="text" name="transtype" unselectable='on' class="transtype" readonly>问题2:修改只读输入框的样式input:read-only{}不生效解决:用input[readonly...原创 2019-11-01 15:17:35 · 517 阅读 · 0 评论 -
border画三角形和对话气泡
嗯,因为最近碰到了利用了三角形做一些小图标的需求(以前都是直接用ui给的图标,但是说不利于资源优化),soso,然后就网上查了一下资料,然后自己整理了一波。首先是画三角形htmldiv class="triangle_1">div>div class="triangle_2">div>div class="triangle_3">div>div class="原创 2018-01-05 11:28:29 · 734 阅读 · 0 评论 -
css3之线性渐变
渐变图像线性渐变linear-gradient() 第一个参数: 可不写, 默认值为to bottom (即180%), 用来指定渐变的方向, 可是是具体的角度值, 也可以直接指定方位to left/ to right/ to top/ to bottom。为实现渐变, 还需要至少定义两个颜色结点, 每个颜色节点可由两个参数组成, [颜色值 位置值, 颜色值 位置值, …], 其中颜色值为原创 2018-01-06 12:23:58 · 3681 阅读 · 0 评论 -
一步一步带你认识animation动画效果
转载地址:[前端Talkking]-一步一步带你认识animation动画效果作者:缄默yo0、写在前面在CSS系列——一步一步带你认识transition过渡效果这篇文章中,我给大家详细讲解了transition过渡的用法,能够实现比较友好的过渡效果,但是功能比较有限,如果要想实现比较漂亮的动画效果,就需要我们今天要请出主角animation登场了。首先,我们来看看ani转载 2018-01-08 13:10:50 · 972 阅读 · 0 评论 -
掘金头像旋转
偶然之间发现掘金个人中心的头像移上去的时候会旋转,并且旋转速度越来越来越快,然后我一开始不知道怎么做,在看了css3的时候才发现也不是很难嘛所以就试了一个掘金原效果: 好像会出问题,所以后面效果图就不放了,大家可以替换图片看一下<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2018-03-21 17:06:48 · 848 阅读 · 0 评论 -
css3单边阴影
我们写css的时候经常会用到box-shadow这个属性,这个属性是盒子阴影,但是因为阴影扩散的原因,经常是四周都出现阴影,然后我们如果要只有一边有阴影的效果应该怎么做呢? 其实是解铃还须系铃人,我们需要对box-shadow其中的阴影半径做调整:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径htm...原创 2018-04-03 15:36:39 · 11895 阅读 · 0 评论 -
display:inline-block造成的间距
如果是上下部分有间距:设置父元素line-height:0如果是左右部分有间距:设置父元素font-size:0;并且记得设置设置父元素下的所有子元素的font-size,要不然就看不到字了...原创 2018-04-03 16:14:22 · 715 阅读 · 0 评论 -
form表单焦点在输入按enter自动刷新页面
案发现场就是这个搜索框,我鼠标键入输入框的时候然后按鼠标上的enter键竟然会自动提交表单并刷新页面!事故分析1、一开始我以为是后面那个button按钮的锅,因为我用的type="submit",然后我就把这个按钮改成type="button",但是,这并没有什么卵用,所有我觉得问题不是出在这。 2、后面我就网上百度查原因,然后让我找到了另一种可能:当表单中只有一个input输入...原创 2018-04-24 09:30:59 · 543 阅读 · 0 评论 -
form表单绑定点击事件
主要原因是这样的:我只想用form做查询,但是我并不想通过表单来提交数据,而是通过一个函数来提交,然后这就涉及到了我原先不懂的地方,就是提交按钮用submit还是button。原先一直没搞懂,一直都是点击后查询,也就是不用enter键,然后今天回过头又发现了这个不良好交互,自己试验了一下自己的猜想,结果发现原先自己可真的是太天真了,直接可以type="submit"然后再绑定点击事件,就会在输入框...原创 2018-04-24 15:09:47 · 8504 阅读 · 0 评论 -
文字过长显示省略号
.class{ width:300px; overflow:hidden; text-overflow:ellipsis;}原创 2018-07-31 13:55:32 · 273 阅读 · 0 评论 -
input file上传类型控制
项目需求有时候会要求对上传文件的类型进行控制,防止瞎鸡儿上传文件&lt;input type="file" name="" id="" accept="image/*" &gt;type=file 代表上传文件 accept='' 代表上传文件限制,这里image/*代表全部图片类型 文件类型 accep原创 2018-08-03 11:07:53 · 4155 阅读 · 2 评论 -
左侧内容随右侧内容高度自适应高度
&amp;lt;style&amp;gt; * { margin: 0; padding: 0; } html,body { height: 100%; } .container { width: 960px; ...原创 2018-08-16 14:48:09 · 1791 阅读 · 0 评论 -
修改默认滚动条样式
修改全局默认滚动条/*滚动条凹槽的颜色,还可以设置边框属性 */::-webkit-scrollbar-track-piece {background-color:#f8f8f8;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}/*滚动条的宽度*/::-webkit-scrollbar ...原创 2018-11-29 10:09:21 · 4184 阅读 · 0 评论 -
获取data-*属性值
获取data-*属性值c原创 2017-12-29 14:45:41 · 50696 阅读 · 7 评论 -
border属性的多方位应用和实现自适应三角形
border属性的多方位应用和实现自适应三角形转载 2017-12-27 21:05:44 · 860 阅读 · 0 评论 -
背景做导航分割线
背景做导航分割线原创 2017-09-26 20:34:01 · 445 阅读 · 2 评论 -
文字两端对齐
文字两端对齐原创 2017-09-26 20:48:47 · 315 阅读 · 0 评论 -
绝对定位下的垂直居中
绝对定位下的垂直居中原创 2017-09-26 21:02:24 · 435 阅读 · 0 评论 -
实用的60个CSS代码片段
css技巧 实用性转载 2017-10-03 12:31:13 · 969 阅读 · 0 评论 -
英文无空格换行
英文无空格换行原创 2017-10-03 22:24:44 · 490 阅读 · 0 评论 -
网页发起临时QQ会话
网页发起临时QQ会话原创 2017-10-30 14:22:22 · 1375 阅读 · 0 评论 -
图片变黑白
图片变黑白原创 2017-10-30 14:31:03 · 638 阅读 · 0 评论 -
HTML的五种空格表示
HTML的五种空格表示原创 2017-09-20 21:44:09 · 3530 阅读 · 0 评论 -
chrome密码自动填写表单底色变黄
chrome密码自动填写表单底色变黄原创 2017-12-08 17:47:13 · 271 阅读 · 0 评论 -
html指定360浏览器用何种内核渲染
html指定360浏览器用何种内核渲染原创 2017-12-11 11:07:46 · 2036 阅读 · 0 评论 -
nth-child选择(小研究)
nth-child用法 小研究原创 2017-12-13 23:13:15 · 1876 阅读 · 0 评论 -
主体高度不定,footer在最下面
需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端这里提供三种解决方法,有两种的思路是一样的,结构也是一样的第一种html<div class="wrap"> <div class="main"> </div></div><div class="footer原创 2017-12-21 19:13:20 · 845 阅读 · 0 评论 -
animation初体验
animation简单研究原创 2017-12-14 11:52:00 · 30717 阅读 · 0 评论 -
控制文章行数
控制文章行数原创 2017-09-20 21:47:12 · 333 阅读 · 0 评论