网站底部导航代码 演示 使用教程 根据自己的网站放置代码 代码如下 style type=text/css * {margin:0px; padiing:0px;} .login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;} .login_alert_close{position:absolute;top:-10px;right:0px;z-index:1;cursor:pointer;} .login_alert_box{width:100%;text-align:center; background...

使用CSS和JS两种方法实现颜色渐变文字效果代码 演示 代码 css渐变代码 !-- css颜色渐变变色文字 -- div id=momk div style=text-align:center; 颜色渐变文字效果 /div /div style #momk{animation:change 10s infinite;font-weight:100; } @keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% ...

前言 网站运行时间代码，可以更好的记录自己的网站运行时间，它可以让更多人了解你们的网站和运营时间。 效果图 教程 把代码放在网站底部，然后给代码中的建站日期数字修改成你建站时间就行了 代码 /div 本站已安全运行: span id=momk /span script language=javascript function show_date_time(){ window.setTimeout(show_date_time(), 1000); BirthDay=new Date(09-03-2020 15:10:00);//建站日期 today=new Dat...

前言 给那些打算给自己网站增加色彩的网站一个不错的功能，这段CSS+html代码可以让鼠标移动到图片上产生抖动特效 效果 教程 每当你添加一张图片打算使他抖动时,将该代码添加到自定义html里即可 注: 自定义html属于 古腾堡的一个区块,如果不使用古腾堡，使用经典编辑器直接在代码添加即可。 link rel=stylesheet type=text/css href=https://www.wpon.cn/cssjc/doudong2.css img class=wpon src=https://www.atbkw.cn/wp-content/uploads/2021/12/aa60...

1.禁用浏览器右键菜单 document.oncontextmenu = new Function(return false;); 2.监听键盘事件 function mAlert() { var fn = function () {}; fn.toString = function () { window.location = 'about: blank'; console.log(呵呵); } console.log(%c, fn);//请不要删除这行 };mAlert(); 3.检测控制台 function mAlert() { var fn = funct...

　　否定伪类选择器 　　语法:E:not(F)匹配不满足条件F的E元素 　　eg: li:not(){ background: pink; } 　　匹配不满足条件class=lis的li元素 　　语言伪类选择器 　　语法:E:lang(value)匹配指定了lang属性，并且值为value的E元素 　　eg: html:lang(en){ color: red; }

　　1.设置栏数 　　语法: column-count:数值; 　　2.设置每栏的宽度 　　语法: column-width:数值+单位; 　　注:column-count和column-width设置其中一个即可 　　3.设置栏间距 　　语法: column-gap:数值+单位; 　　4.设置栏间隔线 　　语法: column-rule:宽度线型(solid/dashed/dotted)颜色; 　　eg: column-rule:2px solid red; 　　5.设置元素是否跨栏显示 　　语法: column-span:all(跨栏显示)|none(不跨栏显示); 　　注:该属性给需要跨...

　　语法: display: flex; 　　设置弹性布局需要注意的四点: 　　1.当给一个元素设置了display:flex;后，该容器就成为了弹性盒; 　　2.当容器设置了flex后，子元素的float、clear、vertical-align将会失效; 　　3.我们把设置display:flex;的元素称之为flex容器，把里面的子元素称为flex项目; 　　4.当给元素设置了flex布局后，随之产生两根轴线:主轴和交叉轴。 　　flex容器属性 　　1.设置主轴的方向 　　语法: flex-direction: row | row-reverse | column | colum-re...

1.使用弹性盒的方式实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下: html,body{ height: 100%; } body{ display: flex; juastify-content: center; align-items: center; } 2.使用弹性盒的方式实现不定宽高元素在父元素水平都垂直居中，方法如下: 父元素{ display: flex; justify-content: center; align-itens: center; }

　　1.order设置flex项目的排列顺序，值越小越靠前 　　2.align-self设置某个felx项目不同于其他flex项目的交叉轴对齐方式 　　语法: align-self: flex-start | flex-end | center | baseline | stretch; 　　3.flex-grow设置flex项目的放大比例 　　语法: flex-grow： 0; 　　默认值为0，即使存在剩余空间，也不放大; 　　当值为1是，flex项目等比例放大。 　　4.flex-shrink设置flex项目缩小比例 　　语法: flex-shrink: 1; 　　默认值为1，当flex容...

1.概念:写一套css样式可以同时适配多个终端，是为解决移动互联网诞生的。 　　2.作用:面对不同的分辨率设备灵活性强，能够快捷解决多设备显示适应问题 　　3.原理 媒体查询　　①外联式媒体查询语法 ...

　　语法: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 　　注:当多种变形方式综合在一起时，用空格隔开 　　1.rotate旋转(X/Y/Z必须为大写) 　　①rotateX(30deg)沿X轴翻转30deg等价于rotate3d(1,0,0,30deg) 　　3d空间的沿X轴翻转 　　②rotateY(30deg)沿Y轴翻转30deg等价于rotate3d(0,1,0,30deg) 　　3d空间的沿Y轴翻转 　　③rotateZ(30deg)沿Z轴翻转30deg等价于rotate3d(0,0,1,30deg) 　　3d空间的沿...