CSS中的多个点是什么意思? 有什么作用?

html-css020

CSS中的多个点是什么意思? 有什么作用?,第1张

你好,你所展示的代码中有几种点。\x0d\x0a1).DesignMode .zoneTopMenu .CMSListMenuUL\x0d\x0a这上面的是CSS中的类的选择符,表示对标签中有class=“DesignMode ”下面的子元素中有class=“zoneTopMenu”的子元素中有class=“CMSListMenuUL”进行样式定义。\x0d\x0a2)处的点代表相对目录\x0d\x0a.代表当前目录\x0d\x0a..代表父级目录(上级目录)\x0d\x0a\x0d\x0a不知道你有没有理解!希望对你有所帮助!:)

你好,你所展示的代码中有几种点。

1).DesignMode .zoneTopMenu .CMSListMenuUL

这上面的是CSS中的类的选择符,表示对标签中有class=“DesignMode ”下面的子元素中有class=“zoneTopMenu”的子元素中有class=“CMSListMenuUL”进行样式定义。

2)处的点代表相对目录

.代表当前目录

..代表父级目录(上级目录)

不知道你有没有理解!希望对你有所帮助!:)

你是不是说的这种圆点依次出现的效果?如果是的haul,那就用动画来做就可以了。下面是源码,可以参考一下咯。另外,javascript也可以来控制依次出现。

<!DOCTYPE html>

<html>

<head>

<title>圆点依次出现</title>

<meta name="keywords" content="圆点依次出现"/>

<meta name="description" content="圆点依次出现"/>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<style>

*{

padding:0

margin:0

box-shadow:1px 1px gray inset,-1px -1px gray inset

}

#box{

position:relative

width:30%

height:300px

margin:0 auto

}

.dian{

position:absolute

width:20px

height:20px

border-radius:50%

top:270px

}

#dian1{

left:70%

animation:xdian1 2.5s both linear infinite

-webkit-animation:xdian1 2.5s both linear infinite/* Safari and Chrome */

}

#dian2{

left:80%

animation:xdian2 2.5s both linear infinite

-webkit-animation:xdian2 2.5s both linear infinite/* Safari and Chrome */

}

#dian3{

left:90%

animation:xdian3 2.5s both linear infinite

-webkit-animation:xdian3 2.5s both linear infinite/* Safari and Chrome */

}

@keyframes xdian1{

0%{background:gray}

33%{background:none}

68%{background:none}

100%{background:none}

}

@keyframes xdian2{

0%{background:none}

33%{background:gray}

68%{background:none}

100%{background:none}

}

@keyframes xdian3{

0%{background:none}

33%{background:none}

68%{background:gray}

100%{background:none}

}

</style>

</head>

<body>

<div id="box">

<span id="dian1"></span>

<span id="dian2"></span>

<span id="dian3"></span>

</div>

</body>

</html>

这个源码可以参考一下咯,自己用的时候还可以继续修改优化。