HTMLCssJs
关注
分享
扫一扫
文章平均质量分 58
中南自动化学院至渝
好记性不如烂笔头，多写写
展开
-
网页中插入mathtype公式的代码
背景 打算写一些科普介绍性的网页，里面少不得公式的大篇幅，用图片的话以后维护太难，所以想着能不能直接写公式的 tex 代码，然后网页端渲染即可方法 在head 中引入一个js文件即可<head> <meta charset="UTF-8"> <script id="MathJax-script" sr原创 2022-01-27 10:28:25 · 15875 阅读 · 0 评论 -
网页回到顶部的js代码实现
背景 还是给老板写他的个人主页，用到了一个小功能，随手记录下代码控制样式的 css 代码如下/* 回到顶部实现代码的css */.back-to-top { display: none; /* 默认是隐藏的，这样在第一屏才不显示 */ position: fixed; /* 位置是固定的 */ bottom:300px; /* 显示在页面底部 */ right: 30px; /* 显示在页面的右边 */ z-原创 2022-01-19 10:45:55 · 19061 阅读 · 0 评论 -
利用不蒜子统计网站的访问量
背景 给老板写个人主页，用到了记录下代码<head> <script type="text/javascript" src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></head> <body> <div sty原创 2022-01-02 10:32:57 · 19159 阅读 · 0 评论 -
给网站添加访问地图3d版，平面版
背景 给老板写个人主页的时候用到的，记录下效果展示3D版平面版实现打开 https://clustrmaps.com/site/1bf58，创建一个小部件输入你要统计的网站地址选择你要那个版本的3D版，右边那个点进去有相应的js代码，复制就行了比如我的代码是，效果是最开始说明那样<div style="height: 250px;原创 2022-01-01 17:07:53 · 20427 阅读 · 0 评论 -
给网站添加建站时长的js代码
背景 老板让我给他写个人主页，然后用到了这个东西，记录下代码<!--这是html代码，放在你想显示建站时间的地方，样式啥的自己改就行--><span id="sitetime" style="color: rgb(248, 247, 247);"></span><!--这是js代码，放在html文件末尾，或者单独放一个文件，引原创 2022-01-01 16:21:20 · 18626 阅读 · 0 评论 -
MarkDown Preview Plus 的 css 样式
背景 MarkDown Preview Plus 插件自带的不好看，因为他支持自定义嘛，就自己整了一个，比较适合我的电脑代码body{ margin: 0 auto; font-family: "Microsoft YaHei", arial,sans-serif; color: #444444; line-height: 1; padding: 30px;}@media screen and (mi原创 2021-12-13 13:20:05 · 20562 阅读 · 0 评论 -
看板娘demo，学会了可以方便的给自己的博客添加一个看板娘
文件下载 由于文件代码有点多所以，放一个网盘链接链接：https://pan.baidu.com/s/1qiFDWN-bMzq6zKpytvuzeA提取码：ajcmdemo<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type原创 2021-06-18 10:36:29 · 19949 阅读 · 3 评论 -
本地测试demo时看板娘的图片显示不出来，解决办法
问题 本地测试的时候，发现总是没有模型的图像显示，如下 F 12 检查的时候出现这样的问题 错误信息如下Access to XMLHttpRequest at ‘file://api.fghrsh.net/hitokoto/rand/?encode原创 2021-06-18 09:47:39 · 21992 阅读 · 4 评论 -
nginx autoindex自动美化
结果方法 利用 add_after_body 添加一个美化文件（注意该文件的寻址方式是基于你的 root 的） 美化文件如下，这个一个 .html 文件，别搞错了<!-- autoindex for nginx --><style> b原创 2021-05-14 09:10:36 · 20989 阅读 · 0 评论 -
如何在网页中插入 emoji 表情
问题背景 想插入写小表情让文章更接地气一点，文风更俏皮写。方法 在这个网站里面找你想要的表情 https://emojipedia.org/face-with-monocle/总结：两步走找到你觉得合适的表情，点进去点 copy 按钮，到 html 中粘贴原创 2021-05-12 20:48:37 · 21666 阅读 · 0 评论 -
生成毕业同学去向数据地图，鼠标经过某个省是变色而且显示相关的信息（比如那些人在这个省）
效果html代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; color: #333333; } body {原创 2021-05-12 20:26:49 · 20160 阅读 · 0 评论 -
如何在 html 中插入天气插件
背景 之前的方法图片形式对中文的支持不太好， 如何获取某个城市的天气小图标插入到自己的网页中，js 形式又有点缺陷，不知道为啥子，懒得弄，所以就换了一个心知天气的接口；步骤进入插件的自定义平台 https://www.seniverse.com/widgetv3，没有的话，先注册登录，选择控制台，新版插件。就能看到了，一般要让你先买个免费服务拿到 token自定义的时候，如果你打算只放一个，而且固定在屏幕上，那浮动气泡加可展开是个不错的原创 2021-05-11 09:16:15 · 21739 阅读 · 3 评论 -
div固定在屏幕的某一位置
需求背景 在制作班级的通讯录的时候，有个妹子提出要能实时显示时间就好了，然后想着我自己之前做过，所以就很方便加上了，但是如何让这个时间固定在屏幕上呢？让他不随滚动条滚上去，始终在我们视野的某个位置解决办法 给放时间的那个div设置如下 css 属性，其中 fixed 是固定在屏幕上， bottom、right 是设置具体的位置（可自由搭配看看效果）原创 2021-05-11 08:49:08 · 19592 阅读 · 0 评论 -
网页布局--------在一个 div 里面放多个横排 div 实现方法 比较一下，flex 最好
目的 目的很简单，就是实现一个盒子里面横向放多个盒子实现方法1（最推荐） 给父盒子设置 display: flex;，其他的你就基本不用管了。.test { width: 100%; height: 50%; display: flex;}.box1 { width: 20%;}.box2原创 2021-04-27 20:15:41 · 19647 阅读 · 0 评论 -
display:inline-block 出现的元素错位问题及解决方案
背景 布局想让两个div在一行显示，用了display:inline-block 但是出现了如图的错位情况，左边放了ul 右边就突然往下拉跨了一段解决办法 在display:inline-block 后面添加原创 2021-04-21 16:02:03 · 26354 阅读 · 0 评论 -
去掉ul li 前面的点与空白
背景 用了很多次，就当做个笔记，有时候发现在css开头写上* { padding: 0; margin: 0; } 目的是能达到，但是有些情况下我又有点想保留 html 自带的一些样式，所以还是都搞搞去掉圆点ul li { list-style: none;}去掉空白 &n原创 2021-04-20 15:56:45 · 40269 阅读 · 0 评论 -
倒计时广告关闭案例实现 js js小技巧
效果做这个背景缘由 看 pink 老师的视频时候讲到了 5秒之后自动关闭，然后弹幕有句话就说怎么做倒计时的广告呢，然后就花了10多分钟写了一下，东西不难，大盒子套小盒子，图片当成背景图片，全填充，相对位置的简单试错。代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title><原创 2021-04-14 09:34:25 · 25384 阅读 · 0 评论 -
解决 网页上显示时间，刷新的时候下面的搜索框总会抖动一下，对用户的体验不好问题
前提提要 本文不具有泛化性，更多的是自己设计时候的不细心造成的，原因是，margin-top设置在了他俩父元素上，导致的，具体为啥会导致这样，俺也不懂，我只是个菜鸡问题原来的代码<!-- 首行logo --><div class="container"> <div class="logotop"> <div class="col-xs-4 col-sm-4 c原创 2021-04-08 10:38:03 · 25276 阅读 · 1 评论 -
css 设置鼠标经过的时候鼠标变成手状假装是个链接
背景业务要求 在设计网站的时候，有这样一个需求，用 js 来控制一个 div 的显示与关闭，以模拟链接的作用，为什么要这么做的原因是，避免用链接跳转时候带来的页面跳转让使用者不适，下面就是用链接的实现效果 理想效果 现在的模样&原创 2021-04-06 11:26:20 · 25430 阅读 · 0 评论 -
原生js实现快速方便的添加类名，移除类名
背景 想做一个给按钮按下去增加一个class替换背景颜色，如下的效果，在JQuery里面，可以直接用 addClass 和 removeClass 直接操作。原生 js 有啥方便的办法吗方法 用 .classList.a原创 2021-04-03 13:17:34 · 25808 阅读 · 0 评论 -
css js 下拉菜单会突然消失之谜
问题背景 做网站用到了下拉菜单，but 我每次要点子菜单时，老是出现下拉菜单消失的问题原因 子菜单和上面导航栏有个小空白，每当我鼠标经过小空白的时候瞬间就离开了上面的父元素导航栏。所以就消失了我的下拉菜单结构办法 把 li 下面的原创 2021-04-01 21:00:58 · 25914 阅读 · 0 评论 -
再补充5种鼠标移动特效
前一篇 在鼠标点击特效上加上鼠标移动特效（一） ，效果1 前二篇 在鼠标点击特效上加上鼠标移动特效 （二） ，效果2 在前面两个的基础上再补充几个特效代码<!DOCTYPE html><html lang="zh"><h原创 2021-03-31 20:59:40 · 25879 阅读 · 0 评论 -
在鼠标点击特效上加上鼠标移动特效 （二）
图片打包下载 前一篇 鼠标点击特效——富强、民主、文明、和谐…效果 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>至渝的个人简历</title>原创 2021-03-20 11:37:26 · 27263 阅读 · 0 评论 -
在鼠标点击特效上加上鼠标移动特效（一）
网站鼠标点击特效和鼠标移动特效 效果地址 图片打包下载 js代码打包下载<!DOCTYPE html><html><head> <m...原创 2021-03-20 11:23:42 · 27633 阅读 · 0 评论 -
鼠标点击特效——富强、民主、文明、和谐.....
网站鼠标点击特效和鼠标移动特效 效果地址 图片打包下载代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title&g...原创 2021-03-20 11:13:47 · 27071 阅读 · 0 评论 -
自己编写油猴脚本时踩得坑
最近上手写了自己的第一个油猴脚本（不知道这样说准不准确），严格意义上来将是，借助于油猴这个脚本平台，写了自己的第一个脚本，并成功运行测试 当然，这篇文章不讲我究竟做了啥，而是说在编写脚本时需要注意的东西，主要是上面的一大排注释，这些注释非常有用的，它表明了脚本的各个属性。 下面来简单介绍一下。属性名Value备注name油猴脚本原创 2021-03-11 15:43:41 · 32506 阅读 · 11 评论 -
如何获取某个城市的天气小图标插入到自己的网页中
之前写 ICISCI 会议网站的时候明明找到方法怎么得到不同城市的天气了的，这次又花了一个多小时，哎呀，被自己蠢死了。效果图：方法打开 网址链接...原创 2021-03-06 16:33:28 · 26193 阅读 · 0 评论 -
在设置背景图片全屏时background-size: 100% 100%；和background-size: 100%；的区别，一个100%和两个100%的区别
background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)原创 2021-02-23 13:43:26 · 31199 阅读 · 0 评论 -
背景图片全屏适应的两种方法，background-size: cover； 或者（background-size: 100% 100%；）
background: #000 url(img1.jpg) no-repeat fixed center center;background-size: cover; 或者（background-size: 100% 100%;） 注意要写好background之后再写background-size，否则会没用，切记，这儿浪费了我一个多小时时间 100%和cov原创 2021-02-23 13:30:32 · 27800 阅读 · 0 评论