自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(9)
  • 收藏
  • 关注

原创 怎么做一个自适应的正方形

现在的网页,因为终端产品种类繁多,所以网页自适应已经成了基本要求。排版的时候,怎么做到自适应的正方形呢。最初的方法,或是直接写宽度=高度,但是不会随着屏幕自动改变大小。width:100px;height:100px;background:pink;第二种方法可以用到vw这个单位,表示屏幕宽度,或者vh,表示屏幕高度,数值范围从1—100,表示1%—100%;width:10vw;...

2019-08-23 09:27:39 513

原创 给标签设定固定字符长度,超出部分用省略号显示。

网页中文字显示时,有时候往往只需要显示前面部分内容,通常情况下给标签加样式即可解决。下面总结几种情况:第一种情况:单行显示,超出内容部分省略号显示。标签的样式如下:div{ width:100%; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}第二种情况:多行显示,最后一行的...

2019-08-22 20:43:01 1503

原创 移动端实现图标拖拽效果

做一个像苹果手机桌面的HOME键一样的图标,实现图标按钮在页面上可拖拽效果。js代码如下:window.onload = function () { var oDiv = document.getElementById('moveIcon'); var disX, moveX, L, T, starX, starY, starXEnd, starYEnd; oDiv....

2019-06-05 17:09:50 2014

原创 js 判断 li 的个数,多于指定个数的 li 收起到另一个列表中

<!DOCTYPE html><html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { if ($('.list li').size() > 4) {...

2019-05-06 16:59:44 827

原创 点击下拉菜单以外区域,下拉菜单收起

网页中下拉菜单随处可见,一般用到toggle()或slideToggle()事件;但下拉菜单出来后,一般要再次点击原来的按钮才能收起,所以做到下拉菜单以外点击收起,体验就会方便很多。 <script type="text/javascript"> $(document).ready(function() { $(".btn").click(function(e) {...

2019-04-26 16:20:06 4007

原创 去掉input中的缓存值

input默认的输入框会保留上一次的缓存值,但有时候我们不想看到缓存值,可以给input加一个自动记忆缓存值的属性,并设置为关闭状态,这样输入框就不会有缓存值了!这个属性就是autocomplete<input name="title" minlength="2" type="text" autocomplete="off">或者可以将input外面的form标签设置为off&...

2019-04-18 15:01:01 2655 1

原创 关于flex布局中子元素宽度失效的问题

在弹性布局中,用上flex后发现会上瘾,因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度,右边设置自适应占满剩余空间,但有时候会发现左边固定元素的宽度竟然失效了,被右边的元素挤占空间了,所以仔细查看flex属性的特点后,发现少设置了一些属性样式。父元素设置完 display:flex 属性后;子元素设置固定宽度:width:50px;height:50;这里加上另外一...

2019-04-04 15:09:04 10399 2

原创 点击按钮显示和隐藏标签

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=" utf-8"&gt;&lt;meta name="author" content="http://www.softwhy.com/" /&gt;&lt;link type="text/javascript"

2019-03-11 17:38:13 2112

转载 去掉textarea默认样式

取消chrome下input和textarea的聚焦边框:input,button,select,textarea{outline:none}取消chrome下textarea可拖动放大:textarea{resize:none}重置input,button,select和textarea的默认样式:input,button,select,textarea{outline:none}...

2019-02-28 15:40:30 7621

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除