我正在设计一个网页。
我想在我的页面中使用便利贴（post-it）。在我们单击添加按钮时添加每个粘滞便笺...粘滞便笺的颜色必须随机变化，并且必须倾斜并且必须具有一些悬停效果。
我该怎么做？只能使用CSS和HTML。
我尝试了从网站上获得的代码
但是，我把我的网站的一部分作为列表..所以当我使用这个代码时，它也使列表项成为粘滞便笺..我想只给一个div属性
<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>
答案 0 :(得分：2)
仅使用CSS＆amp ;;生成随机数（因此随机颜色）是不可能的。 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-子