在编程中,页脚(或简称页脚)是页面的一部分,它与主体分离并出现在页面的底部。
<?php /** * Footer class for Header Footer Grid. * * Name: Header Footer Grid * Author: Bogdan Preda <[email protected]> * * @version 1.0.0 * @package HFG */ namespace HFG\Core\Builder; use HFG\Main; use Neve\Core\Theme_Info; /** * Class Footer * * @package HFG\Core\Builder */ class Footer extends Abstract_Builder { use Theme_Info; /** * Builder name. */ const BUILDER_NAME = 'footer'; /** * Footer constructor. * * @since 1.0.0 * @access public */ public function init() { $this->set_property( 'title', __( 'Footer', 'neve' ) ); $this->set_property( 'columns_layout', true ); $this->set_property( 'description', apply_filters( 'hfg_footer_panel_description', sprintf( /* translators: %s link to documentation */ esc_html__( 'Design your %1$s by dragging, dropping and resizing all the elements in real-time. %2$s.', 'neve' ), /* translators: %s builder type */ $this->get_property( 'title' ), /* translators: %s link text */ sprintf( '<br/><a target="_blank" rel="external noopener noreferrer" href="https://docs.themeisle.com/article/946-neve-doc#footer-builder"><span class="screen-reader-text">%s</span><svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" viewBox="0 0 512 512" width="12" height="12" style="margin-right: 5px;"><path fill="currentColor" d="M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.4 0-32 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z"/></svg>%s</a>', esc_html__( '(opens in a new tab)', 'neve' ), esc_html__( 'Read full documentation', 'neve' ) ) ) ) ); $this->set_property( 'instructions_array', array( 'description' => sprintf( /* translators: 1: builder, 2: builder symbol */ esc_attr__( 'Welcome to the %1$s builder! Click the %2$s button to add a new component or follow the Quick Links.', 'neve' ), $this->get_property( 'title' ), '+' ), 'quickLinks' => array( 'footer_copyright_content' => array( 'label' => esc_html__( 'Change Copyright', 'neve' ), 'icon' => 'dashicons-nametag', 'url' => $this->has_valid_addons() ? null : tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'copyright' ), ), 'hfg_footer_layout_bottom_background' => array( 'label' => esc_html__( 'Change Footer Color', 'neve' ), 'icon' => 'dashicons-admin-appearance', ), ), ) ); $this->devices = [ 'desktop' => __( 'Footer', 'neve' ), ]; /** * Fix legacy search widget display in footer * Only applies for versions < 5.8 */ add_filter( 'dynamic_sidebar_params', function ( $params ) { $processed_params = []; $has_legacy_search_style = apply_filters( 'neve_has_legacy_search_style_filter', false ); foreach ( $params as $param ) { if ( isset( $param['before_widget'] ) && strpos( $param['before_widget'], 'widget_search' ) !== false && $has_legacy_search_style === false ) { $param['before_widget'] = '<style type="text/css">.widget_search .search-form .search-submit, .widget_search .search-form .search-field { height: auto; }</style>' . $param['before_widget']; add_filter( 'neve_has_legacy_search_style_filter', '__return_true' ); } array_push( $processed_params, $param ); } return $processed_params; } ); add_action( 'neve_after_slot_component', [ $this, 'add_footer_component' ], 10, 3 ); } /** * Add footer component. * * @param string $builder Builder slug. * @param string $row Row slug. * @param string $slot Slot name. * * @return void */ public function add_footer_component( $builder, $row, $slot ) { if ( $this->has_valid_addons() ) { return; } if ( $builder !== self::BUILDER_NAME ) { return; } if ( $row !== 'bottom' ) { return; } if ( $slot !== 'left' ) { return; } $output = '<div class="builder-item"><div class="item--inner"><div class="component-wrap"><div>'; $output .= sprintf( /* translators: %1$s is Theme Name ( Neve ), %2$s is WordPress */ esc_html__( '%1$s | Powered by %2$s', 'neve' ), wp_kses_post( '<p><a href="https://themeisle.com/themes/neve/" rel="nofollow">Neve</a>' ), wp_kses_post( '<a href="http://wordpress.org" rel="nofollow">WordPress</a></p>' ) ); $output .= '</div></div></div></div>'; echo wp_kses_post( $output ); } /** * Method called via hook. * * @since 1.0.0 * @access public */ public function load_template() { Main::get_instance()->load( 'footer-wrapper' ); } /** * Render builder row. * * @param string $device_id The device id. * @param string $row_id The row id. * @param array $row_details Row data. */ public function render_row( $device_id, $row_id, $row_details ) { Main::get_instance()->load( 'footer-row-wrapper' ); } /** * Get builder id. * * @return string Builder id. */ public function get_id() { return self::BUILDER_NAME; } /** * Overrides parent method to limit rows. * * @return array * @since 1.0.0 * @access protected */ protected function get_rows() { if ( neve_is_new_builder() ) { return [ 'top' => array( 'title' => __( 'Footer Top', 'neve' ), 'description' => $this->get_property( 'description' ), ), 'main' => array( 'title' => __( 'Footer Main', 'neve' ), 'description' => $this->get_property( 'description' ), ), 'bottom' => array( 'title' => __( 'Footer Bottom', 'neve' ), 'description' => $this->get_property( 'description' ), ), ]; } return [ 'top' => array( 'title' => __( 'Footer Top', 'neve' ), 'description' => $this->get_property( 'description' ), ), 'bottom' => array( 'title' => __( 'Footer Bottom', 'neve' ), 'description' => $this->get_property( 'description' ), ), ]; } }
我看到有关创建PHP文件以重复使用标头/页脚的多个答案,但没有足够具体的答案。 我似乎无法使它工作。 PHP文件到底是什么样的?
如何在灵活的容器中添加可滚动的ListView,以便页脚适应其位置?
我试图通过将页脚保留在容器正下方而不是页面底部来使 ListView 容器适应内容: 许多图块:ListView 将是可滚动的,并且 f...
在Flutter中,如何在灵活的容器中添加可滚动的ListView,以便页脚适应其位置?
我试图通过将页脚保留在容器正下方而不是底部来使 ListView 容器适应内容: 许多图块:ListView 将是可滚动的并且页脚位于...
我目前在网站的页脚中有标题标签。 这是因为标题是动态的,如果我将它放在头部,那么它是空白的,因为标题内容直到正文才会加载......
如何在JavaFx TableView中添加TableView页脚
我对如何在 JavaFX TableView 中添加表页脚或列页脚感到困惑。我希望添加一个 TableView,它将在列和总项目中显示购买的项目的数量和销售价格
将 SharePoint 模板实例的用户名添加到 Excel 工作簿的页眉/页脚
我在这里和其他论坛上看到了一些其他类似的问题,但这个确切的问题尚未得到具体解决。我需要将用户名放在 Excel 工作表的页脚中。这是n...
我正在使用 PHPv8 和 TCPDF v6.3.0。 我在每个页面上都打印了一个 HTML 页脚(基本上现在只是一个图像)。 在最后一页,它按照我想要的方式打印。然而...
使用 PHP8 的 TCPD - 除最后一页外所有页面的页脚都不同的问题
我正在使用 PHPv8 和 TCPDF v6.3.0。 我在每个页面上都打印了一个 HTML 页脚(基本上现在只是一个图像)。 在最后一页,它按照我想要的方式打印。然而...
所以我正在为学校做一个项目,编写一个网站。我有一个充当导航栏的标题部分,一个充当浮动块的 main_body 部分,其中包含所有信息,还有...
如何防止平面列表页眉或页脚在reactnative中重新渲染
我在平面列表的页脚中放置了一个输入字段,但是当我尝试输入任何内容时,由于平面列表页脚的重新渲染,它会自动关闭键盘。 我尝试嵌套平面列表...
这是我在网站页脚部分使用的浮动购物车的一行代码: 这是我在网站页脚部分使用的浮动购物车的一行代码: <a href=\"https://ww6.aitsafe.com/cf/review.cfm?userid=85247813&return=https://farragio.com/collection/\"_target_ >VIEW CART</a> 我希望“查看购物车”为粗体并采用特定的字体颜色。如果我像下面这样编写它,当我在 HTML 编辑器上尝试它时它会起作用,但是当我将它添加回我网站上的代码时,它会使购物车从网站上消失: <a href=\"https://ww6.aitsafe.com/cf/review.cfm?userid=85247813&return=https://farragio.com/collection/\"_target_ style="font-weight:bold; color:#cb8f42;">VIEW CART</a> 如果我添加反斜杠,它会重新出现在网站上,但字体会恢复为原始状态,就好像字体提示不存在一样: <a href=\"https://ww6.aitsafe.com/cf/review.cfm?userid=85247813&return=https://farragio.com/collection/\"_target_ style=\"font-weight:bold; color:#cb8f42;\">VIEW CART</a> 有没有办法编写它,以便字体发生变化并且购物车在我的网站上保持可见? 您可能没有删除所有反斜杠,并且没有任何称为“target”的内容,我们有“target =”_blank',它会为链接打开一个新选项卡。所以,它是: <a href="https://ww6.aitsafe.com/cf/review.cfm? target="_blank" userid=85247813&return=https://farragio.com/collection/" style="font-weight:bold; color:#cb8f42;">VIEW CART</a>
我知道这是一个简单的问题,但我的容器的高度远小于其中的内容,所以它停在页面的中间,其余部分溢出所以我的页脚就像h... 我知道这是一个简单的问题,但我的容器的高度远小于其中的内容,因此它停在页面的中间,其余部分溢出所以我的页脚位于页面的中间,我不明白为什么。 我只是希望容器的高度扩展以包含其所有内容,以便页脚保持在其下方并且不重叠,没有滚动条或隐藏内容。我查看了大量的答案并尝试了所有方法,但这是我所做的特定事情,我刚刚开始学习这个,所以我不知道出了什么问题,有人可以帮忙吗? 所有浏览器均如此 主+页脚 <html> <body> <main> <div id="hero-section"> <div class="top-txt"> <h1 class="page-title">STORE CO.</h1> <h2>Shop for electronics.</h2> </div> <a href=""> <img src="header-img.jpg" alt="Main Image"> </a> </div> <div class="main-content"> <!--main content--> <div class="main-grid" id="home-grid"><!--main grid--> <div class="main-block" id="bs-block"> <h1>BESTSELLERS</h1> <div class="row" id="bestseller-imgs"> <div class="col"> <a href=""><img src="bestseller-1.jpg" alt="Product 1"> <p>Product 1</p> </a> </div> <div class="col"> <a href=""><img src="bestseller-2.jpg" alt="Product 2"> <p>Product 2</p> </a> </div> <div class="col"> <a href=""><img src="bestseller-3.jpg" alt="Product 3"> <p>Product 3</p> </a> </div> </div> </div> <div class="main-block cta-block" id="cta-block-1"> <h2>View our entire catalogue</h2> <a href="" class="cta-btn">Products</a> </div> <div class="main-block" id="cate-block"> <h1>CATEGORIES</h1> <ul class="cate-grid"> <li> <div class="category"> <a href=""><img class="cate-img" src="music-equipment.jpg" alt="Category Image 1"> <p class="cate-img-desc">Audio</p> </a> </div> </li> <li> <div class="category"> <a href=""><img class="cate-img" src="mobile-phone.jpg" alt="Category Image 2"> <p class="cate-img-desc">Mobile</p> </a> </div> </li> <li> <div class="category"> <a href=""><img class="cate-img" src="computer.jpg" alt="Category Image 3"> <p class="cate-img-desc">Computers</p> </a> </div> </li> <li> <div class="category"> <a href=""><img class="cate-img" src="home-tv.jpg" alt="Category Image 4"> <p class="cate-img-desc">Home</p> </a> </div> </li> <li> <div class="category"> <a href=""><img class="cate-img" src="equipment.jpg" alt="Category Image 5"> <p class="cate-img-desc">Equipment</p> </a> </div> </li> <li> <div class="category"> <a href=""><img class="cate-img" src="camera.jpg" alt="Category Image 6"> <p class="cate-img-desc">Photography</p> </a> </div> </li> </ul> </div> <div class="main-block info-block border-block" id="info-block-1"> <div class="row info-row"> <div class="col"> <img src="cta1.jpg" alt="Broken Electronics"> </div> <div class="col info-text"> <h1>Need repairs?</h1> <h2>You can contact our support team with any questions.</h2> <a href="" class="cta-btn">Support</a> </div> </div> </div> <div class="main-block cta-block" id="cta-block-2"> <h2>Learn more about us</h2> <a href="about-us.php" class="cta-btn">About Us</a> </div> <div class="main-block info-block border-block" id="info-block-2"> <div class="row-rev info-row"> <div class="col"> <img src="cta2.jpg" alt="New Product"> </div> <div class="col info-text"> <h1>On a budget?</h1> <h2>See our discounted items.</h2> <a href="" class="cta-btn">Sales</a> </div> </div> </div> <div class="main-block" id="review-block"> <div class="row"> <div class="col info-text" id="review-text"> <h1>Over 5,000 reviews</h1> <h2>Read thousands of real reviews.</h2> <a href="" class="cta-btn">Explore</a> </div> <div class="col" id="rvw-img"> <img src="review.jpg" alt="Review Image"> </div> <div class="col" id="rvw-txt"> <h2>"The quality was so amazing, I was shocked at the price."</h2> </div> </div> </div> <div class="main-block cta-block" id="cta-block-3"> <h2>Browse hundreds of products.</h2> <p>Click below to start.</p> <a href="" class="cta-btn">Catalogue</a> </div> </div><!--main grid end--> </div><!--main content end--> </main> <footer> <div class="footer-top"> <div id="logo-f"><i class="fa-solid fa-circle-notch"></i></div> <div class="row"> <div class="col"><a href="">My Account</a></div> <div class="col"><a href="">Online Ordering</a></div> <div class="col"><a href="">Find Stores</a></div> <div class="col"><a href="">FAQs</a></div> </div> <div class="row"> <div class="col"><a href="">Order Status</a></div> <div class="col"><a href="">Shipping</a></div> <div class="col"><a href="">Customer Service</a></div> <div class="col"><a href="about-us.php">About Us</a></div> </div> <div class="row"> <div class="col"><a href="">Membership</a></div> <div class="col"><a href="">Billing</a></div> <div class="col"></div> <div class="col"><a href="">Contact Us</a></div> </div> </div> <hr> <div class="footer-bottom"> <ul class="footer-bottom-left"> <li><a href="">Terms & Conditions</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">Copyright</a></li> </ul> <ul class="footer-bottom-right"> <li><a href=""><i class="fa-brands fa-twitter"></i></a></li> <li><a href=""><i class="fa-brands fa-facebook"></i></a></li> <li><a href=""><i class="fa-brands fa-youtube"></i></a></li> <li><a href=""><i class="fa-brands fa-instagram"></i></a></li> <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li> </ul> </div> </footer> </body> </html> 和CSS html, body{ margin:0; padding:0px; } a{ text-decoration: none; } body{ color: #222; font-size:18px; background-color: rgb(200, 200, 200); font-family:"Lato", sans-serif; background-color: white; display:flex; flex-direction: column; } #home-page-header{ background-color: #ccc; } main{ } footer{ background-color: white; padding-right: 4%; padding-left: 4%; padding-bottom:100px; bottom:0; margin-top:auto; } footer a{ font-weight:bold; color:#222; } footer a:hover{ opacity:0.75; } footer i{ font-size:25px; } footer #logo-f{ margin-bottom:20px; } .footer-top .row{ gap:20px; } .footer-top .row .col{ margin-bottom:10px; } footer hr{ border-style: dotted none none; border-width: 3px; border-color: #8f8f8f; margin-top:40px; margin-bottom:40px; } .footer-bottom{ display:flex; font-weight:normal; font-size:16px; justify-content: space-between; } .footer-bottom li{ display:inline-block; list-style-type: none; margin-right:25px; } /*top of page*/ .top-txt{ margin:0; padding-bottom:4%; } .top-txt h2{ margin:0; text-align: center; font-size:2vw; } /*hero image*/ #hero-section{ background-color:#ccc; padding-bottom: 4%; } .page-title{ margin:0; text-align:center; font-size:8vw; padding-top:5%; padding-bottom:1% } #hero-section img{ width:75%; display:block; margin:auto; border-radius:10px; } /*main blocks*/ .main-content{ margin-left:3%; margin-right:3%; padding-top:5%; padding-bottom:5%; } .main-grid{ display: grid; align-items: center; grid-gap:5%; } #home-grid{ grid-template-areas: "bsb" "cta1" "cate" "ib1" "cta2" "ib2" "rvb" "cta3"; } /*bs*/ #bs-block{ grid-area:bsb; } #bs-block h1{ text-align:center; font-size: 4vw; } #bestseller-imgs img{ width:96%; border-radius:10px; display:block; align-items: center; margin:auto; transition: all 0.2s ease; } #bestseller-imgs p{ padding-left:5%; color: #222; font-size:25px; font-weight:bold; text-decoration: underline 1px; text-underline-offset:10px; } #bestseller-imgs img:hover{ filter: brightness(70%) } #bestseller-imgs p:hover{ text-decoration: underline 2px; } /*categories*/ #cate-block{ grid-area:cate } #cate-block h1{ font-size:4vw; } .cate-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; } .cate-img{ width:100%; border-radius: 10px; transition: all 500ms ease; } .category{ position:relative; padding-bottom:20px; } .cate-img-desc{ position: absolute; bottom: 8%; left: 6%; color: #fff; visibility: hidden; opacity: 0; font-size:2vw; font-weight:bold; transition: all 500ms ease; } .category:hover .cate-img-desc{ visibility: visible; opacity: 1; } .cate-img:hover{ filter: brightness(70%) } /*cta blocks*/ #cta-block-1{ grid-area:cta1 } #cta-block-2{ grid-area:cta2; } #cta-block-3{ grid-area:cta3; } .cta-block{ font-size:2vw; text-align:center; border-top:1px solid #222; border-bottom:1px solid #222; } /*info blocks*/ .info-row{ padding-top:5%; padding-bottom: 5%; gap:3%; } .info-row img{ width:100%; border-radius:10px; display:block; margin:auto; } .info-text{ text-align:center; display:flex; flex-direction: column; align-items: center; font-size:1.5vw; margin:auto; } #info-block-1{ grid-area: ib1; } #info-block-2{ grid-area:ib2; } /*review block*/ #review-block{ grid-area:rvb; } #review-block .row{ gap:20px; } #review-text{ margin:auto; } #rvw-img img{ width:80%; border-radius:10px; display:block; margin:auto; margin-bottom:50px; } #rvw-txt{ display:flex; border:1px solid #222; text-align: center; align-items: center; margin-top:50px; } #rvw-txt h2{ padding-left:10%; padding-right:10%; font-size:3vw; } /*default*/ .row{ display:flex; } .row-rev{ display: flex; flex-direction: row-reverse; } .col{ flex:1; } .cta-btn{ color:#222; border:1px #222 solid; border-radius:7px; background-color: white; padding: 0.6em 1.2em 0.6em 1.2em; font-size:2vw; transition: all 300ms ease; cursor:pointer; } .cta-btn:hover{ background-color:#222; color:white; } .border-block{ /*a block has a top and bottom line border*/ border-top:1px solid #222; border-bottom:1px solid #222; } 要解决此问题,您可以尝试以下解决方案: 解决方案 1:将 display: flex; flex-direction: column; 添加到 <body> 或容器元素 由于您希望 <main> 自然展开以适合其所有子元素并将页脚推到底部,因此您可以设置正文或包装容器以使用 Flexbox,确保主要内容填充可用空间: body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } 解决方案 2:在 overflow: auto; 上使用 <main> 另一种方法是通过应用<main>来确保overflow: auto;解释其溢出的内容: main { overflow: auto; } 解决方案 3:使用 CSS Clearfix 解决浮动问题 如果<main>内部有浮动可能会导致此问题,请尝试向容器添加clearfix: main::after { content: ""; display: block; clear: both; } 最终示例 html, body { margin: 0; padding: 0; min-height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; overflow: auto; /* Optional if necessary */ } footer { background-color: white; padding-right: 4%; padding-left: 4%; padding-bottom: 100px; margin-top: auto; }
我想知道在使用引导程序时是否可以为容器指定自定义宽度或高度,并且不会影响引导程序容器的默认响应能力。现在,这是我的主要
我正在创建 Beamer 幻灯片的 RMarkdown 模板,并使用大都市主题作为基础。 这已经包括: 编号目录 隐藏标题页上的页脚 现在我想将页脚添加到
我怎样才能用两种不同的形状制作这样的页脚? 结构为一节、四柱。 在 WordPress Elementor 中制作 我找不到此内容的任何 YouTube 教程:/// 我会的
如何在没有站点编辑器支持的主题中使用 Elementor 自定义页眉和页脚
问题: 我使用的自定义主题不支持 Wordpress 站点编辑器。我想创建一个新的启动页面,其中包含修改后的页眉和页脚,隐藏导航菜单。 Elementor 已启用。
我正在 MS Report Builder 2014 中自定义 SSRS 报告。 目前状况 在此报告中,正文显示每个客户 ID 的发票信息,该信息可能从 1 页到多页不等。例如客户...