你是不是说的这种圆点依次出现的效果?如果是的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>
这个源码可以参考一下咯,自己用的时候还可以继续修改优化。
代码<!doctype html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<style>
*{
margin:0
padding:0
}
ul{
list-style-type:none
overflow:hidden
margin-left:200px
margin-top:20px
}
ul li{
margin-left:10px
float:left
color:red
display:block
border:1px solid red
}
a{
font-size:18px
color:black
text-decoration:none
}
a:hover{
color:red
}
ul li:hover{
border:0px solid white
}
#div1{
width:100px
height:100px
background:red
margin-left:200px
display:block
}
#div2{
width:100px
height:100px
background:blue
margin-left:200px
display:none
}
#div3{
width:100px
height:100px
background:yellow
margin-left:200px
display:none
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1')
var aDiv=document.getElementById('div2')
var bDiv=document.getElementById('div3')
var oUl=document.getElementById('but')
var aLl=oUl.getElementsByTagName('li')
for(var i=0i<aLl.lengthi++){
aLl[i].index=i
aLl[i].onclick=function(){
for(var i=0i<aLl.lengthi++){
oDiv.style.display="none"
aDiv.style.display="none"
bDiv.style.display="none"
}
//alert(this.index)
if(this.index==0){
oDiv.style.display="block"
}
if(this.index==1){
aDiv.style.display="block"
}
if(this.index==2){
bDiv.style.display="block"
}
}
}
}
</script>
</head>
<body>
<ul id="but">
<li><a class="ce" href="#">红</a></li>
<li><a href="#">篮</a></li>
<li><a href="#">黄</a></li>
</ul>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
1.打这些字符出来直接写到网页标题中,比如:·2.li自带圆点(如果你没去掉的话)
3.图片做个圆点或其他玩意,定义成背景图
如果你指的是<title></title>这个标题里面的文字,那css控制不了,只能打符号字进去:
<title>●你的标题</title>
<title>·你的标题</title>
大多数拼音输入法先:按v再按1,都能打出这些字符