Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml> <pead> <meta charset= "UTF-8"/> <title> example: CSS common surface of the writing </title> <style> @charset "Utf-8"; body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0} body,input,textarea{ Font-size:12px;font-family:microsoft Yahei} body{text-align:center;color: #33383D; background: #f1f1f1 URL (.. /.. /img/body.gif) Repeat} ul,ol{list-style:none} img{border:0} button,input {line-height:normal;*overflow:visible} Input,textarea{outline:none} a{color: #3B8DD1; Text-decoration:none} a:hover{color: #8CAC52}. Demo-header{position: Relative;height:22px;background-color: #33363B; line-height:22px;padding:2px 10px;text-align:left;} . Demo-name{color: #ccc; Demo-title,.demo-footer{height:0;overflow:hidden}. demo-container{clear:both;padding : 40px 10px 20px;text-align:left;margin:0 auto;line-height:18px;} . demo h2{font-size:15px;padding-bottom:6px;margin-bottom:20px;border-bottom:solid 1px #ddd;} </style> </ Head> <body> <p class= "demo-title" >css common surfacing of the examples show </p> <div class= "Demo-container demo" > <style type= " Text/css "> demo{width:450px;position:relative}/* Poptip/* poptip{position:absolute;top:20px;left:20px; padding:6px 10px 5px;*padding:7px 10px 4px;line-height:16px;color: #DB7C22; Font-size:12px;background-color: #FFFCEF; Border:solid 1px #FFBB76; border-radius:2px;box-shadow:0 0 3px #ddd;} . poptip-arrow{position:absolute;overflow:hidden;font-style:normal;font-family:simsun;font-size:12px; text-shadow:0 0 2px #ccc;} . poptip-arrow Em,.poptip-arrow I{position:absolute;left:0;top:0;font-style:normal; Poptip-arrow em{color: #FFBB76 ;} . Poptip-arrow I{color: #FFFCEF; text-shadow:none;} . poptip-arrow-top,.poptip-arrow-bottom{height:6px;width:12px;left:12px;margin-left:-6px; Poptip-arrow-left. poptip-arrow-right{height:12px;width:6px;top:12px;margin-top:-6px;} . Poptip-arrow-top{top: -6px; poptip-arrow-top em{top: -1px; poptip-arrow-top i{top:0px;} . Poptip-arrow-bottom{bottom: -6px; poptip-arrow-bottom em{top: -8px; poptip-arrow-bottom i{top: -9px;} . poptip-arrow-left{left:-6px} poptip-arrow-left em{left:1px; poptip-arrow-left i{left:2px;} . poptip-arrow-right{right:-6px} poptip-arrow-right em{left:-6px; poptip-arrow-right i{left:-7px;} </style> <div class= "Demo" > <div class= "Poptip" > <span class= "Poptip-arrow poptip-arrow-t Op "><em> </em><i> </i></span> <span class=" Poptip-arrow poptip-arrow-right "&G t;<em> </em><i> </i></span> <span class= "Poptip-arrow poptip-arrow-bottom" >&L t;em> </em><i> </i></span> <span class= "Poptip-arrow poptip-arrow-left" ><EM&G t; </em><i> </i></span> Hi, you know?! </div> <div class= "Poptip" > <span class= "poptip-arrow poptip-arrow-top" ><em> </em ><I> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "poptip-arrow poptip-arrow-right" ><em> </ Em><i> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "Poptip-arrow poptip-arrow-bottom" ><em> < /em><i> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "poptip-arrow poptip-arrow-left" ><em> </e M><i> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "Poptip-arrow poptip-arrow-top" ><em> < /em><i> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "Poptip-arrow poptip-arrow-right" ><em> ;/em><i> </I></SPAN> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "poptip-arrow poptip-arrow-bottom" ><em> &L T;/em><i> </i></span> Hi, you know? <br>! </div> <div class= "Poptip" > <span class= "Poptip-arrow poptip-arrow-left" ><em> < /em><i> </i></span> Hi, you know? <br>! </div> </div></div> </body> </ptml></td> </tr> </table>
Tip: You can modify some of the code before running
