<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>testdiv</title> <style> #d1,#d3,#d4{ margin:5px 0px; width:200px; background-color:#eee; } #d1{ border:1px solid #444; height:100px; padding:0px 15px; } #d3,#d4{ margin-top:0px; margin-bottom:0px; border-left:1px solid #444; border-right:1px solid #444; } .m{ height:100px; width:200px; padding:0px 15px; position:relative; } #d3 .m{ margin:-4px 0px; } #d4 .m{ margin:-5px 0px; } .rt,.rb{ display:block; width:232px; margin-left:0px; margin-right:0px; } .rt{ margin-top:5px; } .rb{ margin-bottom:5px; } .rt *,.rb *{ display:block; height: 1px; overflow: hidden; background-color:#eee; border-left:1px solid #444; border-right:1px solid #444; } .r1{ margin: 0 5px; background-color:#444; } .r2{ margin: 0 3px; border-width:0px 2px; } .r3{ margin: 0 2px; } .r4{ margin: 0 1px; height: 2px; } .rb1{ margin: 0 6px; background-color:#444; } .rb2{ margin: 0 4px; border-width:0px 2px; } .rb3{ margin: 0 3px; } .rb4{ margin: 0 2px; } .rb5{ margin: 0 1px; height: 2px; } </style>
</head> <body> <div id="d1">R=...</div> <b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div id="d3"> <div class="m">R=5</div> </div> <b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> <b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b class="rb4"></b><b class="rb5"></b></b> <div id="d4"> <div class="m">R=6</div> </div> <b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b class="rb2"></b><b class="rb1"></b></b> </body> </html> |