饥人谷Wiki

站点工具

用户工具

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

后一修订版 		前一修订版
前端基础_css_伪类与伪元素.md [2021/09/23 12:05]
若愚 创建 		前端基础_css_伪类与伪元素.md [2021/09/23 12:12] (当前版本)
若愚 [字体图标]
行 82: 行 82:
   </style>   </style>
 ``` ```
-![](http://cdn.jscode.me/100407c1-0d72-4f36-99c7-12258aa4428d)+ 
 +![](:wiki:before.png)
  
 [代码](http://js.jirengu.com/xato/1/embed?html,css,output) [代码](http://js.jirengu.com/xato/1/embed?html,css,output)
行 178: 行 179:
 ### 应用-自定义checkbox ### 应用-自定义checkbox
  
-点击笑脸切换: <input type="checkbox"> [代码](http://js.jirengu.com/bazi/1/edit?html,output) +把checkbox做成笑脸切换: [代码](http://js.jirengu.com/bazi/edit?html,output)
-<style> +
-input[type=checkbox]{ +
-  -webkit-appearance: none; +
-  appearance: none; +
-  background: url(http://cdn.jscode.me/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat; +
-  display: inline-block; +
-  width: 20px; +
-  height: 20px; +
-  background-size: contain; +
-  vertical-align: middle; +
-  outline: none; +
-} +
-input[type=checkbox]:checked{ +
-  -webkit-appearance: none; +
-  appearance: none; +
-  background: url(http://cdn.jscode.me/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat; +
-  display: inline-block; +
-  width: 20px; +
-  height: 20px; +
-  background-size: contain; +
-  vertical-align: middle;      +
-} +
- +
-</style>+
  
 ``` ```
-今天的心情: <input type="checkbox"> 
 <style> <style>
 input[type=checkbox]{ input[type=checkbox]{
行 230: 行 206:
  
 </style> </style>
 +
 ``` ```
  
 ### 字体图标 ### 字体图标
 +
 +```
 <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css"> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css">
 <span class="iconfont icon-jirengulogojichu2"></span> <span class="iconfont icon-jirengulogojichu2"></span>
行 241: 行 220:
 } }
 </style> </style>
- 
 ``` ```
-<link rel="stylesheet" type="text/css" href="http//at.alicdn.com/t/font_nyta5x5h650cnmi.css"> 
-<span class="iconfont icon-jirengulogojichu2"></span> [代码](http://js.jirengu.com/bazi/1/edit?html,output) 
-``` 
-[代码](http://js.jirengu.com/qani/1/edit?html,output) 
  
-[参考文章-前端学习指南-字体图标](https://zhuanlan.zhihu.com/p/22724856?refer=study-fe) +[字体图标代码](http://js.jirengu.com/qani/1/edit?html,output) 
 + 
 + 
 ## 参考 ## 参考
 - [W3C - Pseudo-elements and pseudo-classes](https://www.w3.org/TR/CSS2/selector.html#pseudo-elements) - [W3C - Pseudo-elements and pseudo-classes](https://www.w3.org/TR/CSS2/selector.html#pseudo-elements)
 - [W3C - Pseudo-elements and pseudo-classes 翻译版](http://www.ayqy.net/doc/css2-1/selector.html#pseudo-elements) - [W3C - Pseudo-elements and pseudo-classes 翻译版](http://www.ayqy.net/doc/css2-1/selector.html#pseudo-elements)
 +- [前端学习指南-字体图标](https://zhuanlan.zhihu.com/p/22724856?refer=study-fe
 +) 
若愚 · 2021/09/23 12:05 · 前端基础_css_伪类与伪元素.md.1632369933.txt.gz
公众号 | 前端交流群 | 饥人谷版权所有 | 购买课程

页面工具