Question

由于某种原因，CSS不起作用我不知道问题出在哪里：

这应该是它的样子：

我不知道出了什么问题？代码是相同的，但它不同于JS Fiddle。

CSS：

html 
height: 100%
body
height: 100%
//background: #a7d5cd
+background-image(linear-gradient(#dddddd, #cccccc))

#people
position: relative
margin: 80px auto
padding: 0
width: 480px
font-family: 'Helvetica Neue', Helvetica, sans-serif
font-size: 16px
line-height: 22px
color: #3b3b3b
-webkit-font-smoothing: antialiased
list-style-type: none

li
position: relative
margin: 0 0 40px 0
padding: 10px 8px 8px 54px
height: 42px
border: 1px solid #bbbbbb
border-radius: 4px
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff
background: #f6f6f6

img
  position: absolute
  top: -16px
  left: -16px
  z-index: 10
  margin: 0
  padding: 4px
  width: 50px
  height: 50px
  border: 1px solid #bbbbbb
  box-shadow: 0 1px 0 #ffffff
  border-radius: 50%
  background: #ffffff

h2
  margin: 0
  font-size: 18px
  line-height: 22px
  font-weight: 400
  color: #4b4b4b
  text-shadow: -1px -1px 0 rgba(255,255,255,0.7)

.info
  margin: 0
  display: block

  em
    margin: 0 18px 0 0
    font-size: 11px
    line-height: 20px
    font-weight: 400
    font-style: normal
    letter-spacing: 1px
    text-transform: uppercase
    color: #5b5b5b
    float: left

Answer 1

您使用的是sass代码，而不是css。我编译了sass代码并分叉你的小提琴。在谷歌上搜索sass。单击第一页（codepen）中的sass以查看已编译的css

http://jsfiddle.net/m52vb/

html {
  height: 100%;
}

body {
  height: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(#dddddd, #cccccc);
  background-image: -moz-linear-gradient(#dddddd, #cccccc);
  background-image: -o-linear-gradient(#dddddd, #cccccc);
  background-image: linear-gradient(#dddddd, #cccccc);
}

#people {
  position: relative;
  margin: 80px auto;
  padding: 0;
  width: 480px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #3b3b3b;
  -webkit-font-smoothing: antialiased;
  list-style-type: none;
}
#people li {
  position: relative;
  margin: 0 0 40px 0;
  padding: 10px 8px 8px 54px;
  height: 42px;
  border: 1px solid #bbbbbb;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 white;
  background: #f6f6f6;
}
#people li img {
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: 10;
  margin: 0;
  padding: 4px;
  width: 50px;
  height: 50px;
  border: 1px solid #bbbbbb;
  box-shadow: 0 1px 0 white;
  border-radius: 50%;
  background: white;
}
#people li h2 {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #4b4b4b;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7);
}
#people li .info {
  margin: 0;
  display: block;
}
#people li .info em {
  margin: 0 18px 0 0;
  font-size: 11px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5b5b5b;
  float: left;
}

Answer 2

不知道它是什么，但它不是CSS。

正确的CSS将是：

html
{
  height: 100%;
}

body
{
  height: 100%;
  //background: #a7d5cd
  background-image(linear-gradient(#dddddd, #cccccc))
}

#people
{
  position: relative;
  margin: 80px auto;
  padding: 0;
  width: 480px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #3b3b3b;
  -webkit-font-smoothing: antialiased;
  list-style-type: none;
}

  li
{
    position: relative;
    margin: 0 0 40px 0;
    padding: 10px 8px 8px 54px;
    height: 42px;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff;
    background: #f6f6f6;
}

 img
{
      position: absolute;
      top: -16px;
      left: -16px;
      z-index: 10;
      margin: 0;
      padding: 4px;
      width: 50px;
      height: 50px;
      border: 1px solid #bbbbbb;
      box-shadow: 0 1px 0 #ffffff;
      border-radius: 50%;
}     background: #ffffff;

    h2
{
      margin: 0;
      font-size: 18px;
      line-height: 22px;
      font-weight: 400;
      color: #4b4b4b;
      text-shadow: -1px -1px 0 rgba(255,255,255,0.7);
}


   .info
{
      margin: 0;
      display: block;
}

      em
{
        margin: 0 18px 0 0;
        font-size: 11px;
        line-height: 20px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #5b5b5b;
        float: left;
}

Updated fiddle

用户档案错误

2 个答案: