<!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> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>无标题文档</title> <link rel="shortcut icon" href="img/icoTest.ico"> </head> <style type="text/css"> /*公共样式*/ ul,li,div{ margin: 0; padding: 0; } li{ list-style: none; } .floatLeft{ float: left; } .floatRight{ float: right; } .floatClear{ clear: both; } /*样式*/ .container{ position: relative; width: 302px; height: 500px; margin: auto; } .container .nav{ width:212px; } .container .nav li{ width: 80px; height: 30px; border: 1px solid #ccc; border-bottom: none; border-radius: 10px 10px 0 0; background-color: #eee; } .container .nav .native{ position: absolute; z-index: 2; height: 31px; background-color: #fff; } .content{ z-index: 1; width: 210px; height: 300px; border: 1px solid #ccc; border-radius: 0 0 10px 10px; } </style> <body> <div class="container"> <ul class="nav"> <li class="floatLeft native"></li> <li class="floatRight"></li> </ul> <div class="floatClear"></div> <div class="content"></div> </div> </body> <html>