Question

我开始为不同的屏幕尺寸制作一个响应式网站。这是我第一次使用内部css。当我运行代码时，图像出现，但似乎样式标记的内容被忽略。有人可以帮忙吗？

<html>
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width" content="initial-scale=1">
    <!-- This sets the website, on any device, to fit the size of the screen. -->

    <!-- Internal Style sheet -->

    <style type ="text/css">

        i {
        width: 100%;
        }

        #tl_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        padding: 2%;
        }

        #tr_square {
        max-width: 1000px;
        width: 66.6667%;
        float: right;
        padding: 1%;
        }

        #ml_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        padding: 2%;
        }

        #mm_square {
        max-width: 500px;
        width: 50%;
        float: left;
        padding: 2%;
        }

        #mr_square {
        max-width: 500px;
        width: 50%;
        float: right;
        padding: 2%;
        }

        #m_nested_square {
        max-width: 1000px;
        width: 66.6667%
        float:right;
        }

        #bl_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        max-height: 500px
        height: 33.3333%;
        padding: 2%;
        }

        #br_square {
        max-width: 1000px;
        width: 66.6667%;
        float: right;
        max-height: 500px
        height: 33.3333%;
        padding: 1%;
        }




    </style>


    <title> jamesnovis.com 
    </title>


</head>


<body>

    <!-- The top boxes -->
    <div id="tl_square"> 
        <img src="testimage.jpg">
    </div>

    <div id="tr_square"> 
    </div>


    <!-- The middle boxes -->
    <div id="ml_square">
    </div>

    <!-- These are nested divs -->
    <div id="m_nested_square">
        <div id="mm_square">
        </div>

        <div id="mr_square">
        </div>
    </div>

    <!-- The bottom boxes -->
    <div id="bl_square">
    </div>

    <div id="br_square">
    </div>

</body>
</html>

Answer 1

缺少少量分号，元视口格式错误;在这里：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- meta viewport, the content was not rightly assigned -->
<!-- This sets the website, on any device, to fit the size of the screen. -->

<!-- Internal Style sheet -->

<style type="text/css">
    i {
        width: 100%;
    }

    #tl_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        padding: 2%;
    }

    #tr_square {
        max-width: 1000px;
        width: 66.6667%;
        float: right;
        padding: 1%;
    }

    #ml_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        padding: 2%;
    }

    #mm_square {
        max-width: 500px;
        width: 50%;
        float: left;
        padding: 2%;
    }

    #mr_square {
        max-width: 500px;
        width: 50%;         /* semicolon ';' was missing */
        float: right;
        padding: 2%;
    }

    #m_nested_square {
        max-width: 1000px;
        width: 66.6667%;        /* semicolon ';' was missing */
        float: right;
    }

    #bl_square {
        max-width: 500px;
        width: 33.3333%;
        float: left;
        max-height: 500px;
        height: 33.3333%;
        padding: 2%;
    }

    #br_square {
        max-width: 1000px;
        width: 66.6667%;
        float: right;
        max-height: 500px;      /* semicolon ';' was missing */
        height: 33.3333%;
        padding: 1%;
    }
</style>


<title>jamesnovis.com</title>

Answer 2

Dom元素不应该具有两次相同的属性，如下所示：Can an HTML element have the same attribute twice?

组合内容属性，如@ Nav042的回答所示，或删除其中一个应解决问题。

此外，如果您在CSS中忘记了分号，其余的CSS将被忽略，并且不会应用于目标元素。

HTML忽略内部CSS

2 个答案: