HTML忽略內部CSS

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元素不應具有兩次定義的相同屬性，如此處所示： HTML元素是否可以具有兩次相同的屬性？

組合內容屬性（如@ Nav042的答案所示）或刪除其中一個應解決此問題。

另外，如果您忘記了CSS中的分號，則其余CSS將被忽略並且不會應用於目標元素。

HTML忽略內部CSS

問題描述

2 個解決方案

解決方案1
0 2016-02-22 20:33:04

解決方案2
0 2016-02-22 21:28:16

HTML忽略內部CSS

問題描述

2 個解決方案

解決方案1 0 2016-02-22 20:33:04

解決方案2 0 2016-02-22 21:28:16

解決方案1
0 2016-02-22 20:33:04

解決方案2
0 2016-02-22 21:28:16