footer 相关问题

在编程中，页脚（或简称页脚）是页面的一部分，它与主体分离并出现在页面的底部。

我对 JS 很菜鸟，但我正在尽力学习。我添加了一些 JS 行以在 Wordpress 表单中添加功能。这是代码：我对 JS 很菜鸟，但我正在尽力学习。我添加了一些 JS 行以在 Wordpress 表单中添加功能。这是代码： <?php if ( ! defined( 'ABSPATH' ) ) { exit; } elseif ( defined( 'WP_CLI' ) && WP_CLI ) { return; } add_action( 'wp_footer', function(){ global $post; if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) { return; } ?> <style> .forminator-ui .wpmudev-option-limit .wpmudev-disabled{ color:#ddd!important; } .forminator-ui .wpmudev-option-limit .wpmudev-disabled span[aria-hidden]{ border-color: #ddd!important; background-color: #ddd!important; } </style> <script type="text/javascript"> ($=>{ const _forminator_restrict_multiple_fields = { form_ids: [10097], limit: { 'checkbox-1': 1, 'checkbox-2': 1, 'checkbox-3': 1, 'checkbox-4': 1, 'checkbox-5': 1, 'checkbox-6': 1, 'checkbox-7': 1, 'checkbox-8': 1, 'checkbox-9': 1, 'checkbox-10': 1, 'checkbox-11': 8, 'checkbox-12': 8, }, run : function( e, form_id ) { if( _forminator_restrict_multiple_fields.form_ids.indexOf( form_id ) === -1 ){ return; } let _form = $( "#forminator-module-" + form_id ); _form.find('.wpmudev-option-limit').each(function(){ let _field = $(this), checkbox_fields = _field.find( ":checkbox" ); if( checkbox_fields.length ){ checkbox_fields.on('change', function (e) { let _parent = $(this).closest('.wpmudev-option-limit'), _parent_id = _parent.attr('id'), _selected = _parent.find(':checkbox:checked').length; if( _parent_id in _forminator_restrict_multiple_fields.limit && _selected >= _forminator_restrict_multiple_fields.limit[ _parent_id ]){ // save latest value. _field.data('latest_value', $(this).val() ); // disable other options. _parent.find(':checkbox:not(:checked)').each(function(){ $(this).prop('disabled', true).parent().addClass('wpmudev-disabled'); }); }else{ _parent.find(':checkbox:disabled').each(function(){ $(this).prop('disabled', false).parent().removeClass('wpmudev-disabled'); }); _field.removeData('latest_value'); } }); } // auto remove previous value when riched the limit. $(this).on('click', '.wpmudev-disabled', function(){ let _latest_value = _field.data('latest_value') ; if( _latest_value ){ let _previous_opt = $(this).closest('.wpmudev-option-limit').find('input[value="'+ _latest_value +'"'); if( _previous_opt.length ){ _previous_opt.trigger('click'); $(this).removeClass('wpmudev-disabled').find('input:disabled').removeAttr('disabled'); } } }) }); } } $(document).ready(function(){ $.each(_forminator_restrict_multiple_fields.form_ids, function(i, _form_id){ _forminator_restrict_multiple_fields.run(this,_form_id); }); $(document).on( 'response.success.load.forminator', _forminator_restrict_multiple_fields.run ); }); })(jQuery); </script> add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 ); function wpmudev_limit_validation_checkbox() { global $post; if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) { return; } ?> <script type="text/javascript"> jQuery( document ).ready( function($){ setTimeout(function() { $('.forminator-custom-form').trigger('after.load.forminator'); },100); $(document).on('after.load.forminator', function(event, form_id) { $.validator.addMethod("min_selection", function (value, element) { let parent = $(element).closest('.wpmudev-checkbox-limit'); let selected = parent.find(':checkbox:checked').length; if ( selected == 8 ) { // Exact selection limit here. return true; } return false; },"Please select 8 options."); $( ".wpmudev-checkbox-limit input" ).attr( "min_selection", "min_selection" ); }); }); </script> <?php }, 999 ); 它运行良好，但部分代码在网站页脚下方可见，我真的不知道发生了什么。以下是可见的代码行： add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 ); function wpmudev_limit_validation_checkbox() { global $post; if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) { return; } ?> 我做错了什么？怎么解决？谢谢！您面临的问题似乎是由于代码直接回显到页脚中，这导致它在前端可见。要解决此问题，您应该将 PHP 代码包装在输出缓冲区中，然后返回输出。 add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 ); function wpmudev_limit_validation_checkbox() { ob_start(); // Start output buffering global $post; if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) { return; } ?> <script type="text/javascript"> jQuery( document ).ready( function($){ setTimeout(function() { $('.forminator-custom-form').trigger('after.load.forminator'); },100); $(document).on('after.load.forminator', function(event, form_id) { $.validator.addMethod("min_selection", function (value, element) { let parent = $(element).closest('.wpmudev-checkbox-limit'); let selected = parent.find(':checkbox:checked').length; if ( selected == 8 ) { // Exact selection limit here. return true; } return false; },"Please select 8 options."); $( ".wpmudev-checkbox-limit input" ).attr( "min_selection", "min_selection" ); }); }); </script> <?php // Return the buffered content echo ob_get_clean(); }

javascript wordpress forms footer

回答 1 投票 0

如何向静态 UITableView 添加页脚？

我有一个设置屏幕，我想在我的静态 UITableView 中添加一个页脚，其中包含应用程序的版本号：我读过很多关于 SO 的帖子，其中绝大多数似乎都是 Objectiv...

swift uitableview footer

回答 2 投票 0

聚焦文本字段时如何使页脚升到移动键盘上方

我需要一些关于网页中移动设备页脚放置的帮助。目前，我在 HTML 页面的底部有一个固定的页脚。然而，当我尝试将注意力集中在移动设备上的输入框时，

javascript html css footer

回答 3 投票 0

如何在运行脚本之前确保身体有高度

如果页面短于视口，我想在astro框架内执行此脚本来调整页脚在页面末尾的位置（如果有更好的方法请告诉我，但是...

javascript html css footer astrojs

回答 2 投票 0

如何在打印时在 IE 中以编程方式删除页眉和页脚，而不是使用 IE 页面设置？

internet-explorer printing installation header footer

回答 2 投票 0

页脚中的文档总页数计算不正确（Java）

晚上好我正在创建一个小程序来创建一批文档。在每个创建的文档的页脚中，我尝试反映当前页面的序号和总页数...

java file netbeans footer document

回答 1 投票 0

当“隐藏页脚”代码（不小心）放入页脚时，有没有办法在 Squarespace 中取消隐藏或编辑页脚？

我不小心将“隐藏页眉页脚 - 始终”代码粘贴到 Sqaurespace 网站的页脚中。现在，我无法编辑这些部分以将其删除，因此我的购物车无法访问。哈...

header footer display squarespace

回答 1 投票 0

使用 doraptor c# 在 PDF 中添加页眉和页脚图像

我正在使用 doraptor (https://docraptor.com/samples) 来创建 PDF，但我无法将图像作为页眉和页脚添加到生成的 PDF 中。我有下面的 Html，我正在使用 AJAX 来调用...

c# pdf header footer

回答 2 投票 0

造成放大效果，但悬停时不会同时放大图像和重叠页脚

当我将鼠标悬停在相应的 img 上时，我想在不同时放大 img 和重叠页脚的情况下产生放大效果。当我将鼠标悬停在相应的 img 上时，我想在不同时放大 img 和重叠页脚的情况下产生放大效果。 <body> <div class="site-wrapper"> <header class="header"> <a href="" class="logo">COMPAN<<</a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul class="menu"> <li><a href="#work">A</a></li> <li><a href="#about">B</a></li> <li><a href="#careers">C</a></li> </ul> </header> <div id="picture-container"> <div class="picture"> <img class = "bau-picture" src="https://allgemeinebauzeitung.de/media/_processed_/c/5/csm_peri-geruestbau-geruestbautechnik-naechste-generation-im-geruestbau-vereint-vorteile-von-rahmen-und-modul-45646-1_acfa19c3af.jpg" alt="Bild ist nicht verfügbar"> <div class="footer"><h5>A</h5></div> </div> <div class="picture"> <img class = "bau-picture" src="https://www.betriebsratspraxis24.de/wp-content/uploads/sites/52/2023/01/AdobeStock_283383067-1024x683.jpeg" alt="Bild ist nicht verfügbar"> <div class="footer">B</div> </div> </div> </div> </body> /* Allgemeine Stile */ * { padding: 0; margin: 0; font-family: "Anta", sans-serif; font-weight: 400; font-style: normal; box-sizing: border-box; } /* Body-Stile */ body { position: relative; } .site-wrapper { overflow-x: hidden; /* Verhindert horizontales Scrollen innerhalb dieses Containers */ width: 100%; /* Stellt sicher, dass der Container die gesamte Breite der Seite einnimmt */ } a { color: #000; } /* header */ .header { margin: auto; display: flex; flex-direction: row; margin-left: 2%; margin-right: 2%; z-index: 5; } .header ul { margin: 0; padding: 0 2%; list-style: none; overflow: hidden; background-color: #fff; } .header li a { display: block; padding: 20px 20px; border-right: 1px solid #f4f4f4; text-decoration: none; } .header li a:hover, .header .menu-btn:hover { background-color: #f4f4f4; } .header .logo { display: block; float: left; font-size: 2em; padding: 0.625rem 1.5rem; text-decoration: none; } /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; margin-left: auto; /* Neue Zeile hinzugefügt */ } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; position: absolute; /* Geändert von 'float: right;' zu 'position: absolute;' */ right: 0; /* Hinzugefügt, um das Icon rechts auszurichten */ padding: 28px; padding-left: 5%; -webkit-user-select: none; user-select: none; z-index: 1000; /* Stellen Sie sicher, dass das Menü über anderen Elementen liegt */ } .header .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .header .menu-icon .navicon:before { top: 5px; } .header .menu-icon .navicon:after { top: -5px; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked ~ .menu { max-height: 240px; } .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /* 48em = 768px */ @media (min-width: 48em) { .header li { float: left; } .header li a { padding: 20px 30px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } /* Bildcontainer-Stile */ #picture-container { margin: auto; display: flex; flex-direction: row; margin-left: 2%; /* Linker äußerer Abstand */ margin-right: 2%; /* Rechter äußerer Abstand */ /* padding-right: 2%;*/ z-index: 4; } /* Container-Stile */ .container { width: 100%; margin: auto; } /* Bild-Stile */ .picture { position: relative; display: flex; flex-direction: column; flex: 1; border: 1px solid; margin-right: 2%; margin-left: 2%; overflow: hidden; /* Verhindert, dass der Inhalt über den Container hinausgeht */ } /* Erster Fußbereich-Stile */ .footer:first-child { border-top: none; } /* Fußbereich-Stile */ .footer { border-top: 1px solid; padding: 20px; height: 8vh; display: flex; align-items: center; text-align: left; font-size: 4vh; background: #fff; } /* Media-Query-Stile */ /* Media Queries für Bildcontainer bei maximaler Breite von 1280px */ @media(max-width: 1280px) { .picture-container { width: calc(100% - 2 * 5%); margin-left: 5%; margin-right: 5%; overflow: hidden; } } /* Media Queries für Bildcontainer bei mindestens 1024px Breite */ @media(min-width: 1024px) { #picture-container { height: 85vh; overflow: hidden; } .picture img { width: 100%; height: 100%; object-fit: cover; /* Stellt sicher, dass das Bild den Container vollständig ausfüllt */ transition: transform 0.8s ease-in-out; /* Glatter Übergang beim Hovern */ } .picture:hover img { transform: scale(1.1); /* Vergrößert das Bild, ohne den Container zu vergrößern */ cursor: pointer; /* Ändert den Mauszeiger beim Hovern */ filter: brightness(60%); transform-origin: center center; /* Zentriert den Zoom */ } } 我尝试了不同的方法，例如溢出：隐藏等，但没有任何效果。问题是由我的 HTML 结构引起的吗？页脚不应与 img 重叠。我该怎么做才能解决这个问题？是的，如果你可以更改你的 HTML，你将很容易解决这样的问题：购买在 .one 类的图像上添加一个包装 div 并将该类设置为溢出：隐藏（我只在带有页脚 B 的图像上执行此操作以进行比较）。我还将页脚的高度设置为 10%，将类为 '.one' 的 div 的高度设置为 90%。 /* Allgemeine Stile */ * { padding: 0; margin: 0; font-family: "Anta", sans-serif; font-weight: 400; font-style: normal; box-sizing: border-box; } /* Body-Stile */ body { position: relative; } .site-wrapper { overflow-x: hidden; /* Verhindert horizontales Scrollen innerhalb dieses Containers */ width: 100%; /* Stellt sicher, dass der Container die gesamte Breite der Seite einnimmt */ } a { color: #000; } /* header */ .header { margin: auto; display: flex; flex-direction: row; margin-left: 2%; margin-right: 2%; z-index: 5; } .header ul { margin: 0; padding: 0 2%; list-style: none; overflow: hidden; background-color: #fff; } .header li a { display: block; padding: 20px 20px; border-right: 1px solid #f4f4f4; text-decoration: none; } .header li a:hover, .header .menu-btn:hover { background-color: #f4f4f4; } .header .logo { display: block; float: left; font-size: 2em; padding: 0.625rem 1.5rem; text-decoration: none; } /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; margin-left: auto; /* Neue Zeile hinzugefügt */ } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; position: absolute; /* Geändert von 'float: right;' zu 'position: absolute;' */ right: 0; /* Hinzugefügt, um das Icon rechts auszurichten */ padding: 28px; padding-left: 5%; -webkit-user-select: none; user-select: none; z-index: 1000; /* Stellen Sie sicher, dass das Menü über anderen Elementen liegt */ } .header .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .header .menu-icon .navicon:before { top: 5px; } .header .menu-icon .navicon:after { top: -5px; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked ~ .menu { max-height: 240px; } .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /* 48em = 768px */ @media (min-width: 48em) { .header li { float: left; } .header li a { padding: 20px 30px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } /* Bildcontainer-Stile */ #picture-container { margin: auto; display: flex; flex-direction: row; margin-left: 2%; /* Linker äußerer Abstand */ margin-right: 2%; /* Rechter äußerer Abstand */ /* padding-right: 2%;*/ z-index: 4; } /* Container-Stile */ .container { width: 100%; margin: auto; } /* Bild-Stile */ .picture { position: relative; display: flex; flex-direction: column; flex: 1; border: 1px solid; margin-right: 2%; margin-left: 2%; overflow: hidden; /* Verhindert, dass der Inhalt über den Container hinausgeht */ } /* Erster Fußbereich-Stile */ .footer:first-child { border-top: none; } /* Fußbereich-Stile */ .footer { border-top: 1px solid; padding: 20px; height: 10%; /* I set it to 10%*/ display: flex; align-items: center; text-align: left; font-size: 4vh; background: #fff; } /* Media-Query-Stile */ /* Media Queries für Bildcontainer bei maximaler Breite von 1280px */ @media(max-width: 1280px) { .picture-container { width: calc(100% - 2 * 5%); margin-left: 5%; margin-right: 5%; overflow: hidden; } } /* Media Queries für Bildcontainer bei mindestens 1024px Breite */ @media(min-width: 1024px) { #picture-container { height: 85vh; overflow: hidden; } .picture img { width: 100%; height: 100%; object-fit: cover; /* Stellt sicher, dass das Bild den Container vollständig ausfüllt */ transition: transform 0.8s ease-in-out; /* Glatter Übergang beim Hovern */ } .picture:hover img { transform: scale(1.1); /* Vergrößert das Bild, ohne den Container zu vergrößern */ /* height: auto; */ cursor: pointer; /* Ändert den Mauszeiger beim Hovern */ filter: brightness(60%); transform-origin: center center; /* Zentriert den Zoom */ } } .one{ height: 90%; width: 100%; overflow: hidden; } .beau-picture{ height: 100%; } <div class="site-wrapper"> <header class="header"> <a href="" class="logo">COMPANY</a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul class="menu"> <li><a href="#work">A</a></li> <li><a href="#about">B</a></li> <li><a href="#careers">C</a></li> </ul> </header> <div id="picture-container"> <div class="picture"> <img class = "bau-picture" src="https://picsum.photos/200/300" alt="Bild ist nicht verfügbar"> <div class="footer"><h5>A</h5></div> </div> <div class="picture"> <div class="one">  <img class = "bau-picture" src="https://picsum.photos/seed/picsum/200/300" alt="Bild ist nicht verfügbar"> </div> <div class="footer">B</div> </div> </div> </div> ）

html css image footer overlap

回答 1 投票 0

将图标徽标置于圆圈中心？

screenshot#代码在CodePen中是完美的，我在firfox或chrome中运行时出现这个问题。我用“行高”在“浏览器检查”中修复了它，但是当我在

html css icons contacts footer

回答 1 投票 0

Word - 如何将文本粘贴到页面底部

https://SURU.tinytake.com/sf/MTQxMTgzOV81MDc2MDI2 我想在页面底部粘贴一些文本，就像在屏幕上一样，总是在页脚之前。当有文本（来自合并字段）时，下一步...

text ms-word footer mergefield

回答 3 投票 0

如何在React中制作粘性页脚？

我制作了一个粘性页脚高级组件，将其他组件包装在其内部：页脚.js //这是一个高阶组件，它包装其他组件并将它们放置在页脚中变种风格...