搜索到
2
篇与
博客
的结果
-
使用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图片自适应模板 苏画-博客:qemao.com --> <div class="centent"> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </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; } } -
GitHub+Jsdelivr 等于免费的typecho文件仓库 什么是GitHub首先进行下科普。Github是目前全球最大的代码托管和开源平台。GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。用户可以在GitHub免费创建公开的代码仓库，共同分享你的项目。什么是GitStaticGitStatic是由大佬乔千开发的一个用于typecho的插件，主要是利用github仓库加jsdelivr加速实现的。本篇文章介绍的是第一代比较稳定的版本，几乎是傻瓜操作。目前更加强大的版本乔千也在拼命肝中，我也有幸加入到了内测当中...有何优点1.本地无残留，节省服务器资源2.使用jsdelivr作为CDN加速，速度贼鸡儿棒！3.大厂，GitHub不倒我不倒4.无容量限制GitHub个人用户存储容量几乎没有上限，但每个仓库不易超过1G，单个文件也不宜过大，不然可能会收到GitHub发来的友情提示邮件。有这么好的资源，虽是白嫖来的也希望大家合理利用。Jsdelivr 网站是一个致力于为开发者提供数千种Javascript、CSS等超过1650多种 Libraries 加速的免费CDN服务，该平台是首个「打通中国大陆与海外的免费CDN服务」，网页开发者无须担心中国防火墙问题而影响使用。白嫖步骤本教程适用啥都不懂的萌新，如果你对GitHub已经非常熟悉了，请跳过一二步骤~第一步：注册GitHub账号点击访问 Github 官网进行注册，有时候访问是加载有点慢，要多耐心等等哈~输入相关信息点击sign up进行注册，按照网站的提示去注册就行啦，这里就不多介绍了，GitHub官网是全英文的，如果看不懂英文的话建议下载一个谷歌浏览器，可以非常方便的翻译整个网页。第二步：创建仓库注册成功并且登录后，点击右上角头像，点击，点击you repositories创建一个新的仓库注意，一定要选择公开，还有创建成功后记住你创建仓库的名字，后面要用。第三步：获取token按照操作一步步来简单粗暴，把这些勾全选了注意：得到token后请立即复制，因为它仅展示一次，下次获取的时候会重置。第四步：下载并安装插件插件下载地址： 点我下载下载成功后将文件解压上传到你服务器的 usr/plugins 并以GitStatic 命名文件夹，然后我们到博客控制台启用插件，点击设置，输入你刚刚复制的token还有你的GitHub用户名以及你创建的仓库名，点击保存设置，这样我们就大功告成了！如何使用只需要在撰写文章的页面上传文件就可以直接使用啦，而且文件完全不会保存在你的服务器，都在GitHub里面。效果测试图片：https://cdn.jsdelivr.net/gh/Xiao-A1/fasv/usr/uploads/2020/04/1084386654.png音乐：https://cdn.jsdelivr.net/gh/Xiao-A1/fasv/usr/uploads/2020/04/1103154441.mp3视频：https://cdn.jsdelivr.net/gh/Xiao-A1/fasv/usr/uploads/2020/04/3433899795.mp4结尾你白嫖到了吗？ 这真的是一步一图的教了，可能有点啰嗦，如果还有什么问题的话可以在评论区讨论哈~或者文中有什么错误也欢迎指正~因为我太懒了 教程改自小A Blog
