如何用css在顶部添加丝带？

发布于 2024-12-12 16:54:59 字数 2270 浏览 4 评论 0原文

我拼命地尝试在页面的右上角添加这个小 png 丝带。完全像这样： http://www.thebestdesigns.com/

我检查了他们的代码，但它得到当我在我的中使用它时搞砸了。看一下：

<style>

 html,body {
   background-color: #edecd8;

   margin:0;
   padding:0;
    height:100%;

 }

   #container {min-height:100%; position:relative;}



  #body {
    padding-bottom:20px;
  }


  a {text-decoration: none; color: black;}
  a:hover {color: #555555; border-bottom: 1px dotted black; }


#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:20px;/* Height of the footer */
  background: #edecd8;
  background-image:url(pattern.png);
  text-align:center;
  font-family: Century Gothic, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  }


.intro {
font-family: Century Gothic, sans-serif;
font-size: 15px;
font-variant: small-caps;
}

span.bottom {
    text-align: center;
    width:100%;
    position:absolute;
    bottom:0;   }

#mytable {
padding-top:30px;
}


</style>


</head>

<body>


 <div id="container">


 <div id="body">

<center>
<table div id="mytable" width="650" border="0" cellspacing="0" cellpadding="5" >
    <tbody>
    <tr>
      <td align="center" height="40"><img src="logo.jpg" alt="XXXX" width="100" height="30"></td>
    </tr>
    <tr>
      <td height="20" align="center" class="intro"> <a href="">online store</a> | <a href="">main website</a></td>
    </tr>
    <tr>
      <td height="352" align="center"><img src="ku.jpg" width="500" height="500"></td>
    </tr>
  </tbody>
  </table>
 </center>


  </div>



  <!-- Ola sto span class mporoun na xwresoun? -->
 <div id="footer"><span style class="bottom">  [email protected] | the athens store | Mitropoleos 37 | t: 2xx00    </div>
 </div>


</body>

</html>

我尝试了类似的东西，但是当我将它放入我拥有的两个 div 中时它就会出现。我能做些什么？有什么建议吗？

#ribbon {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}

原文

I try desperately to add this little png ribbon on the top right of my page. Exactly like this one: http://www.thebestdesigns.com/

I have checked their code, but it gets messed up when I use it in mine. Take a look:

<style>

 html,body {
   background-color: #edecd8;

   margin:0;
   padding:0;
    height:100%;

 }

   #container {min-height:100%; position:relative;}



  #body {
    padding-bottom:20px;
  }


  a {text-decoration: none; color: black;}
  a:hover {color: #555555; border-bottom: 1px dotted black; }


#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:20px;/* Height of the footer */
  background: #edecd8;
  background-image:url(pattern.png);
  text-align:center;
  font-family: Century Gothic, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  }


.intro {
font-family: Century Gothic, sans-serif;
font-size: 15px;
font-variant: small-caps;
}

span.bottom {
    text-align: center;
    width:100%;
    position:absolute;
    bottom:0;   }

#mytable {
padding-top:30px;
}


</style>


</head>

<body>


 <div id="container">


 <div id="body">

<center>
<table div id="mytable" width="650" border="0" cellspacing="0" cellpadding="5" >
    <tbody>
    <tr>
      <td align="center" height="40"><img src="logo.jpg" alt="XXXX" width="100" height="30"></td>
    </tr>
    <tr>
      <td height="20" align="center" class="intro"> <a href="">online store</a> | <a href="">main website</a></td>
    </tr>
    <tr>
      <td height="352" align="center"><img src="ku.jpg" width="500" height="500"></td>
    </tr>
  </tbody>
  </table>
 </center>


  </div>



  <!-- Ola sto span class mporoun na xwresoun? -->
 <div id="footer"><span style class="bottom">  [email protected] | the athens store | Mitropoleos 37 | t: 2xx00    </div>
 </div>


</body>

</html>

I tried something like that, but it gets up when I put it inside the two divs I have. What can I do? Any suggestions?

#ribbon {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可遇━不可求 2024-12-19 16:55:02

这是功能区所需的所有代码：

HTML

<div id="new-themes">
    <a href="/design/themes/">Wordpress Themes</a>
</div>

CSS

#new-themes {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

#new-themes a {
  background: url("/deck/wp-content/themes/tbd/images/ribbon-themes-red.png") no-repeat;
  display: block;
  height: 140px;
  width: 140px;
  text-indent: -9000px;
}

确保将 div 放在我们的正文中。

This is all the code you need for the ribbon:

HTML

<div id="new-themes">
    <a href="/design/themes/">Wordpress Themes</a>
</div>

CSS

#new-themes {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

#new-themes a {
  background: url("/deck/wp-content/themes/tbd/images/ribbon-themes-red.png") no-repeat;
  display: block;
  height: 140px;
  width: 140px;
  text-indent: -9000px;
}

Be sure to place the div right in our body.

回复收藏 0 原文

~没有更多了~