0

我正在设计一个网页。

我想在我的页面中使用便笺（便利贴）。其中，每一个便笺是在我们点击添加按钮时添加的……便笺的颜色必须随机变化，并且必须倾斜，并且必须具有悬停效果。

我怎样才能做到这一点 ？只能使用 CSS 和 HTML。

我尝试了从网站获得的代码

http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/

但是，我的网站的某些部分作为列表..所以当我使用此代码时，它也会将列表项设置为便笺..我只想将属性提供给 div

HTML

<html>
<head>

<ul>

    <li> Not to use sticky note </li>
 </ul>

<div class="sticky"> -------------want to give property to this div only
<ul class="sticky">  
<li > 
<p >Stickynote1</p>  
</li>  
<li class="r" >  
stickyonote2  
</li>  
</ul>
</div>
<div>
</div>  

</div>
</div>
</div>
</div>
</body>
</html>
4

1 回答 1

2

仅使用 CSS 和 HTML 是不可能生成随机数（因此是随机颜色）的。需要 Javascript 或像 PHP 这样的服务器端语言。

但是，您可以通过列出项目来模拟随机颜色，并让每个音符都有随机颜色。但是每次重置页面时选择的随机颜色都是相同的。

HTML

<ul class="sticky">
<li>Note text</li>
<li>Note text</li>
<li>Note text</li>
</ul>

CSS

.sticky li { background-color: red; }
.sticky li:nth-child(2n) { background-color: green; }
.sticky li:nth-child(3n) { background-color: yellow; }
.sticky li:nth-child(5n) { background-color: blue; }

在这种情况下，音符序列将是

红色, 绿色, 黄色, 绿色, 蓝色, 绿色, 红色, 绿色, 黄色, 蓝色

这会给第一次使用的用户一种随机的感觉。

如果 2n 和 3n 具有相同的值，则 3n 将优先，而如果 3n 和 5n 具有相同的值，则 5n 将优先，依此类推。

您发布的链接中的方法与我写的类似。请参阅此部分以获取随机颜色

ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

您已经改变了很多问题，但是如果您想对 div 应用相同的效果而不是 'ul li，请尝试将 '.sticky li:nth-child' 的出现更改为 'div.sticky:nth-child

于 2013-08-08T05:50:54.520 回答