Html 有些css不起作用

因此，我一直在遵循本教程，用html、css和js制作一个日历小部件，但我被困在css上无法工作。我是错过了什么还是错过了打字？我的html/css哪里出了问题，结果不一样？当我试图编辑某些CSS时，它似乎不会影响输出

本教程用于参考它的外观

这是我的HTML：

#校准{
-moz盒阴影：0px 3px 3px rgba（0,0,0,0.25）；
-webkit盒阴影：0px 3px 3px rgba（0,0,0,0.25）；
保证金：50px自动；
字体：13px/1.5“Helvetica Neue”，Helvatica，Arial，san serif；
显示：表格；
}
#校准头{
游标：默认值；
背景#cd310d；
背景：-线性梯度（顶部，#b32b0c，#cd310d）；
背景：-webkit渐变（线性、左上、左下、从（#b32b0c）到（#cd310d））；
高度：34px；
位置：相对位置；
颜色：#fff；
-webkit边框左上半径：5px；
-webkit边框右上角半径：5px；
-左上角moz边界半径：5px；
-moz边框半径右上角：5px；
边框左上半径：5px；
边框右上角半径：5px；
字体大小：粗体；
文本阴影：0px-1px 0#87260C；
文本转换：大写；
}
#标定收割台跨度{
显示：内联块；
线高：34px；
}
#卡尔，头球，钩子{
宽度：9px；
高度：28px；
位置：绝对位置；
底部：60%；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
背景:#ececec ;；
背景：-moz线性梯度（右上，#fff，#827e7d）；
背景：-webkit渐变（线性、右上、右下、从（#fff）到（#827e7d）；
盒影：0px-1px2pRGBA（0,0,0,0.65）；
-moz盒阴影：0px-1px2pRGBA（0,0,0,0.65）；
-webkit盒阴影：0px-1px2pRGBA（0,0,0,0.65）；
}
.对，胡克{
右：15%；
}
.左钩拳{
左：15%；
}
#校准头。按钮{
宽度：24px；
文本对齐：居中；
位置：绝对位置；
}
#校准标题。左按钮{
左：0；
-webkit边框左上半径：5px；
-左上角moz边界半径：5px；
边框左上半径：5px；
右边框：1px实心#ae2a0c；
}
#校准标题。右键{
右：0；
排名：0；
左边框：1px实心#ae2a0c；
-webkit边框右上角半径：5px；
-moz边框半径右上角：5px；
边框右上角半径：5px；
}
#校准标题。按钮：悬停{
背景：-莫兹线性梯度（顶部，#d94215，#bb330f）；
背景：-webkit渐变（线性、左上、左下、从（#d94215）到（#bb330f））；
}
#cal.header.月-年{
字母间距：1px；
宽度：100%；
文本对齐：居中；
}
#校准表{
背景：#fff；
边界塌陷：塌陷；
}
#卡尔td{
颜色：#2b2b；
宽度：30px；
高度：30px；
线高：30px；
文本对齐：居中；
边框：1px实心#e6；
游标：默认值；
}
#cal#天td{
高度：25px；
线高：26px；
文本转换：大写；
字体大小：90%；
颜色：#9e9e9e；
}
#cal#days td:不是（最后一个孩子）{
右边框：1px实心#fff；
}
#cal#cal frame td.today{
背景：#ededed；
颜色：#8c8c8c；
盒影：1px 1px 0px#fff插图；
-moz盒阴影：1px 1px 0px#fff插图；
-网络工具包盒阴影：1px 1px 0px#fff插图；
}
#校准#校准帧td:非（.nil）：悬停{
颜色：#fff；
文本阴影：#6C1A07 0px-1px；
背景#CD310D；
背景：-moz线性梯度（顶部，#b32b0c，#cd310d）；
背景：-webkit渐变（线性、左上、左下、从（#b32b0c）到（#cd310d））；
-moz盒阴影：0px 0px 0px；
-网络工具包盒阴影：0px 0px 0px；
}
#cal#cal框架td跨度{
字号：80%；
位置：相对位置；
}
#cal#cal帧td span：第一个孩子{
底部：5px；
}
#cal#cal帧td span:最后一个孩子{
顶部：5px；
}
#cal#cal frame table.curr{
浮动：左；
}
#cal#cal frame table.temp{
位置：绝对位置；
}

&朗；
2010年6月
&响；
太阳
周一
星期二
结婚
星期五
坐
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

首先，我不明白您的实际查询是什么。 但是你所指的是有一个完美工作的CSS和HTML。 另外，JS也在工作

我在您提供的代码中发现的差异是：-

在HTML中：-

     <table id="days">
           <td>thu</td>  <!-- Is missing -->

屏幕截图：-

---

希望这对您有用。

请更具体地告诉我们哪些CSS规则没有被应用。否则我们需要猜测。到底什么不起作用？确实有很多……对于初学者来说，文本#days表应该转换为大写和不同的颜色。标题中的文本应该是cente红色和钩子。真的有很多。但让我们从那开始。谢谢！我一定错过了什么。对于这个奇怪的问题，我很抱歉。我尽我所能表达它。但这很好。我必须检查一下差异，看看我错在哪里了。

body { 
    background: #e0e0e0; 
} 

#cal { 
    -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    margin:50px auto; 
    font: 13px/1.5 "Helvetica Neue", Helvatica, Arial, san-serif; 
    display:table; 
}
#cal .header { 
    cursor:default; 
    background: #cd310d; 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
    background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d)); 
    height: 34px; 
    position: relative; 
    color:#fff; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    font-weight:bold; 
    text-shadow:0px -1px 0 #87260C; 
    text-transform: uppercase; 
} 
#cal .header span { 
    display:inline-block; 
    line-height:34px; 
}
#cal .header .hook { 
    width: 9px; 
    height: 28px; 
    position: absolute; 
    bottom:60%; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    background:#ececec; 
    background: -moz-linear-gradient(right top, #fff, #827e7d); 
    background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#827e7d)); 
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 ); 
    -moz-box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 ); 
    -webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 ); 
} 
.right.hook { 
    right:15%; 
} 
.left.hook { 
    left: 15%; 
}
#cal .header .button { 
    width:24px; 
    text-align:center; 
    position:absolute; 
} 
#cal .header .left.button { 
    left:0; 
    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
    border-right:1px solid #ae2a0c; 
} 
#cal .header .right.button { 
    right:0; 
    top:0; 
    border-left:1px solid #ae2a0c; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-right-radius: 5px; 
} 
#cal .header .button:hover { 
    background: -moz-linear-gradient(top, #d94215, #bb330f); 
    background: -webkit-gradient(linear, left top, left bottom, from(#d94215), to(#bb330f)); 
}
#cal .header .month-year { 
    letter-spacing: 1px; 
    width: 100%; 
    text-align: center; 
}
#cal table { 
    background:#fff; 
    border-collapse:collapse; 
} 
#cal td { 
    color:#2b2b2b; 
    width:30px; 
    height:30px; 
    line-height:30px; 
    text-align:center; 
    border:1px solid #e6e6e6; 
    cursor:default; 
} 
#cal #days td { 
    height:26px; 
    line-height: 26px; 
    text-transform:uppercase; 
    font-size:90%; 
    color:#9e9e9e; 
} 
#cal #days td:not(:last-child) { 
    border-right:1px solid #fff; 
}
#cal #cal-frame td.today { 
    background:#ededed; 
    color:#8c8c8c; 
    box-shadow:1px 1px 0px #fff inset; 
    -moz-box-shadow:1px 1px 0px #fff inset; 
    -webkit-box-shadow:1px 1px 0px #fff inset; 
} 
#cal #cal-frame td:not(.nil):hover { 
    color:#fff; 
    text-shadow: #6C1A07 0px -1px; 
    background:#CD310D; 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
    background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d)); 
    -moz-box-shadow:0px 0px 0px; 
    -webkit-box-shadow:0px 0px 0px; 
}
#cal #cal-frame td span { 
    font-size:80%; 
    position:relative; 
} 
#cal #cal-frame td span:first-child { 
    bottom:5px; 
} 
#cal #cal-frame td span:last-child { 
    top:5px; 
}
#cal #cal-frame table.curr { 
    float:left;      
} 
#cal #cal-frame table.temp { 
    position:absolute; 
}