Question

我希望在我的页脚div中有一个水平条形，但我无法看到它。在JS Fiddle中它可以工作但不在我的chrome调试中。

HTML：

    <!DOCiTYPE html>
<html>
    <head>
        <title>Bootstrap Theme Simply Me</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/custom_css/custom.css">
    </head>

    <body>
        <div class="container-fluid logo">
            <div class="row">
                <div class="popup-nav header affix">
                    <div class="nav-bar header">
                    </div>
                </div>
            </div>
            <div class="container-fluid main">
                <div class="row header">
                    <h3>Welcome to the universe</h3>
                </div>
                <p>Welcome to my webpage. I'm glad to show off myself in a common egocentric manner.</p>
                <div class="col-xs-12 col-sm-6">
                    <p>Lorem Ipsum dolor kram dinge. Lorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dinge</p>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <p>Bla bla bla bl Bla bla bla blBla bla bla bl Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bla</p>
                </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="../js/custom/init.js"></script>
            <script src="../js/custom/events.js"></script>
    </body>

    <footer class="container-fluid footer">
        <div class="nav">
            <div class="popup-nav footer affix">
                <div class="nav-bar footer">
                </div>
            </div>
        </div>
    </footer>
</html>

CSS：

body {
    background-color: #0099cc;
}

.logo-header {
    background: transparent;
    height : 100px;
}

.popup-nav{
    z-index: 1;
    padding-left: 0px;
    padding-right: 0px;

    height: 0px;
    border-style: solid;
}

.popup-nav.header{

    width: 0px;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #000000 transparent transparent transparent;
}

.popup-nav.footer{
    right: 0;
    bottom: 0;
    height: 0px;
    width: 0px; 
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: transparent transparent #000000 transparent;
}

.nav-bar.footer{

    height: 57px; 
    width: 500px; 
    background-color: #000000; 
}

.nav-bar.header{

    height: 650px;
    top: -80px;
    width: 75px; 
    background-color: #000000; 
}

.main {

}

.nav {
    padding-left: 0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}

.mirror{
    transform : rotateX(0deg);
}

我想要实现的是在.popup-nav.footer形状的高度处有一个水平条形

所以说相当于你可以在左侧看到的东西。

Answer 1

<footer>标记应位于<body>标记内。您的所有网站都应该在正文中。 DOCTYPE中也有拼写错误。

无法在页脚可见的形状样式<div>

1 个答案: