*{
margin:0; padding:0; list-style-type:none;/*手动清楚空隙*/ font-size:12px; font-family:"微软雅黑"}.searchbox { width:520px; height:80px; margin:40px auto 0 auto; border:1px solid red;}.searchbox ul{ width:500px; /*float:left;*/ height:35px; /*标签间隙*/} .searchbox ul li{ float:left;} .searchbox ul li a { text-decoration:none;/*下划线*/ color:#000000; font-size:14px; font-weight:bold; line-height:35px; padding:10px 25px;/*上下 左右间隙*/ /*内容*/ } .searchbox ul li.style1{ background:#000; color:#fff; } .searchbox ul li.style2{ background:#ff0000; color:#fff; } .searchbox ul li.style3{ background:#ff9900; color:#fff; } .bodys{ width:700px; height:200px; margin-left:220px; } .bodys input{ width:390px; height:30px; line-height:30px; padding:0 10px; float:left; }.bodys.one{
border:3px #000 solid; } .bodys.two{ border:3px #ff0000 solid; } .bodys.three{ border:3px #ff9900 solid; } .bodys.one1{ background:#000000; } .bodys.two2{ background:#ff0000; } .bodys.three3{ background:#ff9900; } .bodys button{ float:left; border:0; height:36px; width:100px; color:#000000; line-height:36px; text-align:center;/*shupingjuzhong */ overflow:hidden;/*鼠标移除*/ }
HTML
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>淘宝选项卡</title> <link href="style/table.css" rel="stylesheet" /> <link href="style/table.css" rel="stylesheet" /> <meta charset="utf-8" /></head><body>
<div class="searchbox"> <ul> <li><a herf="#"class="style1">宝贝</a></li> <li><a herf="#" ="style1">天猫</a></li> <li><a herf="#" ="style1">店铺</a></li> </ul> </div> <div> <div class="bodys"> <p><input type="text"value=""id=""class="one"placeholder="输入宝贝"/> <button class="one1">搜索</button> </p> <p> <input type="text" value="" id="" class="two" placeholder="输入宝贝" /> <button class="two">搜索</button> </p> <p> <input type="text" value="" id="" class="three" placeholder="输入店铺" /> <button class="three">搜索</button> </p> </div></body></html>