Question

好的，所以我正在制作一个关于我的计算类中的几个朋友的笑话网站，我遇到了一个问题，我的CSS代码中的包装器没有应用到网页。包装器适用于网站上的其他页面，但它不适用于此页面，这里是HTML代码：

<html>    
    <head>
        <link href="main.css" rel="stylesheet" type="text/css>

        <title>Ways that George is physically better than Adam</title>

    </head>

    <body>

    <div class=" wrapper ">
    <h1> There are many ways that George is physically better than Adam </h1>

    <div class="article ">
    <ul>
        <li>George isn't as fat as Adam.</li>
        <li>George has better hair than Adam.</li>
        <li>George has a manly assortment of stubble.</li>
        <li>George is just more attractive than Adam.</li>
    </ul>

    <div class="littlearticle ">

    <p> <a href="George is better than adam.html "> Click here to return to    the homepage. </a> </p>
    </div>
    </div>
    </div>
</html>

这是我的CSS代码

body {
   text-align: Left;
}
.wrapper {
    width:40em;
    text-align; left;
    margin-left: 150px;
    margin-right: 150px;
    padding: 8px;
}
h1 {
    color:red;
    background-color;white;
    font-family:tahoma;
    border-top:red 2px double;
    border-bottom: red 2px dashed;
    padding: 8px;
}
.article {
    color:blue;
    font-family:consolas;
    font-size:medium;
    background-color:yellow;
    padding;
    8px;
}
.littlearticle {
    color:black;
    font-family:consolas;
    font-size:medium;
    background-color:red;
    padding: 8px;
}

Answer 1

四个小错误：

<强> 1

<link href="main.css" rel="stylesheet" type="text/css>

应该是：

<link href="main.css" rel="stylesheet" type="text/css">

<强> 2

缺少结束体标记：</body>

第3

在您.article的{{1}}下，应为padding;8px;

<强> 4

在您padding: 8px;的{{1}}下，应为.wrapper

Answer 2

您的许多CSS规则无效：

CSS Syntax是：

rule: property;

永远不会：

rule; property;

所以你可以纠正：

text-align; left;

的

text-align: left; background-color; white;

的

background-color: white; padding; 8px;

的

padding: 8px;

最重要的是，您的CSS链接无效，您应该关闭"：

<link href="main.css" rel="stylesheet" type="text/css">

您还错过了结束标记</body>

还有一点，你的css属性应该是小写的：

text-align: Left;应为text-align: left;

这不会影响你的css，但这是一个很好的做法。

Answer 3

在＆＃34; text / css＆＃34;

之后，你错过了一个结束双引号

<link href="main.css" rel="stylesheet" type="text/css">

Answer 4

您的语法错误很少，如上所述。

body {text-align: left;}

.wrapper{
width:40em; text-align:left;
margin-left: 150px; margin-right: 150px;
padding: 8px;

}

h1 {
color:red;
background-color:white;
font-family:tahoma;
border-top:red 2px double;
border-bottom: red 2px dashed;
padding: 8px;

}

.article {
color:blue;
font-family:consolas;
font-size:medium;
background-color:yellow;
padding:8px;

}

.littlearticle {
color:black;
font-family:consolas;
font-size:medium;
background-color:red;
padding: 8px;

}

同样更正html页面中的引用，如下所示

<link href="main.css" rel="stylesheet" type="text/css">

以下是JSFiddle为我工作

为什么我的CSS包装器不适用于我的HTML代码

4 个答案: