先来看一下效果：CSS :checked伪类选择器思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时，会绑定同步点击 "for" 属性值为 "checkbox" 的 "id"。HTML代码如下：这是前端开发博客的正文 点击展开全文当我点击“点击展开全文”时，也就点击了checkbox，也就改变了checkbox的状态为非选中状态了，根据两个状态来显示不同的CSS，从而实现了展开的功能。需要说明的是这个CSS选择符只兼容
话不多说,直接上四个比较经典的漂亮css表格样式代码:①第一个,浅灰色表和css样式,非常经典此样式仅用配色实现,无需调用图片，代码是：table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse;}table.gridtable th { border-width: 1px; padding: 8px; border-style: solid;
使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/table td:nth-child(even){color:#C00;}/*偶数行字体颜色*/table tr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/实际效果实例:此段实例对应html代码: demo table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/ table td
在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+ */input
有时候，处于营销或者其他原因，我们希望网页上的某些元素或者某个div更显眼一些，从而让访客可以关注到这些内容。而由于需要照顾网页美观协调，又不能把它改成太过显眼的颜色，比如大红色。这时候就可以使用css3的呼吸灯效果，为内容所在div做一个闪烁的边框来实现。css3实现div边框闪烁呼吸灯效果的代码：.arrow_box{animation: glow 800ms ease-out infinite alternate; }@keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0
把网站前台的UI设计好之后，前台去浏览，有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且，不同浏览器的滚动条还有很多差别。这里，我们可以通过css修改浏览器scrollbar滚动条样式的方法，让页面更加美观舒适。纯css修改浏览器scrollbar滚动条样式代码：::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6);}::-webkit-scrollbar-track { border-radius: 0;}::-webkit-scrollbar-
当鼠标移动到当前div的时候改变内部子div的样式或其他div样式，借助简单的js代码来实现。可以实现不同部位菜单导航的联动或前台不同部位的互动效果。先来看看效果：js实现鼠标移入div后改变内部其他子div样式的全部html代码： js实现鼠标移入div后改变内部其他子div样式 #wrap { margin:50px auto; padding:50px; text-align:center; width: 300px; height: 400px; border: 1px solid #CCC; }
css3可以通过代码渲染的方式实现网页背景的高斯模糊效果，告别更换背景时候的ps批图。分享三种css3实现网页背景图片高斯模糊效果的方法。css3实现网页背景模糊方法一（正常模糊）： html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } /*背景模糊*/ .bg { width: 100%;
css3实现div边框闪烁呼吸灯效果使元素更醒目 有时候，处于营销或者其他原因，我们希望网页上的某些元素或者某个div更显眼一些，从而让访客可以关注到这些内容。而由于需要照顾网页美观协调，又不能把它改成太过显眼的颜色，比如大红色。这时候就可以使用css3的呼吸灯效果，为内容所在div做一个闪烁的边框来实现。css3实现div边框闪烁呼吸灯效果的代码：.arrow_box{animation: glow 800ms ease-out infinite alternate; }@keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0
google adsense广告屏蔽指定敏感广告的方法 谷歌广告联盟google adsense是个很良心的广告联盟，对于小站长来说，相比其他联盟广告质量和广告收益都要更多一些。但是，由于是国外平台，由于环境的不同，它里面并不是所有的广告都适合出现在中文网站上，为了避免造成违规，就需要对广告内容做一些屏蔽设置。google adsense广告屏蔽指定敏感广告的方法：进入adsense后台后，依次进入评比控制功能--》所有网站，可以看到右侧有很多类型可选，点击某个类别即可进入某个类别来选择性的屏蔽这个类别下的部分或所有广告内容。把其中不想展示的广告类别后沟即可，