代码之家  ›  专栏  ›  技术社区  ›  user5626618

页脚背景重叠内容

zurb-foundation twitter-bootstrap css html
  •  0
  • user5626618  · 技术社区  · 10 年前

    我有一个 web page ). 它以HTML/CSS/JavaScript/Foundation/Bootstrap和w3.CSS编码。它有四个部分:导航栏和徽标、标题、定价表和页脚。如您所见,页脚的背景目前覆盖了定价表的部分背景。你知道如何解决这个问题,使页脚只在定价表之后开始吗?
    以下是网页的代码: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!-- BC_OBNW -->
    <head>
        <title>Home - Coding Kids</title>
        <link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
        <script type="text/javascript">var jslang='EN';</script>
        <link rel="stylesheet" type="text/css" href="stylesheets/w3.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/foundation.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
        <link rel="stylesheet" type="text/css" href="stylesheets/marketing_nav.css">
        <link href="/CatalystStyles/report_abuse.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <script src="scripts/jquery.min.js"></script>
        <script src="scripts/foundation.min.js"></script>
        <script src="scripts/modernizr.js"></script>
        <script src="scripts/bootstrap.min.js"></script>
        <span style="font-family : Raleway;">
            <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navbar-blue">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
                        </button>
                    </div>
                    <div align="center">
                        <p></p>
                        <p>
                            <img id="resize" width="70%" src="../logo.png" alt="Coding Kids">
                        </p>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a>
                            </li>
                            <li><a href="#">About</a>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Silver</a>
                                    </li>
                                    <li><a href="#">Silver+</a>
                                    </li>
                                    <li><a href="#">Gold</a>
                                    </li>
                                    <li><a href="#">Gold+</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Contact</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#" data-toggle="modal" data-target="#signUp"><img src="images/register.png" width="20"> Sign Up</a>
                            </li>
                            <li><a href="#" data-toggle="modal" data-target="#logIn"><img src="images/login.png" width="20"> Login</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div id="signUp" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Sign Up</h4>
                        </div>
                        <div class="modal-body">
                            <p>Sign Up Box Goes Here</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="logIn" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Login</h4>
                        </div>
                        <div class="modal-body">
                            <p>Login Box Goes Here</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="well">
                <div class="container">
                    <div class="jumbotron" style="background: skyblue; font-famiy: Raleway;">
                        <h1>Learn Coding, The Easy Way...</h1>
                        <p>Coding Kids is a great way to learn programming, and it is fun and easy to use.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="row medium-3 columns">
                        <div>
                            <ul class="pricing-table" data-equalizer-watch>
                                <li class="title">Silver</li>
                                <li class="price"><b>FREE</b> Forever!</li>
                                <li class="description">For kids who want to make websites</li>
                                <li class="bullet-item">HTML Tutorial</li>
                                <li class="bullet-item">Interactive Activities</li>
                                <li class="bullet-item">Real Time HTML Editor</li>
                                <li class="bullet-item">Ask Codey Coding Coding Support Service</li>
                                <li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row medium-3 columns">
                        <div>
                            <ul class="pricing-table" data-equalizer-watch>
                                <li class="title">Silver+</li>
                                <li class="price">£10 once</li>
                                <li class="description">For kids who want to learn programming</li>
                                <li class="bullet-item">Scratch Tutorial</li>
                                <li class="bullet-item">Python Tutorial</li>
                                <li class="bullet-item">Tasks and Projects to Complete</li>
                                <li class="bullet-item">Everything in <b><i>Silver</i></b></li>
                                <li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row medium-3 columns">
                        <div>
                            <ul class="pricing-table" data-equalizer-watch>
                                <li class="title">Gold</li>
                                <li class="price">£99.99 a year</li>
                                <li class="description">For Primary Schools</li>
                                <li class="bullet-item">Easy Scratch Tutorial with Tasks and Projects to Complete</li>
                                <li class="bullet-item">Easy Word and PowerPoint Tutorials</li>
                                <li class="bullet-item">Easy Esafety Lesson and Quiz</li>
                                <li class="bullet-item">Online Worksheets</li>
                                <li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row medium-3 columns">
                        <div style="background-image: url(images/goldplus.jpg)">
                            <ul class="pricing-table" data-equalizer-watch>
                                <li class="title">Gold+</li>
                                <li class="price">£299.99 a year</li>
                                <li class="description">For Secondary Schools</li>
                                <li class="bullet-item">MSWLogo Tutorial and Cheatsheet</li>
                                <li class="bullet-item">Kodu Tutorial with Tasks and Projetcs to Complete</li>
                                <li class="bullet-item">Esafety Lesson and Quiz</li>
                                <li class="bullet-item">Online Worksheets</li>
                                <li class="bullet-item">Everything in <b><i>Silver</i></b> and <b><i>Silver+</i></b></li>
                                <li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <footer
            <div class="panel panel-default" style="background-color: black;">
                <div class="panel-body" style="background-color: black; color: white;">&copy; Coding Kids</div>
            </div>
            </footer>
        </span>
        <div id="report-abuse"><a href="http://www.businesscatalyst.com/report-abuse?URL=codingkids.businesscatalyst.com"><span>Report Abuse</span></a></div>
    </body>
</html>
    1 回复  |  直到 10 年前
        1
  •  0
  •   T'lash    10 年前

    您的定价部分使用浮动元素,因此您需要将css属性添加到以下元素(您的页脚): 

    clear: both;

    更好的是,在与浮动元素相同的容器中添加一个div全宽,1px高,并清除both-css属性。

    推荐文章
    Matt  ·  基础6使用SASS更改排水沟宽度
    8 年前
    Dhiraj Sharma  ·  网页包中的基础抛出错误
    8 年前
    coolsaint Christian C. Salvadó  ·  在Foundation 6.4.3卡中,如何阻止图像在Flexbox容器内拉伸?
    8 年前
    Nir Tzezana  ·  Foundation 6 catch drilldown click事件
    8 年前
    tomislav_t  ·  将单元均匀分布在Zurb基础6的立柱上
    8 年前
    Dwight Gunning  ·  Karma单元测试Vue。js+基础
    8 年前
    Run  ·  基础6.4.1-引导。容器等效物?
    8 年前
    foufrix  ·  Css滚动和大小调整
    8 年前
    ManxJason  ·  使用基础“柔性网格”集中对齐嵌套项
    9 年前
    Ahad Porkar  ·  Foundation 6子菜单展开不工作
    9 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号