乖兔博客

善用佳软~
放飞你的工作效率
乖兔 > CMS系统 > CSS >

CMS系统 / CSS

纯css修改浏览器scrollbar滚动条样式
CSS

纯css修改浏览器scrollbar滚动条样式

乖兔 更新于:2020-11-30 评论 ( 0 )

把网站前台的UI设计好之后,前台去浏览,有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且,不同浏览器的滚动条还有很多差别。 这里,我们可以通过css修改浏览器scrollbar滚动条样式的方法,让页面更加美观舒适。 纯css修改浏览器scrollbar滚动条样式代码: ::-webkit-scrollbar{width:.5rem;height:.5rem;background:hsla(0,0%,100%,0.6);}::-...

css3实现div边框闪烁呼吸灯效果
CSS

css3实现div边框闪烁呼吸灯效果

乖兔 更新于:2020-11-29 评论 ( 0 )

有时候,处于营销或者其他原因,我们希望网页上的某些元素或者某个div更显眼一些,从而让访客可以关注到这些内容。而由于需要照顾网页美观协调,又不能把它改成太过显眼的颜色,比如大红色。 这时候就可以使用css3的呼吸灯效果,为内容所在div做一个闪烁的边框来实现。 css3实现div边框闪烁呼吸灯效果的代码: htmlbodyhead.arrow_box{animation:glow8...

纯div和css实现右下角固定div
CSS

纯div和css实现右下角固定div

乖兔 更新于:2020-11-29 评论 ( 0 )

在制作一些百度竞价落地页或者营销型的企业网站的时候,经常会需要在网页页面右下角展示一个固定的div,里面放置一个form表单供客户填写,用来收集客户信息。 这个功能很实用,并且只需要几行简单的css代码即可实现。 先来看一下纯div和css实现右下角固定div的效果: 纯div和css实现右下角固定div的代码示例: !DOCTYPEhtmlhtmlheadmetahttp-equiv=content-t...

用css改变placeholder的颜色减少视觉冲突
CSS

用css改变placeholder的颜色减少视觉冲突

乖兔 更新于:2020-03-26 评论 ( 0 )

在input输入框中使用place内写入文字的方法可以对此输入框做一些简单的说明,但是其颜色如果和输入框文本颜色那样深就会显得有点突兀,可以使用css样式来修改placeolder的文本颜色,使用方法如下: input::-webkit-input-placeholder{color:#ccc;}/*使用webkit内核的浏览器*/input::-moz-input-placeholder{color:#ccc;}/*Firefox版本4-18*/input::-moz-placeholder{color:#ccc;}/*Firefox版本19+...

cdn在线引用font awesome字体图标和css加速加载
CSS

cdn在线引用font awesome字体图标和css加速加载

乖兔 更新于:2020-03-16 评论 ( 0 )

随着font awesome的不断完善和字体图标的不断增加,他的css和字体文件的体积也变得越来越大。下载下来的话会加重自己网站的负担,并且拖慢页面的记载速度。此时可以通过调用一些公共静态资源库的cdn资源来实现加速页面加载和减轻自己服务期负担的目的。 首先引用在线的font awesome的css文件: linkrel=stylesheethref=https://maxcdn.bootstrapcdn.com/font-awesome/4....

css3 表格隔行变色隔列变色代码写法
CSS

css3 表格隔行变色隔列变色代码写法

乖兔 更新于:2020-03-07 评论 ( 0 )

使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法 tabletr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/tabletd:nth-child(even){color:#C00;}/*偶数行字体颜色*/tabletr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/ 实际效果实例: 此段实例对应html代码: !DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhttp://www.w3.org/TR/html4/loose.dtdhtmlh...

分享4个漂亮的css表格样式
CSS

分享4个漂亮的css表格样式

乖兔 更新于:2020-03-07 评论 ( 1 )

话不多说,直接上四个比较经典的漂亮css表格样式代码: ①第一个,浅灰色表和css样式,非常经典 此样式仅用配色实现,无需调用图片,代码是: styletype=text/csstable.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:1px;border-color:#666666;border-collapse:collapse;}table.gridtableth{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#dedede...