Make the Display Effect of the LCD screen with pure CSS and the LCD screen with css
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> CSS liquid crystal </title>
<Style type = "text/css" title = "">
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0 ;}
# Mydemo {margin: 100px auto; width: 600px ;}
. Clock {font-size: 18px; width: 9em; height: 14em; border: 1px solid # ddd; position: relative ;}
. Clock div {position: absolute; border-style: solid ;}
. Clock. l,. clock. r,. clock. u,. clock. d {width: 0; height: 0; overflow: hidden ;}
. Clock. v {width: 0; height: 5em; border-width: 0 0.5em; border-color: #565656 ;}
. Clock. v. u {border-style: dotted solid dotted; border-width: 0 0.5em 0.5em; border-color: transparent #565656 transparent; top:-0.5em; left:-0.5em ;}
. Clock. v. d {border-style: solid dotted; border-width: 0.5em 0.5em 0 0.5em; border-color: #565656 transparent; left:-0.5em; bottom:-0.5em}
. Clock. h {width: 5.5em; height: 0; border-width: 0.5em 0; border-color: #565656 ;}
. Clock. h. l {border-style: dotted solid dotted; border-width: 0.5em 0.5em 0.5em 0; border-color: transparent #565656 transparent; top:-0.5em; left: -0.5em ;}
. Clock. h. r {border-style: dotted solid; border-width: 0.5em 0 0.5em 0.5em; border-color: transparent #565656; top:-0.5em; right: -0.5em ;}
. Clock. n1 {left: 0.5em; top: 1.5em ;}
. Clock. n2 {left: 0.5em; top: 7.5em ;}
. Clock. n4 {left: 7.5em; top: 7.5em ;}
. Clock. n5 {left: 7.5em; top: 1.5em ;}
. Clock. n6 {top: 0.4em; left: 1.8em ;}
. Clock. n3 {top: 12.5em; left: 1.8em ;}
. Clock. n7 {top: 6.5em; left: 1.8em ;}
. C1. n1,. c1. n2,. c1. n3,. c1. n6,. c1. n7 {display: none}
. C2. n1,. c2. n4 {display: none}
. C3. n1,. c3. n2 {display: none}
. C4. n2,. c4. n3,. c4. n6 {display: none}
. C5. n2,. c5. n5 {display: none}
. C6. n5 {display: none}
. C7. n1,. c7. n2,. c7. n3,. c7. n7 {display: none}
. C8 {}
. C9. n2 {display: none}
. C0. n7 {display: none}
</Style>
<Script type = "text/javascript" language = "javascript">
Var num = 0, size = 1;
Function addNumber (){
Var clock = document. getElementById ("mydemo"). children [0];
Clock. className = "clock c" + (++ num % 10 );
Return false;
}
Function resize (){
Var clock = document. getElementById ("mydemo"). children [0];
Clock. style. fontSize = (+ size % 20) + "px ";
Return false;
}
</Script>
</Head>
<Body>
<Div id = "mydemo">
<Div class = "clock c0">
<Div class = "v n1"> <div class = "u"> </div> <div class = "d"> </div>
<Div class = "v n2"> <div class = "u"> </div> <div class = "d"> </div>
<Div class = "h n3"> <div class = "l"> </div> <div class = "r"> </div>
<Div class = "v n4"> <div class = "u"> </div> <div class = "d"> </div>
<Div class = "v n5"> <div class = "u"> </div> <div class = "d"> </div>
<Div class = "h n6"> <div class = "l"> </div> <div class = "r"> </div>
<Div class = "h n7"> <div class = "l"> </div> <div class = "r"> </div>
</Div>
</Div>
<Input type = "button" value = "change size" onclick = "resize ()"/>
<Input type = "button" value = "number accumulation" onclick = "addNumber ()"/>
<Div> http://www.999jiujiu.com/</div>
</Body>
</Html>