刚刚用 Typora 写上了笔记,就碰到了个小问题。使用 Typora 插入图片,图片一直是居中的,有时候插入小图片,居中感觉有点难看。网上看了看,找到了解决办法。国内网站上大部分给出的都是同一个答案,使用 HTML 标签。
DIV+JS+CSS 实现点击按钮弹出图片效果
刚刚写了一篇关于 如何替换 WOOCOMMERCE 的 “加入购物车” 按钮 的文章。将加入购物车按钮的功能替换成一个可以点击后弹出我微信号图片的效果。那么今天 Forece 就来讲讲如何实现这个效果的。
CSS5 鼠标移动到图片上 Hover 放大效果
这个应该是很早的技术了,鼠标移动到图片上,利用CSS5新特性,然后让图片呈现平滑 Zoom 放大的动态效果。只是 Forece 在整理草稿的时候发现的一篇忘记发布的文章。
9种CSS样式自动生成在线工具
CSS5 实在是太强大了,很多以前必须用图片实现的效果,基本上都是可以用 CSS5 完美解决的,这样不仅可以优化页面加载速度,而且效果也十分的漂亮。今天 Forece 和大家分享几个在线 CSS 生成工具,用户只要动动鼠标,可以自动生成相应的样式。
使用CSS3线性渐变实现图片闪光划过效果
以前图片闪光划过都是用 Fireworks 做出GIF动态图片挂在网页上,没想到现在CSS已经强大到直接用代码显示了。在网上看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下。
CSS3实现鼠标移动上去链接文字/背景/边框颜色渐变
最近在重新学HTML和CSS,以前都是凭借自己多年的经验自行摸索,从来都没有系统的学习过一遍。这次看了PHP兄弟连做的细说PHP视频。查缺补漏,以前半瓶子逛荡的状态已一去不复返。不过兄弟连的PHP教学,只讲了CSS2和HTML4,对最新的CSS3和HTML5没有涉猎。在一次扒皮实践当中,看到豌豆荚的底部footer不错。本想拔下来,突然发现他底部的链接文字是渐变的。非常好看。于是想尽办法想给他整了出来。
用 ul, li 标签和CSS做出表格样式
ul、li 标签是HTML中常见的标签,比如导航栏,菜单栏其实都是用这两个标签实现的。而古老的tr、td标签已经不再适用了。就拿自己的友情链接来说,其实也是利用ul、li来实现分列显示的。原来 Forece 一直都是拿code直接过来用的,从来没有细研究到底CSS中是怎么实现表格样式的。今天剖析一下怎么利用ul、li标签做出两列样式。
CSS中的自适应宽度与固定宽度
这两天改一个模板,模板是自适应宽度,不过因为某种需求,需要把自适应宽度改成固定宽度。而这些都是在CSS中实现的,看了看CSS代码,查了查资料。其实看起来复杂,实现还是蛮简单的。其实就是一个用的比例,另外一个用的固定数值。
WordPress 用CSS强制长代码换行与不换行
之前 Forece 写过一篇 “如何让 WordPress CodeColorer 长代码自动换行” ,不过对于某些长代码还是不管用,比如迅雷链接、ED2K电驴链接、磁力链等等这些长代码还是会突出屏幕宽度。今天 Forece 在网上搜索了一下。把长代码自动换行用CSS完善了一下。先看下下边的几个例子吧。
如何将 Discuz 论坛背景固定
很多人不想让自己的背景随着页面滚动而滚动。就想让背景图片固定在后边,其实 CSS 就可以搞定了,不过 Discuz 这个论坛程序比较 Tricky, Forece 找了半天也没找到 CSS 在哪里修改,后来终于找到了,原来是在后台中修改背景属性。
登陆后台管理中心 - 界面 - 风格管理 - 编辑所需模板 - 页面背景
将里边的 CSS 属性改为
1 | no-repeat center top fixed |
里边还有其他各种属性可以修改,而且这些CSS根本不用实体文件。所以你永远不会在某个CSS文件中看到。以后要改背景神马的,还是来后台吧。