liyongleihf2006

[jsbin](https://jsbin.com/girusiz/edit?html,css,output) **基本css** ```css img{ width: 120px; height: 160px; } .tag{ position:absolute; background:#cd0000; color:white; font-size: 12px; } ``` **方形，宽度跟随内容** ```css .tag-normal{ padding:2px 4px; } ``` ```html No.1 ``` **三角** ```css .tag-triangle{...

应该就是红色管道转化为蓝色管道,蓝色管道转化为红色管道的问题吧 可惜下面的实现不支持ie,因为ie不支持filter:url滤镜 我考虑了一下,又添加了一种别的实现方式,可惜依然不支持ie [jsbin](https://jsbin.com/miridih/edit?html,css,js,output) ```css svg{ position:absolute; visibility: hidden; } .filter { filter: url('#filter') } ``` ```html 开始变换 另外一种变换 ``` ```js //第一题 const div = document.createElement('div'); Object.assign(div.style, { height: '300px',...

```css #overlay:target{ display:block; } #overlay{ display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.1); } ``` ```html 按钮 ``` ```js document.querySelector('#showButton') .addEventListener('click',function(){ location.href = "#overlay"; }) document.querySelector("#overlay") .addEventListener('click',function(){ location.href = "" })...

[jsbin](https://jsbin.com/qekoret/edit?html,css,output) ```css .header { height: 300px; background: lightgray; } .content { position: relative; writing-mode: vertical-lr; width:100%; } .nav-wrap{ writing-mode:horizontal-tb; display: inline-block; margin-top:-50%; width:100%; text-align: center; } .nav { display:inline-block; border:...

[jsbin](https://jsbin.com/vizifarudo/edit?html,css,output) ```css .rotate-ul{ transform-style: preserve-3d; perspective: 800px; display:inline-block; white-space: nowrap; padding-left: 0; } .rotate-li{ display: inline-block; list-style: none; } .rotate-li:nth-child(1){ transform: translateZ(-400px); } .rotate-li:nth-child(2){ transform: translateZ(-100px); } .rotate-li:nth-child(3){ transform: translateZ(0px);...

[jsbin](https://jsbin.com/poradav/edit?html,output) ```html nohref href href="" ``` ```css a::after { content: attr(href) } ``` ```js //所有的a标签 const anchors = document.querySelectorAll('a'); console.log(anchors); //所有的链接元素 const links = document.links; console.log(document.links); //3 Array.from(links).forEach(link => {...

```html ``` ```js Array.from(document.images).forEach(function (image) { var widthAttr = image.getAttribute('width') if (isNaN(widthAttr)) { image.style.width = widthAttr } }) var targetNode = document.body; var observerOptions = { childList: true, // 观察目标子节点的变化，是否有添加或者删除...

我思考了好久,我的想法跟@livetune的实现是一样的，但一直没有解决掉只有两行的情况下如何还能保证中间行还是在中间的问题 ---------- 勉强实现了一下😊 [jsbin](https://jsbin.com/colatoh/edit?html,css,js,output) ```css .container { display: flex; resize: horizontal; overflow: hidden; border: 1px solid; width: 200px; height: 21px; } .arrow { flex: 0 } .content { flex: 1;...

### 第一题 ```css /* zxx: 还差改变盒模型，不然多了2px边框 */ .quiz{ display: table; table-layout: fixed; width:100%; } .quiz-h{ vertical-align: middle; width:5em; padding-left:10px } .quiz-p{ display: table-cell; vertical-align: middle; } ``` ### 第二题 ```css...

```js console.log(epsEqu(0.1 + 0.2)) console.log(epsEqu(0.3 - 0.1)) console.log(epsEqu(0.3 - 0.01)) console.log(epsEqu(0.4321 - 0.01)) console.log(epsEqu(1)) console.log(epsEqu(11)) console.log(epsEqu(11.1)) console.log(epsEqu(11.000005)) function epsEqu(val) { //补充数据,我是希望像0.0~99这种能够进位为1.0~03格式 var patch = Math.pow(0.1, 16) val += patch val...