CSS13. 定位 - fixed - 广告
描述
固定定位不仅可以用于导航栏目，还可以用于控制中心、广告、重要提示内容等。本节使用固定定位实现一个广告牌功能，关闭按钮和该按钮的功能已给出，当点击按钮时，广告牌会消失。现在给类名为"advert"的盒子设置固定定位属性"position: fixed"、设置"right: 0"、设置"bottom: 0"，此时广告牌的位置被固定在了视口的右下方。现在还需要将关闭按钮定位在广告牌的右上方，继续给类名为"x"的按钮盒子设置绝对定位属性"position: absolute"、设置"right: 0"，观察按钮的位置，已经被定位在了广告牌的右上方。一个简易的广告牌就设计完成了。HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77820KB, 提交时间: 2022-02-20
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .advert {\n width: 300px;\n height: 200px;\n background-color: black;\n position:fixed;\n right:0;\n bottom:0;\n \n }\n .advert:first-line {\n color: white;\n }\n .x{\n position:absolute;\n right:0;\n }\n </style>\n </head>\n <body>\n \t<section class=\"advert\">\n 广告文案\n <button class=\"x\">x</button>\n </section>\n\n <script>\n document.querySelector('button').onclick = function() {\n this.parentNode.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77816KB, 提交时间: 2022-01-04
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .advert {\n width: 300px;\n height: 200px;\n background-color: black;\n position:fixed;\n right:0px;\n bottom:0px;\n }\n .x{\n position:absolute;\n right:0px;\n \n }\n .advert:first-line {\n color: white;\n }\n </style>\n </head>\n <body>\n \t<section class=\"advert\">\n 广告文案\n <button class=\"x\">x</button>\n </section>\n\n <script>\n document.querySelector('button').onclick = function() {\n this.parentNode.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77808KB, 提交时间: 2022-01-27
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .advert {\n position: fixed;\n right: 0;\n bottom: 0;\n width: 300px;\n height: 200px;\n background-color: black;\n }\n .advert:first-line {\n color: white;\n }\n .x {\n position: absolute;\n top: 0;\n right: 0;\n }\n </style>\n </head>\n <body>\n \t<section class=\"advert\">\n 广告文案\n <button class=\"x\">x</button>\n </section>\n\n <script>\n document.querySelector('button').onclick = function() {\n this.parentNode.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1752ms, 内存消耗: 77772KB, 提交时间: 2022-01-25
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .advert {\n position:fixed;\n right:0px;\n bottom:0px;\n \n width: 300px;\n height: 200px;\n background-color: black;\n }\n .advert:first-line {\n color: white;\n }\n .x{\n position:absolute;\n top:0px;\n right:0px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"advert\">\n 广告文案\n <button class=\"x\">x</button>\n </section>\n\n <script>\n document.querySelector('button').onclick = function() {\n this.parentNode.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1752ms, 内存消耗: 77772KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .advert {\n width: 300px;\n height: 200px;\n background-color: black;\n position: fixed;\n right: 0;\n bottom: 0;\n }\n .advert:first-line {\n color: white;\n }\n .x{\n position: absolute;\n right: 0;\n border: none;\n padding : 0.3rem;\n color: white;\n background-color: rgb(255,255,255,0);\n }\n \n \n </style>\n </head>\n <body>\n \t<section class=\"advert\">\n 广告文案\n <button class=\"x\">x</button>\n </section>\n\n <script>\n document.querySelector('button').onclick = function() {\n this.parentNode.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}