SimpleNoviceGuide实现新手引导教学图层效果代码
代码语言:html
所属分类:弹出层
代码描述:SimpleNoviceGuide实现新手引导教学图层效果代码
代码标签: SimpleNoviceGuide 新手 引导 教学 图层
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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"> <style> body { overflow: hidden; } #box { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; padding: 20px; } #box0 { width: 500px; height: 300px; border: 2px solid navajowhite; margin-bottom: 20px; } #box1 { width: 1000px; height: 1000px; border: 2px solid aqua; margin-bottom: 20px; } #box2 { width: 1000px; height: 500px; overflow: auto; border: 2px solid blueviolet; padding: 20px; } #box3 { width: 90%; height: 1000px; margin: 0 auto; margin-bottom: 20px; margin-top: 300px; border: 2px solid darkviolet; } #box4 { width: 90%; height: 200px; margin: 0 auto; border: 2px solid coral; } #box5 { width: 90%; height: 400px; margin: 0 auto; border: 2px solid lime; } #box6 { width: 200px; height: 400px; position: fixed; right: 20px; top: 20px; border: 2px solid salmon; } #box7 { width: 90%; height: 400px; border: 2px solid darkgreen; overflow: auto; } #box8 { width: 90%; height: 500px; border: 2px solid tomato; } #box9 { width: 90%; height: 100px; border: 2px solid lightseagreen; } #start { position: fixed; left: 50%; top: 50px; transform: translateX(-50%); } .customInfoBox { position: absolute; z-index: 99999; display: none; background-color: #fff; padding: 100px; border-radius: 5px; } .customInfoTitle { margin-bottom: 10px; } </style> </head> <body> <div id="box"> <div id="box0"></div> <div id="box1"></div> <div id="box2"> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> <div id="box7"> <div id="box8"></div> <div id="box9"></div> </div> </div> <div id="box6"></div> <button id="start">开始</button> </div> <div class="customInfoBox"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0