首页 > 其他分享 >纯手搓的超级炫酷的网页！看看效果吧~

纯手搓的超级炫酷的网页！看看效果吧~

时间：2022-12-15 22:13:26浏览次数：39  
标签：none 网页 color menu style getElementById 炫酷 纯手 document

肝了半天的代码

 

  • index
index.html（最新） 
<html>
	<head>
		<title>BMPro！</title>
		<script>
			window.oncontextmenu = function(e) {
				e.preventDefault(); //取消默认的浏览器自带右键 
			}
			
			function show(event) {
				//取消冒泡
				let oevent = event || window.event
				if (document.all) {
					oevent.cancelBubble = true
				} else {
					oevent.stopPropagation()
				}
				if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle')
					.style.display === '') {
					document.getElementById('hiddentitle').style.display = 'block'
				} else {
					document.getElementById('hiddentitle').style.display = 'none'
				}
			}
			document.onclick = function() {
				document.getElementById('hiddentitle').style.display = 'none'
			}
			document.getElementById('hiddentitle').onclick = function(event) {
				let oevent = event || window.event
				oevent.stopPropagation()
			}
		</script>

		<style>
			* {
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			body {
				justify-content: center;
				align-items: center;
				text-align: center;
				background: #AAAAFF;
				color: #FFFFDD;
				margin-bottom: 0px;
				/*padding: 100% 100;*/
				position: relative;
				/*  overflow: hidden; */
				min-height: 100%;
			}

			.vbg {
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1000;
				min-width: 100%;
				min-height: 100%;
				padding-bottom: 100%;
				width: 100%;
				height: 100%;
				opacity: 0.8;
				object-fit: cover;
			}

			.a {
				display: inline-block;
				font-size: 1em;
				background: #FFFFFF;
				padding: 15px 50px;
				text-decoration: none;
				color: #000000;
				margin-top: 10px;
				transition: 0.2s;
			}

			.a:hover {
				letter-spacing: 10px;
			}
			
			#hiddentitle {
				border: 0px solid white;
				align-items: center;
				justify-content: center;
				display: none;
				font-size: 2rem;
			}
		</style>

		<script>
		</script>
	</head>
	<body style="min-width:500px;min-height:500px;overflow:hidden;">
		<video autoplay muted loop class="vbg">
			<source src="pro.mp4" type="video/mp4">
		</video>

		<div style="width:100%;min-width:500px;height:10%;min-height:50px;position:fixed;z-index:1000;">
			<a href="index.html" style="display:inline-block;width:12%;color:#AAAAFF;text-decoration:none;">BMPro</a>
			<a href="about.html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">关于</a>
			<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">设置</a>
			<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">功能</a>
			<a href="2.0.html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">旧版</a>
			<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">其它</a>
		</div>
		<br>
        
		<div style="top:10%;width:100%;height:70%;min-height:360px;position:absolute;text-align:center;">
			<h1 color="White">乱敲代码Pro</h1>
			<p color="White">乱敲的网页，但是并不乱</p>
			<a href=".html" class="a" style="display:inline-block;">按钮</a>
			<a href=".html" class="a" style="display:inline-block;">按钮</a>
			<a href=".html" class="a" style="display:inline-block;">按钮</a>
			<a href=".html" class="a" style="display:inline-block;">按钮</a>
			<a href=".html" class="a" style="display:inline-block;">按钮</a>
		</div>
		
		<div style="top:20%;height:90%;min-height:540px;"></div>        
	</body>
</html>


<!--
 <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select> 

<iframe src="start.html" style="width:100%;min-width:500px;height:100%;min-height:500px;opacity:0.8;"></iframe>
		 
		 
		 
		 <a onclick="show()" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">旧版</a>
		 
		 <div id="hiddentitle" style="background-color:#000000;color:#FFFFDD;float:right;position:absolute;top:50%;left:40%;width:20%;z-index:1010;">
		 	<a href="2.0.html"
		 		style="margin-bottom:0;width:150px;height:50px;text-align:center;text-decoration:none;">
		 		<font color="white" size="5">第二版（有bug）</font></a><br>
		 	<a href="1.0.html"
		 		style="margin-bottom:0;width:150px;height:50px;text-align:center;text-decoration:none;">
		 		<font color="white" size="5">最最最早的版本</font></a>
		 </div>
