天下大师傅

由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。 *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px;

以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。这是运行效果图这是完整代码 *{margin: 0; padding: 0;} .container{ margin: 0 auto;

你除了要定宽度，还要加上这2个属性其中之一，就可以实现换行了。1. word-break:break-all;只对英文起作用，以字母作为换行依据，数字也可以换行.2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据，能换行，但是宽度会超出设定宽度.出现此问题是因为系统默认一段不含空格的字母（数字）串为一个单词，系统默认不会从一个单词中间断行，所以溢出了div

蓝色背景是默认样式，灰色背景是hover样式。初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝色按钮上去也变成了灰色。其实这个时候只需要在蓝色背景后面加上 !important  把优先级提到最高。就会发现hover背景和默认背景不会冲突了。.btn{ /*按钮样式请参考我的另一篇文章*/}.btn-cur{ background: #5DCBFF !impor

直接切入主题，添加vertical-align: top;就可以解决了。附赠另一个问题使用span标签或者a标签写按钮时，会发现写了一大堆，width和height无论怎样设置都没有宽高，其实只要加上display: inline-block; 或者 display: block;这是因为span和a都是内联标签，无法设置宽高。要变成块级标签设置的宽高才能使用。

直接切入主题，使用vertical-align: middle;发现不能垂直居中。好，现在就按步骤来，1、先设置line-height: XX;(父标签的高度)2、在同级添加另一个标签都可以，样式写span{ display: inline-block; height: 100%; vertical-align: middle;}3、直接看结果。这

网页适配移动端的时候，menu菜单栏要隐藏到顶部右侧，这个时候就会有三根横岗的小图标。这里就是不用图片，直接用标签+css写的。这是效果图：这是完整的代码 Document .nav-mobile-button { position: relative; float: right; paddin

有两种解决办法第一种    父div 设置overflow: hidden;    img 标签设置 width: 100%;但是会有一个问题，高度大于父div时，会有部分被隐藏。第二种    解决办法出自 深圳前端交流群 （群号：247687975）深圳-旧城以西 。使用背景图片的方式，设置css3 background-size: cover;  官方解释是：把背景图片扩展至足够大，以使背景图...

话不多说，上效果图。核心代码就是 transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; 通过 transition 属性的 cubic-bezier（贝塞尔曲线） 在过渡效果上加了个缓冲效果。html代码部分主要模块就是一个input 外加一个 父级 div  div宽度需要大于input宽度不加 cubic-bezier 可以实现这个...