网页分享按钮

前段时间想将自己的博客弄个可以分享的地方,可是采用百度分享的代码,不知道怎么弄的一直不能运行,于是自己就写了一个。 首先先展示一下效果图:   图中的分享按钮是一直悬浮在网页的右中的位置,方便选择。从图中可以看出,有几个常用的平台分享,当然自己也可以修改代码,做成自己需要的样子。 这是css代码: 这里是html代码,放在body里面: 当然最重要的还是js代码了: 代码全都给大家,我想做网站的大概都简单的知道这些代码该放在哪里的,因此我也就不在这里赘述了。如果有不会的可以在下方留言,我会回复的。 ~谢谢打赏~ 赏 声明:版权所有,盗版必究  执念博客 转载:转载 […]

CSS——display:none与visibility:hidden的区别

1.display:none与visibility:hidden的区别   display:none隐藏对应的元素并且其他元素会挤占该元素原来的空间,即不为被隐藏的对象保留其物理空间,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;   visibility:hidden隐藏对应的元素但其他元素不会挤占该元素原来的空间,即为被隐藏的对象保留其物理空间,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。   记住这两点之后也就不难区分这两者了,如果可以理解为“ […]

模拟书本翻页的相册

相册 看到别人绚丽的相册,想不想自己拥有一个,下面跟着我创建一个属于自己的相册吧。 浏览 1.利用div将相册所需要的图片装起来 2.接下来就需要通过css来对div进行调整,使得相册更加漂亮 (1).第一步将所有图片都定位到一起,即所有的图片叠在一起,效果如图所示 (2).接下来就需要让每一张图片都动起来,也就是最重要的步骤。css如何实现动画自然而然想到了animation; 不过我们的相册需要的是3D效果,因此需要将装图片的div及父级div都需要设置transform-style: preserve-3d;(需要做浏览器兼容),这样设置后就可以达到3D效果。 翻页时都是绕着书的左边旋转 […]

css书写规范,顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) css-written-order CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又 […]