邊框問題。。。
我的css代碼和老師幾乎是一樣的,為什么我寫出來的用了select類選擇器的左邊框在底部的時候是斷層的的,而老師是這樣平滑連接的呢?
css:
*{
? ?margin:0;
? ?padding:0;
? ?list-style:none;
? ?font-size:12px;
}
.notice{
? ?width:298px;
? ?height:98px;
? ?margin:10px;
? ?border:1px solid #eee;
? ?overflow:hidden;
}
.noticeTitle{
? ?height:27px;
? ?position:relative;
}
.noticeTitle ul{
? ?position:absolute;
? ?width:301px;
? ?left:-1px;
}
.noticeTitle li{
? ?float:left;
? ?width:58px;
? ?height:26px;
? ?line-height:26px;
? ?text-align:center;
? ?overflow:hidden;
? ?padding:0 1px;
? ?background:#f7f7f7;
? ?border-bottom:1px solid #eee;
}
.noticeTitle li.select{
? ?background:#FFF;
? ?border-bottom:#FFFFFF;
? ?border-left:1px solid #eee;
? ?border-right:1px solid #eee;
? ?padding:0;
}
.noticeTitle li a:link,.noticeTitle li a:visited{
? ?text-decoration: none;
? ?color:#000;
}
.noticeTitle li a:hover{
? ?color:#F90;
}
html:
<!doctype html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>tab1</title>
? ?<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
? ?<div id="notice" class="notice">
? ? ? ?<div id="noticeTitle" class="noticeTitle">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">公告</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">規(guī)則</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">論壇</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">安全</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="select">
? ? ? ? ? ? ? ? ? ?<a href="#" >公益</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ?</ul>
? ? ? ?</div>
? ?</div>
</body>
</html>