1.background背景设置的标签:#ccd8e0背景颜色 url(img/bg.jpg)背景图片括号内为背景图片的路径 repeat当层的大小大过你的背景图片的话,背景图片会重复显示,直到把空白的地方填满 -x 是在X轴的方向上 left 水平方向背景居左设置
bottom竖直方向背景居底部
2.color字体颜色标签 #444表示颜色的的代码
3.font字体设置 normal是字体形式正常不加粗也不斜体之类的样式 62.5%字体大小设置 Tahoma,sans-serif字体设置 中文一般是"宋体"
好好学习,祝你成功!
这得看你设定的颜色是否存在规律，如果是杂乱无章的那就只能一个个来设定了。比方说第一个是红色，第二个是黄色，第三个是蓝色，第四个是红色，第五个是黄色，第六个是蓝色……也就是红黄蓝这样循环变化的，可以这样：
<style>.A div:nth-child(3n+1) {color:red}
.A div:nth-child(3n+2) {color:yellow}
.A div:nth-child(3n+3) {color:blue}
</style>
<div class="A">
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<div>666</div>
<div>777</div>
<div>888</div>
<div>999</div>
</div>
如果想再复杂一些的，那就只能通过js代码来实现了。
<style>/* 经常发现很多相同的属性写了很多遍，只是前叙不同，这是为了兼容更多浏览器的用法，前叙都是这些浏览器专用的私有属性
-webkit- webkit类浏览器专用，苹果浏览器，谷歌浏览器
-moz- moz类浏览器专用，火狐浏览器
-ms- IE类浏览器专用，IE浏览器
-o- webkit类浏览器专用，opera浏览器 */
.menuHolder ul ul {
/* transform-origin:x y 设置旋转元素的基点位置(通俗就是从x y z坐标为起点，一般会跟住旋转rotate一并使用) 这个是2D旋转x y，3D旋转则是x y z */
-webkit-transform-origin: 0 0
-moz-transform-origin: 0 0
-ms-transform-origin: 0 0
-o-transform-origin: 0 0
transform-origin: 0 0
/* transform:rotate() 设置旋转元素旋转的角度单位是deg，看成度即可比如旋转45度就是transform:rotate(45deg) */
-webkit-transform: rotate(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
/* transition: property duration timing-function delay
transition设置元素动画效果
property默认是all，对所有元素起作用；
duration规定完成过渡效果需要多少秒或毫秒，默认0，也就是默认不过渡；
timing-function规定速度效果的速度曲线，如ease-in-out先快后慢
delay动画延迟多长时间才开始，单位秒或毫秒 */
-webkit-transition: 1s
-moz-transition: 1s
-ms-transition: 1s
-o-transition: 1s
transition: 1s
}
.menuHolder li.s2:nth-of-type(3) > a {
/* background，设置元素背景，#bbb为颜色值，此处设置是背景色为#bbb（浅灰色） */
background: #bbb
-webkit-transform: rotate(30deg)
-moz-transform: rotateZ(30deg)
-ms-transform: rotate(30deg)
-o-transform: rotate(30deg)
transform: rotate(30deg)
}
.menuHolder .a6 li:nth-of-type(6) > a {
background: #444
-webkit-transform: rotate(75deg)
-moz-transform: rotateZ(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
}
.menuHolder li.s1:hover ul.p2 {
-webkit-transform: rotate(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
}
.menuWindow {
/* 在此元素内的所有元素无论多大也不会溢出，超过的部分会被隐藏 */
overflow: hidden
/* 此元素受绝对定位影响，通过x y坐标来定位，如left ，top ，right ，bottom（只能同时使用left/right top或left/right bottom） */
position: absolute
left: 0
top: 0
/* 元素层块的先后，数字越大的显示越前，如有一个z-index：99的层块，一个z-index：100的层块，100层会覆盖99层 */
z-index: 100
-webkit-transition: 0s 1s
-moz-transition: 0s 1s
-ms-transition: 0s 1s
-o-transition: 0s 1s
transition: 0s 1s
}
.menuHolder:hover .menuWindow {
-webkit-transition: 0s 0s
-moz-transition: 0s 0s
-ms-transition: 0s 0s
-o-transition: 0s 0s
transition: 0s 0s
}
.menuHolder span {
-webkit-transform: rotate(5deg)
-moz-transform: rotateZ(5deg)
-ms-transform: rotate(5deg)
-o-transform: rotate(5deg)
transform: rotate(5deg)
}
</style>