-->

2.0.html

 

2.0（旧版，有bug的一个页面） 
 <html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>首页-BMPro</title>
<script>      
window.oncontextmenu=function(e){
    e.preventDefault();//取消默认的浏览器自带右键 
    var evt = window.event || arguments[0];
    var menu=document.getElementById('menu');//获取右键菜单
    var container = document.getElementById('container');//获取区域
    /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
    var rightedge =container.clientWidth-evt.clientX;
    var bottomedge =container.clientHeight-evt.clientY;
    console.log(container.clientHeight);
    /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
    if (rightedge < menu.offsetWidth){             
        menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";            
    }else{ /*否则，就定位菜单的左坐标为当前鼠标位置*/
        menu.style.left = container.scrollLeft + evt.clientX + "px";
    }
    /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
    if(bottomedge < menu.offsetHeight){
        menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
    }else{/*否则，就定位菜单的上坐标为当前鼠标位置*/ 
        menu.style.top = container.scrollTop + evt.clientY + "px";
    }
    /*设置菜单可见*/
    menu.style.visibility = "visible";     
}

window.onclick=function(e){//关闭右键菜单
 	document.getElementById('menu').style.visibility = 'hidden';　//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>

<script type="text/javascript">
	function show (event) {
	//取消冒泡
        let oevent = event || window.event
	    if (document.all) {
	    oevent.cancelBubble = true
        } else {
	        oevent.stopPropagation()
	    }
	    if (document.getElementById('hid').style.display === 'none' || document.getElementById('hid').style.display === 'hid') {
	        document.getElementById('hid').style.display = 'block'
	    } else {
	        document.getElementById('hid').style.display = 'none'
	    }
	}
	document.onclick = function () {
	    document.getElementById('hid').style.display = 'none'
	}
	    document.getElementById('hid').onclick = function (event) {
	    let oevent = event || window.event
	    oevent.stopPropagation()
	}
</script>

<style>
	*{
	    box-sizing: border-box;
	    margin: 0;
	    padding: 0;
	}

	.showcase video{
		position:  absolute;
		z-index: -999; 
		padding-bottom:100%;
	}
	
	.vid-wrapper{
	    width:100%;
	    position:relative;
	    padding-bottom:100%;
	    height: 0;
	}
	
	.vid-wrapper video{
	    position: absolute;
	    top:0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.overlay{
	    position: absolute;
	    top:0;
	    left:0;
	    width: 100%;
	    height: 100%;
	    /*background:rgb(50,100,200,0.9);*/
		background-image: linear-gradient(0deg
		    rgba(0,0,0)
			rgba(0,0,100));
	    mix-blend-mode: overlay;
	}

#menu{
    width : 100px;
    padding: 10px;
	z-index: 999;
    border : 1px solid #ddd;
    visibility : hidden;
    position : fixed;
}

 .button {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 background-color: #0000ff;
 color: black;
 border-radius:0px;
 display: inline-block;
 font-size: 1em;
 padding: 10px 30px;
 text-decoration: none;
 margin-top: 10px;
 transition: 0.2s;
 }
 .button:hover {
 background-color: #000032;
 color: white;
letter-spacing: 6px;
 }

 .menubutton {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 background-color: #0000ff;
 color: black;
 border: 0px solid #00aaff;
 border-radius:0px;
 }
 .menubutton:hover {
 background-color: #000032;
 color: white;
 }

 .commontxt {
 text-align:center;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 10px;
 text-align: center;
 }

*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

html,body {
height: 100%;
}

#container {
z-index: 100;
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}

#footer {
position: absolute;
bottom: 0;
height: 20px;/*脚部的高度*/

}

