Question

我有一个视频背景，通常是旋转木马。我还在学习CSS的复杂性，我对是否可以使用Meteor将我的模板内容放在视频下面感到困惑。我认为最好在视频下方加载模板，以便视频在布局标题中一致播放，但我的路线可以在其下方更改。基本上，我要做的是让我的所有路线都出现在html5视频标题下面。请帮助巫师。

视频是layout.html中自己的模板 - ＆gt; {{＆GT;视频}}

“标题”元素是我的“主页”模板的一部分。

Answer 1

这个问题纯粹是CSS，meteor并不能控制你的风格。有许多可能的解决方案，但为什么不将视频包装在一个div中并给它一个特定的高度＆amp; 100％宽度。只要它在您的标题之前，它就会将其余内容推送到其下方。

<强> CSS

<div class="video">
  {{> video}}
</div>

  {{> header}}
  {{> otherTemplates}}

<强>模板

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <!--links in font-->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
    <!--links in jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<style type="text/css">
/* do not  include in production */
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        background-color: whitesmoke;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        color: white;
    }
    .cards {
        background: white;
        padding: 10px;
        margin: 5px auto;
        border: #DDD solid 1px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
/* INCLUDE */
    #n-wrap {
        width: 950px;
        height: 600px;
        background-color: whitesmoke;
        overflow: hidden;
    }
    .n-titles {
        line-height: 50px;
        width: 950px;
        height: 50px;
        background-color: #888;
        transition: background-color 0.5s ease;
    }
    .n-titles:nth-child(n+2):hover {
        background-color: rgb(96, 223, 229);
        cursor: pointer;
    }
    .n-titles:nth-child(n+2):hover + .n-items {
        height: 370px;
    }
    .n-items {
        height: 0px;
        width: 100%;
        transition: height 0.5s ease;
        background-color: white;
    }
    .n-items:hover {
        height: 370px;
    }
    #open {
        height: 370px;
    }
</style>
<body>
    <center>
        <div id="n-wrap" class="cards">
            <div class="n-titles">FEATURED</div>
            <div class="n-titles">Most Popular</div>
            <div class="n-items pseudo-open" id="open"></div>
            <div class="n-titles">On Sale</div>
            <div class="n-items"></div>
            <div class="n-titles">Newest</div>
            <div class="n-items"></div>
        </div>  
    </center>   
</body>
    <script type="text/javascript">
        $(document).ready(function() {
            //always has the first section displayed when the drop-down is not being hovered
            $(".n-items, .n-titles:not(.n-titles:first-child)").hover(function() {
                $("#open").removeAttr("id");
            });
            $(".n-items, .n-titles").mouseout(function() {
                $(".pseudo-open").attr("id", "open");
            })  
        });
    </script>
</html>

Meteor：如何将模板内容放在视频背景标题下方

1 个答案: