流星中的CSS问题?

文卡特

您能否看到下面的代码和错误(单击按钮时会收到错误)。我对该错误一无所知,但我希望此错误会引起css的问题。因此请帮助我该怎么做这个问题?

错误 :

[20:37:40.994] The connection to ws://localhost:3000/sockjs/726/z_lwffha/websocket was interrupted while the page was loading. @ http://localhost:3000/packages/livedata.js?7f11e3eaafcbe13d80ab0fb510d25d9595e78de2:1338
[20:37:41.012] GET http://localhost:3000/ [HTTP/1.1 200 OK 4ms]
[20:37:41.085] Selector expected.  Ruleset ignored due to bad selector. @ http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css:142
[20:37:41.090] Unexpected end of file while searching for closing } of invalid rule set. @ http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css:143
[20:37:41.199] GET http://localhost:3000/sockjs/info?cb=lw6ruqspkl [HTTP/1.1 200 OK 2ms]
[20:37:41.215] GET http://****:3000/sockjs/274/pw0wlh20/websocket [HTTP/1.1 101 Switching Protocols 3ms]

[16:30:20.289]预期选择器。由于选择器错误,规则集被忽略。@ http:// *:3000 / 20c1b4c895661a31348add34943984dc35828465.css:193:

* {
  /* A universal CSS reset */
  margin: 0;
  padding: 0;
}

body {
  font-size: 14px;
  color: #666;
  background: #111 no-repeat;
  /* CSS3 Radial Gradients */
  background-image: -moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
  background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  font-family: Arial, Helvetica, sans-serif;
}

#navigationMenu li {
  list-style: none;
  height: 39px;
  padding: 2px;
  width: 40px;
}

#navigationMenu span {
  width: 0;
  left: 38px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  font-family: 'Myriad Pro',Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
}

#navigationMenu a {
  background: url('img/navigation.jpg') no-repeat;
  height: 39px;
  width: 38px;
  display: block;
  position: relative;
}

/* General hover styles */

#navigationMenu a:hover span {
  width: auto;
  padding: 0 20px;
  overflow: visible;
}

#navigationMenu a:hover {
  text-decoration: none;
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow: 0 0 5px #9ddff5;
  -webkit-box-shadow: 0 0 5px #9ddff5;
  box-shadow: 0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {
  background-position: 0 0;
}

#navigationMenu .home:hover {
  background-position: 0 -39px;
}

#navigationMenu .home span {
  background-color: #7da315;
  color: #3d4f0c;
  text-shadow: 1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about {
  background-position: -38px 0;
}

#navigationMenu .about:hover {
  background-position: -38px -39px;
}

#navigationMenu .about span {
  background-color: #1e8bb4;
  color: #223a44;
  text-shadow: 1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services {
  background-position: -76px 0;
}

#navigationMenu .services:hover {
  background-position: -76px -39px;
}

#navigationMenu .services span {
  background-color: #c86c1f;
  color: #5a3517;
  text-shadow: 1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio {
  background-position: -114px 0;
}

#navigationMenu .portfolio:hover {
  background-position: -114px -39px;
}

#navigationMenu .portfolio span {
  background-color: #d0a525;
  color: #604e18;
  text-shadow: 1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact {
  background-position: -152px 0;
}

#navigationMenu .contact:hover {
  background-position: -152px -39px;
}

#navigationMenu .contact span {
  background-color: #af1e83;
  color: #460f35;
  text-shadow: 1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main {
  margin: 80px auto;
  position: relative;
  width: 40px;
}

h1 {
  color: #fff;
  font-size: 30px;
  font-weight: normal;
  padding: 60px 0 20px;
  text-align: center;
}

h2 {
  font-weight: normal;
  text-align: center;
}

h1,
h2 {
  font-family: "Myriad Pro",Arial,Helvetica,sans-serif;
}

a,
a:visited,
a:active {
  color: #0196e3;
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: none;
}

p.note {
  color: #707070;
  font-size: 10px;
  text-align: center;
  margin: 50px;
}
//# sourceMappingURL=20c1b4c895661a31348add34943984dc35828465.map

CSS:

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{

    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;


    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;


    -webkit-transition: 0.25s;


    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main{
    margin:80px auto;
    position:relative;
    width:40px;
}


h1{
    color:#fff;
    font-size:30px;
    font-weight:normal;
    padding:60px 0 20px;
    text-align:center;
}

h2{
    font-weight:normal;
    text-align:center;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited,a:active {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

a img{
    border:none;
}

p.note{
    color:#707070;
    font-size:10px;
    text-align:center;
    margin:50px;
}

HTML:

<head>
  <title>menuapp</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <div id="main">

<ul id="navigationMenu">
    <li>
         <a class="home" href="">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="">
            <span>Services</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
        <a class="contact" href="">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div>
</template>

JS代码:

if (Meteor.isClient) 
{


  Template.hello.events
({
    'click input': function (e,t)
  {
      // template data, if any, is available in 'this'
       e.preventDefault();
      if (typeof console !== 'undefined')
        console.log("You pressed the button");

    }
  });
}
塞尔坎·杜鲁索伊(Serkan Durusoy)

流星应用程序中的CSS比您在此处与代码共享的CSS还要多。它们可以来自其他软件包。

点击:

http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css

(或运行应用程序时控制台为CSS打印的任何URL)并检查第142和143行。

您会发现一个错误的CSS选择器,或者可能缺少一些花括号。

除此之外,请在编辑器中使用css提示/启动工具,以便您尽早捕获css错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章