搜索到
51
篇与
程序代码
的结果
-
使用CSS实现简单的图片自适应UI模板代码 简介：使用css布局一个非常简单的自适应图片UI模板HTML代码：<!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>css实现图片排版效果</title> <link rel="stylesheet" href="./ceshi.css"> </head> <body> <!-- css图片自适应模板 核客互动：blog.hackeus.cn --> <div class="centent"> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> <div class="main"> <div class="img"> <img src="https://lib.hackeus.cn/static/images/shuffling.jpg" > </div> </div> </div> </body> </html>CSS代码：body { padding: 15px; min-width: 320px; } .img>img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; } .img { display: flex; width: 90%; height: 90%; align-items: center; border-radius: 5px; } .main { display: flex; justify-content: center; align-items: center; width: 25%; height: 250px; max-width: 25%; } .centent { display: flex; flex-wrap: wrap; width: 100%; height: auto; min-height: 320px; } @media screen and (max-width: 1000px) { .main { display: flex; justify-content: center; align-items: center; width: 33.3%; height: 250px; max-width: 33.3%; } body { padding: 5px; } } @media screen and (max-width: 756px) { .main { display: flex; justify-content: center; align-items: center; width: 50%; height: 250px; max-width: 50%; } body { padding: 8px; } } @media screen and (max-width: 500px) { body { padding: 3px; } } @media screen and (max-width: 350px) { body { padding: 0px; } }
PHP隐藏实际地址的文件下载方法代码 方法一：function download_document($filename,$path="",$mimetype="application/octet-stream") { header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); header("Content-Disposition: attachment; filename = $filename"); header("Content-Length: " . filesize($pathto . $filename)); header("Content-Type: $mimetype"); echo file_get_contents($pathto . $filename); }方法二：<?php $file = "1.txt";// 文件的真实地址（支持url,不过不建议用url） if (file_exists($file)) { header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename='.basename($file)); header('Content-Transfer-Encoding: binary'); header('Expires: 0'); header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); header('Pragma: public'); header('Content-Length: ' . filesize($file)); ob_clean(); flush(); readfile($file); exit; } ?>
网站添加好看的动态时钟小工具代码 简介：这款时钟小工具是本站自用的小工具，觉得挺好看的，分享给大家！需要的可自行添加美化自己博客！说明：将下面代码复制至外观→小工具→自定义HTML文本中<div class="card-content"> <canvas id="canvas" style="width:100%;" width="820" height="250"></canvas> <script src="https://lib.hackeus.cn/static/js/Dynamicclock.js"></script> </div>
网站自定义QQ分享卡片代码 简介：QQ内分享网站时，标题、描述能正常抓取，而缩略图常不能，或者抓取的图片我们不喜欢。下面代码可实现自定义，分享给好友则会展示设置好的标题、描述和缩略图。代码：<meta itemprop="name" content="网页标题"> <meta itemprop="description" content="网页描述"> <meta itemprop="image" content="缩略图">
网站顶部的跑马灯特效代码功能 简介：网站顶部的跑马灯特效代码将以下代码放在头部head里即可代码：<!-- 顶部跑马灯特效 --> <style> .article-content h2 { margin: 15px 0 15px -20px; padding: 0 25px; border-left: 5px solid #51aded; background-color: #f7f7f7; font-size: 18px; line-height: 40px;} #top-img {background: url(https://lib.hackeus.cn/static/images/paomadeng.png);height: 4px;top: 0px;position: fixed;width: 100%;Z-index: 9999;} } </style> <div id="top-img"></div> <!-- 顶部跑马灯特效 -->
为网站鼠标点击添加富强民主等内容Js代码 简介：网站内点击显示富强，民主等特效把下方代码放在需要的文件中代码：<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span />").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
JS代码实现浏览器网页标题的离开动态切换 简介：为网站加上一个动态标题离开网页标题就会变，回来后就会恢复正常代码：<script> //动态标题 var OriginTitile = document.title, titleTime; document.addEventListener("visibilitychange", function() { if (document.hidden) { document.title = "╮(╯﹏╰）╭ 网页崩溃啦！"; clearTimeout(titleTime) } else { document.title = "(/≧▽≦/) 咦！又好了！ " ; titleTime = setTimeout(function() { document.title = OriginTitile }, 1000) } }); </script>
