You can understand the border usage in css at a glance. Take a look at the Code:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> test </title>
<Style type = "text/css">
Body {margin: 0px; padding: 0px ;}
# Arrow {width: 12px; height: 12px; border: 1px solid # ccc; margin: 50px ;}
# ArrowOpen {visibility: hidden ;}
. Closed {width: 0px; height: 0px; border-left: #060 6px solid; border-bottom: # fff 6px solid; border-top: # fff 6px solid ;}
. Open {width: 0px; height: 0px; margin-top:-8px; margin-left:-1px; border-left: # fff 6px solid; border-right: # fff 6px solid; border-top: #060 6px solid ;}
</Style>
<Script type = "text/javascript" src = "jquery-1.7.js"> </script>
<Script type = "text/javascript" language = "javascript">
$ (Document). ready (function (){
// Hide the right arrow
$ ("# ArrowClose"). click (function (){
If(visibility (this).css ("visibility ")! = "Hidden "){
Certificate (this).css ("visibility", "hidden ");
$ ("# ArrowOpen" ).css ("visibility", "visible ");
}
})
// Hide the downward arrow
$ ("# ArrowOpen"). click (function (){
If(visibility (this).css ("visibility") = "visible "){
Certificate (this).css ("visibility", "hidden ");
$ ("# ArrowClose" ).css ("visibility", "visible ");
}
})
})
</Script>
</Head>
<Body>
<Div id = "arrow">
<Div id = "arrowClose" class = "closed"> </div>
<Div id = "arrowOpen" class = "open"> </div>
</Div>
</Body>
</Html>
Give a demo
Http://www.bkjia.com/uploadfile/2012/0217/20120217103207206.zip
From if one day...