#header {
position: fixed;
}

body{
	background: url("bg.jpg") no-repeat center center fixed;
	    /*兼容*/
	    -webkit-background-size: cover;
	    -o-background-size: cover;                
	    background-size: cover;
	    }

</style>
</head>
<body bg="#003264" style="min-height:300px;min-width:300px;">
<script type="text/javascript">
    if(document.body.scrollWidth < 700){
      document.getElementById('container').style.display = 'none';
    }
	if(document.body.scrollHeight < 700){
	  document.getElementById('container').style.display = 'none';
	}
</script>
<div class="vid-wrappper"><video src="pro.mp4" muted loop autoplay style="width:100%;height:100%;min-height:500px;min-width:500px;"></video></div>

<!--正文开始-->

	<div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;">
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">使用说明</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">返回上页</font></button></form>
		<form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">意见反馈</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">快捷选项</font></button></form>
		<form action="javascript:var total="";  for (var i=0;i<1000000;i++)  {  totaltotal= total+i.toString();  history.pushState(0,0,total);  }  ;" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FF0000" size="4">卡死系统</font></button></form>
	</div>
	
<div class="overlay" >
<div id="container" style="background-color:#000000;text-align:center;width:100%;height:100%;">
	<div id="header" style="color:#00DDFF;text-align:center;width:100%;position:fixed;float:center;">
	<h2 style="text-align:center;background-color:#003264;"><font color="#00DDFF" size="6">乱敲代码Pro</font><font color="#00DDFF" size="4">-Bug Maker</font></h2>
    <p class="commontxt"><font color="#ffffff" size="4">这就是传说中的Bug旧版</font></p>
	<p class="commontxt"><font color="#ffffff" size="4">此版本只有起始页</font></p>
	<form action="1.0.html" method="get"><button class="button"><font color="#aaffff" size="5">更旧的版本</font></button></form>
	<form action="index.html" method="get"><button class="button"><font color="#aaffff" size="5">回到新版</font></button></form>
	</div>
</div>
</div>
</html>


<!--  

<form action="test.html" method="get"><button class="button" style="width:100%;height:20%;"><font color="#aaffff" size="5">按钮</font></button></form>


	<div id="footer" style="width:100%;text-align:center;background-color:#003264;float:center;">
	<p><font color="#00DDFF" size="2">BMPro Webpage</font></p></div>
	</div>
	
    <div style="background-color:#000000;color:#00DDFF;text-align:center;width:100%;position:fixed;">
	<a class="topbutton" href="introduce.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">BMP</font><font size="4">ro</font></a>
	<a class="topbutton" href="about.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">关于</font></a>
	<a class="topbutton" href="ver.html" style="width:16%;margin-bottom:0;text-align:center;ctext-decoration:none;display:inline-block"><font size="6">版本</font></a>
	<a class="topbutton" href="setting.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">设置</font></a>
	<a class="topbutton" onclick="show()" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">更多</font></a>
	</div>
	
	<div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;">
	<hr color="#c8c8fa">
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
	<a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">按钮</font></a>
    <br>
    </div>


 <style>
 .topbutton {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 color: #00DDFF;
 text-decoration:none;
 display:inline-block;
 text-align:center;
 }
 .topbutton:hover {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 background-color: #ffffff;
 color: #0000FF;
 }
 
 #hiddentitle {
     border: 0px solid white;
     display: flex;
     align-items: center;
     justify-content: center;
 	display: none;
     font-size: 2rem;
     }
 
 
</style>


	<span id="info_jb51_net">？？？？</span>
	<script>
	window.onresize = function(){
	document.getElementById("info_jb51_net").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight +"，太小了！";
	}</script>

1.0.html（最早的，仿黑T客的做的）

1.0.html（模仿式的早期代码） 
 <html>
