标签 css3 下的文章

2023-03-07

前端DPlayer播放器请求阿里云盘视频播放源失败前端DPlayer播放器请求阿里云盘视频播放源失败原因官方加入防盗链，原理是检测Referer头，如果没有检测到Referer则会拒绝响应。报错代码：<Error> <Code>AccessDenied</Code> <Message>You are denied by bucket referer policy.</Message> <RequestId>640729B9129C1F313670E856</RequestId> <HostId>ccp-bj29-video-preview.oss-enet.aliyuncs.com</HostId> <BucketName>ccp-bj29-video-preview</BucketName> <EC>0003-00000503</EC> </Error>解决方法在前端页面中加上该代码<meta name="referrer" content="never">参数地址

2023年03月07日
169 阅读
1 评论
0 点赞

2023-03-07

Python3 Flask模板渲染Url地址数据中JavaScript代码区块内出现字符丢失 Python3 Flask模板渲染Url地址数据中JavaScript出现字符丢失问题原因由于Flask框架在模板渲染时会自动进行转义，所以url等复杂的文本会进行自动转义从而导致丢失一些字符最后造成url无法访问所有扩展名为 .html 、 .htm 、 .xml 以及 .xhtml 的模板会开启自动转义模板可以利用 {% autoescape %} 标签选择自动转义的开关。代码详情config = { "url": "http://xxxxxxxxxxxxxxxxx" } ...... return render_template("index.html", config=config)url: "{{ config.url }}",解决办法关闭渲染时自动转义url: "{% autoescape off %}{{ config.url }}{% endautoescape %}"

2023年03月07日
146 阅读
0 评论
0 点赞

2023-03-05

JavaScript 生成瀑布流布局 JavaScript 生成瀑布流布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript实现瀑布流布局</title> <style> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } </style> </head> <body> <input type="text" placeholder="输入高" id="text" /> <input type="button" value="点我添加新元素" id="button" /> <div class="box" id="box"></div> <script> const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) } } </script> </body> </html> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) console.log(div.style.backgroundColor); } }

2023年03月05日
157 阅读
0 评论
0 点赞

2023-03-03

Html5和CSS3 columns实现瀑布流布局 Html5和CSS3 columns实现瀑布流布局break-inside 属性规定在指定元素内部是否应发生分页（page-break）、分列（column-break）或分区（region-break）。break-inside 属性扩展了 CSS2 的 page-break-inside 属性。通过使用 break-inside，您可以告知浏览器在图像、代码片段、表格以及列表内部避免中断。break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;值描述auto默认。在元素内自动进行分页、分列、分区avoid避免在元素内出现页、列、区域中断avoid-column避免在元素内分列avoid-page避免在元素内分页avoid-region避免在元素内分区initial将此属性设置为其默认值inherit从其父元素继承此属性引用w3school链接<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; width: 100%; columns: 2; column-gap: 30px; } .item { width: 100%; margin-bottom: 10px; break-inside: avoid; } </style> </head> <body> <div class="box"> <div class="item" style="height: 300px;background-color: rgb(212, 198, 3);">1</div> <div class="item" style="height: 600px;background-color: rgb(90, 41, 206);">2</div> <div class="item" style="height: 400px;background-color: rgb(3, 118, 163);">3</div> <div class="item" style="height: 700px;background-color: rgb(245, 9, 9);">4</div> <div class="item" style="height: 900px;background-color: rgb(190, 16, 176);">5</div> <div class="item" style="height: 800px;background-color: rgb(245, 9, 9);">6</div> </div> </body> </html> .box { position: relative; width: 100%; columns: 2; column-gap: 30px; } .item { width: 100%; margin-bottom: 10px; break-inside: avoid; } 1 2 3 4 5 6

2023年03月03日
168 阅读
0 评论
0 点赞

2022-04-13

HTML5+CSS3+JavaScript实现放大镜功能 HTML5+CSS3+JavaScript实现放大镜功能预览{anote icon="" href="https://000081.xyz/html/227.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>放大</title> </head> <style> * { box-sizing: border-box; border: 0px; padding: 0px; margin: 0px; } .box { background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; float: left; border: 5px solid black; } .fdj { visibility: hidden; position: relative; background-color: aqua; opacity: 0.1; } .out_box { visibility: hidden; margin-left: 50px; overflow: hidden; float: left; border: 5px solid black; } .big_box { position: relative; background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; } </style> <body> <div class="box" id="box"> <div class="fdj" id="fdj"></div> </div> <div class="out_box" id="out_box"> <div class="big_box" id="big_box"></div> </div> </body> <script> var box = document.getElementById("box"); var fdj = document.getElementById("fdj"); var out_box = document.getElementById("out_box"); var big_box = document.getElementById("big_box"); // 普通图片宽高大小 box var small_width = 400; var small_height = 400; // 放大镜宽高 var fdj_width = 200; var fdj_height = 200; // 放大div的宽高大小 out_box; var out_width = 400; var out_height = 400; // 放大后图片宽高 big_box var big_width = 800; var big_height = 800; // 放大倍率 var width_beilv = -1 * (big_width / small_width); var height_beilv = -1 * (big_height / small_height); // 重新调整布局 //box box.style.width = small_width + "px"; box.style.height = small_height + "px"; //fdj fdj.style.width = fdj_width + "px"; fdj.style.height = fdj_height + "px"; //out_box out_box.style.width = out_width + "px"; out_box.style.height = out_height + "px"; //big_box big_box.style.width = big_width + "px"; big_box.style.height = big_height + "px"; box.onmouseover = function (e) { fdj.style.visibility = "visible"; out_box.style.visibility = "visible"; }; box.onmousemove = function (e) { //用page而不用clien的原因是如果页面过长导致轮滑滚动，clien错位 var x = e.pageX - fdj_width / 2; var y = e.pageY - fdj_height / 2; x = x < 0 ? 0 : x > small_width - fdj_width ? small_width - fdj_width : x; y = y < 0 ? 0 : y > small_height - fdj_height ? small_height - fdj_height : y; fdj.style.left = x + "px"; fdj.style.top = y + "px"; big_box.style.left = width_beilv * x + "px"; big_box.style.top = height_beilv * y + "px"; }; box.onmouseout = function (e) { fdj.style.visibility = "hidden"; out_box.style.visibility = "hidden"; }; </script> </html>

2022年04月13日
190 阅读
0 评论
1 点赞