uu0216的博客

head元素内的内容不会直接显示在网页上，但会影响网页的渲染和功能。为了提高页面加载速度，通常建议将CSS样式表放在使用meta标签可以优化搜索引擎对网页的索引和理解。

自己做站长，为了节省银子，难免要用到图床。有的图床可以直接给你URL，这当然是最好的情况：而有的图床，却禁用了鼠标右键，甚至复制一张图片地址的机会都不给（偏偏它其他的功能还挺好，你又舍不得放弃它），它给的：这时候就比较烦了。所以，我自己写了一段js来把自己解放出来。

使用这个函数，只需传入你想要复制内容的div的ID即可。

行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式；链接式：使用 link 标签引入外部 CSS 样式表文件。导入式：使用 @import 命令导入外部 CSS 样式表文件。

不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。“覆盖”浏览器的CSS默认属性。那时候，能做的，就是一遍遍的摸索，一遍遍的尝试。你有没有过写了半天样式，却发现总有些与你想要的效果不同的地方：input带个黑框框，list 的小圈圈，锚点的文字颜色，莫名其妙多出来的一两个像素的距离。言归正传，浏览器默认样式，就是为了解决上述那些乱七八糟莫名奇妙的问题，让你的网页，真正成为你自己能主宰的自留地。

文字渐变动画，可以实现的有两种：一种是一行文字整体变化颜色；另一种一行文字依次变化颜色。接下来，我就介绍一下这两种文字渐变的实现过程。

因为css的边框属性，不支持渐变，所以，为了实现这个效果，我们需要两个圆。嗯，其实这个第一个圆，也要比第一步我们做的圆小一些，模拟徽章最外径和刻线之间的距离。用shape_text的伪类 before 和after 制作两个与背景色完全相同的三角形，调整到两个蓝色方块的外侧，实现视觉上的缺角效果。按照上一步的思路，利用 shape_in 的伪类 before 和after 再同样写两个圆，覆盖在这两个圆的上面。下面的div里，文字底端对齐，然后是不是只要以图形中点为圆心，旋转文字的容器，就能实现了呢？

在这个例子中，当鼠标悬停在 .flip-container 上时， .flipper 会旋转180度，.front 和 .back 分别通过改变透明度来控制其显示或隐藏，这样不会影响 .front 中的 input 元素的交互。希望我的分享对您有所帮助！

用Wordpress做下载站，需要复制网盘链接到后台的文章发布自定义字段，然后我不想每次手动拆分链接和提取码分别到两个input，就想在后台粘帖时候实现拆分它。当然，这是笔记，不是教程。我只是简单的实现一下思路。具体应用到网站上，还需要完善代码。第二种方法是在前端获取数据后实现的拆分。

通过对btn-gradient类的 before 和 hover 样式，为按钮增加丰富的变化和鼠标移动到按钮上时表现的光晕效果。虽然GIF动画质量有些失真，但不难看出这几个按钮的效果还是非常赞的！接下来的三个按钮就简单了，接下来要做的，仅仅是调整颜色，并且将调整好的样子增加到button上。您的鼓励，是我继续发文的动力。第二个类名：btn-gradient ，用来表现 按钮的动画样式。第一个类名：btn，这个类名用来创建按钮的基本样式。

小时候喜欢看阿凡提动画片，羡慕阿凡提总能用他聪明的头脑整蛊贪婪无情的巴依老爷，却让巴依老爷拿他毫无办法。印象最深的，是一集《卖影子》的动画片。现在想来，阿凡提还真不是个穷人，他居然经常随身携带着不少的金币呢。本篇案例，我们就借用一枚阿凡提的金币，给大家介绍几种基本的css动画效果。现在，我们先看看效果图：还是老规矩，不感兴趣的朋友可以闪了。感兴趣的朋友，请跟着我一步一步往下看。

感兴趣的同学，咱们继续往下看。不感兴趣的，请绕过。。。

创作灵感# 自己做网站的时候，想着要做个banner广告位，但是又不确定自己什么时候需要什么内容和文字的广告。如此懒的我就开始琢磨，有什么替代制作图片的方法，灵机一动，就想到了用css来模拟广告图片，做个可以随时修改文字和动画样式的广告，不用改图，岂不快哉！怎么样，代码真的好简单吧？如果你不想每次打开页面源文件修改，那就在后台添加几个字段，把字段值调出来，在网站后台就可以随时改广告了，爽！这个就没有js了，其实真的挺简单的，但效果真还不错。接下来就看看怎么实现的就好了。好了，缺点不是没有，那是我不说。

为实现图片看起来无缝滚动，大图列表的最后一个图片应与第一张图片相同，所以大图列表是5行。当然，对比js实现的轮播，它还有些不足（不能控制前一张，后一张），但对于一些简单的需求，它还是可以拿来应用的。如果您需要复杂可控的 焦点图轮播 请参考我的另一篇文章：JS+CSS实现的很酷的焦点图（仿优酷首页首屏焦点切换）。简单介绍一下本篇文章的实现目标：固定数量的图片轮播，鼠标移动到大图上时滚动暂停，没有复杂的控制功能，不使用JavaScript。接下来，进行最后的细节整理：当鼠标移动到大图上时，暂停图片轮播动画。

先发图片（list列表的前面的序号自增的方法，就是我这篇文章要分享的），避免各位看官不知道是否感兴趣，浪费了您的宝贵时间。如果您已经了解了这个方法，可以快速离开~既然没有走，那么进入实例之前，我们先了解一下 计数器属性(counter)计数器属性(counter)允许我们在CSS中创建和管理计数器。计数器是一个自定义的变量，我们可以使用它来跟踪页面上的元素数量，并根据需要在文档中显示。