随笔分类 - HTML+CSS
摘要：其实这种效果网上好多的插件，但是我想自己实现看看，其实把思路理清实现起来就非常简单了，让我们看看： 分析： 从图中我们可以看出：右边的top=100px，那么它应该在第一个框的top+height=150px区域内， 当鼠标滚动到第2个区域时，同理，右边的top，应该在第2个框的top+height
阅读全文
摘要：总结： 1、刚开始我是使用ur-li这种来做，但是点击其中一个，其它的都展开了，然后又替换成div-div但是这种也有相同情况，于是我只好分开来做用div div同级来做，这样就没问题了，我在想这个问题可能跟子绝对定位有关系！！！
阅读全文
摘要：总结： 1、jquery使用offset()比position()更精确
阅读全文
摘要：border: 8px solid rgba(255,255,255,0.2);
阅读全文
摘要：公司最近在做一个视频直播的功能，里面有个页面样式是需要点击收起侧边栏的，整体效果如图： 那么如何制作呢，参考了网上的代码，我发现很简单，下面就是我制作的代码： 总结： 1、是通过css动画效果来制作的，再通过js切换css里面的class来动态监听点击时的效果 2、重点是class中的cbp-spm
阅读全文
摘要：font-size: 13px; line-height: 1.6; text-align: justify; text-indent: 2em;
阅读全文
摘要：background-image: url(/resources/img/liveSupport/tx_1.svg); background-size: 16px 16px; width: 16px; height: 16px;
阅读全文
摘要：网上有个视频插件，但是我觉得不太好用，就自己写了一个，不过各位可以参考参考，地址 制作步骤 ： 1、页面加个遮罩层，默认是隐藏的 2、设置视频区域position，当然你也可以设置成:fixed，看你自己的需求了 3、然后你有一个按钮，就是专门切换关灯和开灯的，方法如： 4、显示效果： 总结： z-
阅读全文
摘要：有时候css中设置了position:absolute，left:100px，但是如果我们不想要这个left怎么办呢，当然你直接删除就可以，但是如果是框架的css，你直接删除就有问题了，这时候该怎么办呢？解决办法很简单，你只要再定义一个class然后设置 left:auto就可以，是不是很简单，你现
阅读全文
摘要：1、多列多行式 这种样式最好通过百分比来制作，因为不同手机浏览宽度是不一样的 像这种，中间图片的制作，html: css:
阅读全文
摘要：我是通过flex的水平垂直居中噢！ html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-content: center;/*水平居中*/ width:100%; height:100%; backgro...
阅读全文
摘要：一开始都是行内元素，但是左边按钮和右边标题就是对不齐，于是，设置左边按钮float:left就可以了。
阅读全文
摘要：注意点：1、opacity设置后其子节点所有节点都是透明的 2、如果不想点击遮住的模态框，可以设置一个透明的遮罩层，就是上面的css .mymodal 3、自己对比下与bootstrap的区别吧 总结三点：1、父节点透明，2、弹出框在body下、3、加个透明层防止点击遮罩的div
阅读全文
摘要：参考文章：1、利用公共api提取任意网站favicon.ico图标如何读取favicon根据设置favicon的方式，就有2种读取favicon的方法：A、默认直接读取网站根目录的favicon.ico文件。B、如果不存在根目录下的favicon.ico文件，就读取页面里favicon的声明。相比之...
阅读全文
摘要：-webkit-filter:blur(3px); -moz-filter:blur(3px); filter:url(blur.svg#blur); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); filter:blu...
阅读全文
摘要：Demo地址：www.awbeci.xyz websocket有java、nodejs、python，Php等等版本，我使用的是C#版本，服务器端是Fleck，github地址：https://github.com/statianzo/Fleck 这篇博客就是引用上面的一个例子教你如何使用客户端和服
阅读全文
摘要：$(".icon-a").on('click', function (e) { if ($(this).next().css('display') == "none") { $(this).children().removeClass('datagrid-ro...
阅读全文
