创建粘滞便笺（post-it） [英] Creating sticky-notes ( post-it )
问题描述
我正在设计一个网页。
我想在我的页面中使用粘滞便笺。在哪里，当我们点击添加按钮时添加每个粘滞便笺...粘滞音符的颜色必须随机更改，并且必须倾斜，并且必须有一些悬停效果。
<我怎么能这样做？只有CSS和HTML必须使用。
我尝试了从网站获得的代码
但是，我把我的网站的一部分作为list..so，当我使用这个代码，它也使列表项目为粘滞便笺..我想只给予div
HTML
< html> ;
< head>
< ul>
< li>不使用便笺< / li>
< / ul>
< div class =sticky> -------------想给这个div的属性
< ul class =sticky>
< li>
< p> Stickynote1< / p>
< / li>
< li class =r>
stickyonote2
< / li>
< / ul>
< / div>
< div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
无法生成随机数随机颜色）。 HTML。然而，你可以通过一个项目列表来模拟随机颜色，并且每个注释都是随机颜色。
HTML
code>< ul class =sticky>
< li>注意文字< / li>
< li>注意文字< / li>
< li>注意文字< / 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：旋转（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
I am designing a web page.
And i want to use sticky-notes (post-it) in my page. Where, each sticky-note is added when we click an add button... Color of sticky notes must change randomly, and it must be tilted and must have some hover effect.
How can i do that ? Only CSS and HTML must be used.
I tried the code which i got from a website
But, i had some part of my website as list..so when i used this code, it also make the list items as sticky note.. i want to give property only to a 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>
It's not possible to generate a random number(and thus random color) using only CSS & HTML. Javascript or a server side language like PHP would be needed.
However you could simulate random colour by having a list of items and have each note a random colour. But random colour chosen would be the same every time you reset the page.
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; }
In this case the note sequence would be
red, green, yellow, green, blue, green, red, green, yellow, blue
Which would give the first time user a feeling of random.
Where 2n and 3n have the same values, 3n will take precedence, and where 3n and 5n have the same values, 5n will take precedence, and so on.
Method in the link you posted is similar to what I wrote. See this section for random color
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;
}
You've changed the question quite a bit but if you want to apply the same effect to the div instead of 'ul li try changing occurrences of '.sticky li:nth-child' to 'div.sticky:nth-child
这篇关于创建粘滞便笺（post-it）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
