某些CSS属性未应用

时间:2015-08-20 20:54:12

标签: javascript html css html5 dom

我的一些CSS似乎不适用于我的网页,我试过查找答案,我甚至尝试了一个没有运气的CSS验证器。

我没有网页,但如果您能通过阅读代码找出问题,我们将不胜感激!

另外:看看图片:http://puu.sh/jIxvw/818d4da42a.png (以低信誉发布img) 对我不起作用的代码是非蓝色的代码

CSS

@import url(http://fonts.googleapis.com/css?family=Teko:300,700);
body { margin: 0; padding: 0; background-color: #092f6e; color: #fff; }
#WP {
    font-size: 15px;
    font-family: 'Teko', sans-serif;
    width: 500px;
    margin: 25px auto;
    border: 1px solid rgba(256, 256, 256, .2);
    background: #092f6e url(satellite_dish.jpg) no-repeat center bottom;
    min-height: 575px;
}
#WP .Heading {
    background-color: rgba(0,0,0,.5);
    padding: 15px 0px 2px 0px;
    margin: 0px 0px 30px 0px;
}
#WP h1 {
    font-size: 4.2em;
    color:  #FFFFFF;
    text-transform: 300;
    line-height: 70px;
    margin: 0px 0px 0px -5px;
    padding: 0;
    text-align: center;
}
#WP h2 {
    font-size: 1.5em;
    color: #64fb5f8;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 18px;
    margin: 0px;
    padding: 0;
    text-align: center;
    letter-spacing: 9px;
}
#WP .my-countdown .countdow-row {
    display: block;
    text-align: center;
}
#WP .my-countdown .countdow-section {
    display: inline-block;
    width: 95px;
}
#WP .my-countdown .countdow-amount {
    display: block;
    color: #FFFFFF;
    font-size: 5.6em;
    line-height: 55px;
}

如果您有任何机会需要HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta id="view" name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1">
        <title>Creating a Countdown</title>
        <link rel="stylesheet" type="text/css" href="my_countdown.css">

        <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="jquery.plugin.min.js"></script>
        <script type="text/javascript" src="jquery.countdown.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.my-countdown').countdown({
                    until: $.countdown.UTCDate(0, 2016, 4,1, 23,0,0,0)
                });
            });
        </script>
    </head>
    <body>
        <div id="WP">
        <div class="Heading">
            <h2>Countdown to the</h2>
            <h1>World premiere</h1>
        </div>  
        <div class="my-countdown">      </div>  
        </div>
    </body>
</html>

注意:这是使用Chris Converse创建事件倒计时教程的代码 http://www.lynda.com/JavaScript-tutorials/Styling-injected-HTML-from-plugin/373559/407364-4.html

2 个答案:

答案 0 :(得分:1)

你好像忘记了几个N?

&#34; .countdow N -row / -selection / -amount&#34;

#WP .my-countdown .countdown-row {
    display: block;
    text-align: center;
}
#WP .my-countdown .countdown-section {
    display: inline-block;
    width: 95px;
}
#WP .my-countdown .countdown-amount {
    display: block;
    color: #FFFFFF;
    font-size: 5.6em;
    line-height: 55px;
}

答案 1 :(得分:0)

基本上你必须解决这个问题 .countdow-row尝试将.countdown-row替换为countdow-section和.countdow-amount相同,所以只需在“w”后添加“n”。