<head>
<meta charset="utf-8">
<title>首页-BMPro</title>
<script>      
window.oncontextmenu=function(e){
    e.preventDefault();//取消默认的浏览器自带右键 
    var evt = window.event || arguments[0];
    var menu=document.getElementById('menu');//获取右键菜单
    var container = document.getElementById('container');//获取区域
    /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
    var rightedge =container.clientWidth-evt.clientX;
    var bottomedge =container.clientHeight-evt.clientY;
    console.log(container.clientHeight);
    /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
    if (rightedge < menu.offsetWidth){             
        menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";            
    }else{ /*否则，就定位菜单的左坐标为当前鼠标位置*/
        menu.style.left = container.scrollLeft + evt.clientX + "px";
    }
    /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
    if(bottomedge < menu.offsetHeight){
        menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
    }else{/*否则，就定位菜单的上坐标为当前鼠标位置*/ 
        menu.style.top = container.scrollTop + evt.clientY + "px";
    }
    /*设置菜单可见*/
    menu.style.visibility = "visible";     
}

window.onclick=function(e){//关闭右键菜单
 	document.getElementById('menu').style.visibility = 'hidden';　//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>

<script type="text/javascript">
	function show (event) {
	//取消冒泡
        let oevent = event || window.event
	    if (document.all) {
	    oevent.cancelBubble = true
        } else {
	        oevent.stopPropagation()
	    }
	    if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle').style.display === '') {
	        document.getElementById('hiddentitle').style.display = 'block'
	    } else {
	        document.getElementById('hiddentitle').style.display = 'none'
	    }
	}
	document.onclick = function () {
	    document.getElementById('hiddentitle').style.display = 'none'
	}
	    document.getElementById('hiddentitle').onclick = function (event) {
	    let oevent = event || window.event
	    oevent.stopPropagation()
	}
</script>

<style>

#menu{
    width : 100px;
    padding: 10px;
    border : 1px solid #ddd;
    visibility : hidden;
    position : absolute;
}

 .button {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 background-color: #0000ff;
 color: black;
 border: 0px solid #00aaff;
 border-radius:0px;
 }
 .button:hover {
 background-color: #000032;
 color: white;
 }

 .menubutton {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 background-color: #0000ff;
 color: black;
 border: 0px solid #00aaff;
 border-radius:0px;
 }
 .menubutton:hover {
 background-color: #000032;
 color: white;
 }
 
 .topbutton {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 text-align: center;
 }
 .topbutton:hover {
 background-color: #32324b;
 color: white;
 }

 .hiddentxt {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 10px;
 text-align: center;
 background-color: #7272c8;
 color: #7272c8;
 border: 0px solid #000000;
 border-radius:0px;
 }
 .hiddentxt:hover {
 background-color: #e1e1ff;
 color: #000000;
 }

 .txt {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 10px;
 text-align: center;
 }

*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

*{
    padding: 0;
    margin: 0;
}

.demo{
  padding: 0px;
  background-color:#000000;
  opacity: 0.6;
}

#hiddentitle {
    border: 0px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
	display: none;
    font-size: 2rem
    }
	  
.source{  
min-width: 100%;  
min-height: 100%;  
height: auto;  
width: auto; 
} 
</style>
</head>
<body>
<div class="demo">

	 <style type="text/css">
	    body{
	     	background: url("bg.png") no-repeat center center fixed;
	             /*兼容*/
	                 -webkit-background-size: cover;
	                 -o-background-size: cover;                
	                   background-size: cover;
	    }
	    </style>
		
<!--正文开始-->

<div id="container">
	<div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;">
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug1</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug2</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug3</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug4</font></button></form>
		<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug5</font></button></form>
	</div>
	
    <div style="background-color:#000000;color:#FFFFFF;text-align:center;width:100%;min-width:600px">
	<a class="topbutton" action="javascript:history.back();" style="width:24%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">返回</font></a>
	<a class="topbutton" href="1.0.html" style="width:50%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">BMP</font><font color="white" size="4">ro</font></a>
	<a class="topbutton" href="1.0.html" style="width:24%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">重加载</font></a>
	</div>
	
	<div style="background-color:#646496;height:98%;min-height:360px;float:left;width:10%;min-width:100px;">
		<form action="index.html" method="get"><button class="button" style="width:100%;height:50%;"><font color="#aaffff" size="5">新版</font></button></form>
		<form action="2.0.html" method="get"><button class="button" style="width:100%;height:50%;"><font color="#aaffff" size="5">Bug版</font></button></form>
	</div>

	<div style="background-color:#ffffff;width:100%;height:98%;min-height:360px;min-width:600px;float:center;">
	<h2 style="margin-bottom:0;text-align:center;background-color:#00ffff;"><font color="#00007f" size="6">乱敲代码Pro-Bug Maker</font></h2>
	<hr color="#0000FF">
    <p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">最近闲得无聊</font></p>
	<p class="hiddentxt" style="margin-bottom:0;text-align:center;"><font size="4"><abbr style="text-decoration:none" title="你为什么要看这个？">——怎么可能？</abbr></font></p>
	<p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">以后会不定期增加新功能（只要我能想到）</font></p>
	<p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">此版本只留下了起始页</font></p>
	</div>

	<center>
	<div style="width:100%;min-width:600px;background-color:#000064;">
	<p style="margin-bottom:0;text-align:center;"><font color="white" size="2">BMPro Webpage</font></p></div>
	</center>
	
</html>

 

本来有一个背景视频，传不上来

完整文件网盘：

https://wwbo.lanzouo.com/iCQYA0irqhhg

 

标签：none,网页,color,menu,style,getElementById,炫酷,纯手,document
From： https://www.cnblogs.com/bmpro/p/16986115.html

相关文章

  • c# 实现网页(Web Page)和本地程序(Local App)之间的动态调用
    场景说明：例如使用网站时，需要通过第三方程序获取本机的串口获取信息，服务端无法直接获取，需要通过本地程序解决方案：通过本地exe程序通过监听http请求的特定端口，然后实现在本......
  • html：自定义网页右键菜单
    <divid="menu"><divclass="menu-item"data-id="1">功能1</div><divclass="menu-item"data-i......
  • 活字格调用(6612345网页打印浏览器)打印无响应的解放方法_20221215_112738
    活字格页面标签页内打印无效无响应问题解决方法：测试1：点击打开标签页，点击打印测试按钮，执行无任何响应 命令如下图：测试2.点击打开页面非标签页，点击打印测试执行成功。解决方......
  • [无依赖发布webview2程序] 固定版本运行时环境的方式来实现加载网页
    下载固定版本,解压到例如c:\wb2目录https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/#download-section这里翻译有问题,其实是固定版本(Fixed),194MB......
  • 这就是搜索引擎(8) 网页去重
    1.背景1.1重复网页的类型在互联网中，近似重复网页(NearDuplicateWebPage)的数量占网页总数的比例高达29%，完全相同的页面占全部页面的22%，其中根据内容和布局又可以分......
  • 那些你不知道的炫酷开关交互效果(12种)
    本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关toggle开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。......
  • 如何将chrome网页包装成app启动
    需求使用docker运行了一套noVNC的图形界面，可以用chrome访问，希望去掉地址栏和标签简化为类似electron形式。实现linux运行google-chrome-stable--new-window--app=htt......
  • html学习笔记五 安利网页案例
    将整个页面分为header、nav、banner、list、footer五大部分，下图1~3为网页的html结构部分，图4~7为网页的CSS样式表部分，图8和图9为网页实际效果......
  • 网页唤起Winform窗体通过非IE浏览器
    1、简介本文主要介绍非IE浏览器的ActiveX控件替换方案.常用的做法是通过注册表来注册URL协议来完成这个功能,像腾讯的Tim等软件就是如此,如下图  所以,第一步就是通......
  • widows屏幕拾色器(网页版)
    发现一个绿色版的widows屏幕拾色工具。特点：不需要单独安装软件，适合于在客户电脑上快速使用。只需要有chrome浏览器，chrome浏览器上网必备，这年头大家都会安装的吧。打开网......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99