0

我让这个网站在 ruby​​ on rails 之外工作，然后我将以下代码移动到 rails，当我将鼠标放在它们上方时，它会使悬停图像变黑。

    // Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 html {
    height: 80%;
   width:90%
}

p {font-size:25px;
font-family: Helvetica,Arial,sans-serif;
}
body
{
background-image:url('Loons-bkg.jpg');
    width: 100%;
    padding:0;
    height: 100%;
}

#logo{
    width: 100%;
    height: 190px;
    background:url('Loons-Title.png');
     background-position:center top ;
    background-size:contain;
    background-repeat:no-repeat;
    }


div.wrapper{
    position:relative;
    width: 80%;
    height: 100%;
    margin-left: 10% ;

    }
#blog{
    position:absolute;
    border-style:solid;
    border-width:2px;
    width:60%;
    padding: 30px;
    min-height:92% ;
    background: rgb(255, 250, 250); /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 250, 250, .5);
    left:20%;
    }


#navbar {
    height: 65px;
    width: 700px;
    list-style:none;
    padding: 0;
    margin:0 auto;
    overflow: hidden;
    }

#navbar li {
    float: left;
    background-image: url(image_path('Loons-menu-sprite.png'));
}
#navbar a {
    display: block;
    padding-top: 66px;
    text-decoration: none;

}
#nav-bio { width: 79px;

}
#nav-bio:hover {
    width: 79px;
    background-position: 0px -66px;
}
#nav-music { width: 137px;

    background-position: -79px 0px;}
#nav-music:hover {
    width: 137px;
    background-position: -79px -66px;
}
#nav-video {
    width: 121px;
    background-position: -216px 0px;
 }
#nav-video:hover {
    width: 121px;
    background-position: -216px -66px;
}
#nav-press {
    width: 140px;
    background-position: -337px 0px;
 }
 #nav-press:hover {
    width: 140px;
    background-position: -337px -66px;
}
#nav-shows {
    width: 129px;
    background-position: -477px 0px;
}
#nav-shows:hover {
    width: 129px;
    background-position: -477px -66px;
}
#nav-shop {
    width: 94px;
    background-position: -606px 0px;
 }
 #nav-shop:hover {
    width: 94px;
    background-position: -606px -66px;
}

#social-media {
    position:absolute;
    height: 97px;
    width: 700px;
    list-style:none;
    padding: 0;
    margin:0 auto;
    overflow: hidden;
    }
#social-media li {
    float: left;
 background-image: url(Social-Media-Sprite.png);

}

#social-media a{
    display: block;
    padding-top: 70px;
    text-decoration: none;
    text-indent:-9999px;
    }

#facebook { width: 103px;}
#facebook:hover {
    width: 103px;
    background-position: 0px -90px;}
  #bandcamp {
    width: 114px;
    background-position: -103px 0px;}
#bandcamp:hover {
    width: 114px;
    background-position: -108px -90px;
        }
#rc {
    width: 103px;
    background-position: -217px 0px;}
#rc:hover {
        width: 103px;
        background-position: -217px -90px;
        }
#social{
 position:absolute;
 bottom: 12%;
 right: 12%;

}

这是应用程序视图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Loons</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
<div id = 'logo'></div>
<ul id="navbar">
        <li id="nav-bio"><a href="#">Bio</a></li>
        <li id="nav-music"><a href="#">Music</a></li>
        <li id="nav-video"><a href="#">Video</a></li>
        <li id="nav-press"><a href="#">Press</a></li>
        <li id="nav-shows"><a href="#">Shows</a></li>
        <li id="nav-shop"><a href="#">Shop</a></li>
</ul>
<div class = 'wrapper'>
    <div id = 'blog'>
<%= yield %>

                              <iframe width="600" height="500" src="http://www.youtube.com/embed/MQ24QnrPKwo" frameborder="0" allowfullscreen></iframe>

       </div>
     <div id ="social">
              <ul id="social-media">
           <li id="facebook"><a href="https://www.facebook.com/pages/Loons/157520584337783?v=info">b</a></li>
           <li id="bandcamp"><a href="http://loonsmusic.bandcamp.com/">b</a></li>
           <li id="rc"><a href="#">b</a></li>
       </ul>
       </div>
   </div>
</body>
</html>
4

1 回答 1

2

如果您使用了，rails scaffold --no-stylesheets您将避免将来不得不删除脚手架.css。

于 2012-05-19T19:53:33.413 回答