创建便签（便利贴）

debugcn 发表于 Dev

维萨赫CP

我正在设计一个网页。

我想在我的页面中使用便签（便利贴）。在哪里，当我们单击添加按钮时，每个便笺都会被添加...便笺的颜色必须随机更改，并且必须倾斜并且必须具有一定的悬停效果。

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

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

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

但是，我的网站上有一部分内容是list..so，所以当我使用此代码时，它也会使列表项成为便签..我只想将属性分配给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>

菲利普·柯比布莱德（Philip Kirkbride）

仅使用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;
}