CSS之邊框覆蓋

時間 2019-11-10

標籤 css 邊框覆蓋欄目 CSS 简体版

原文原文鏈接

今天想作一個淘寶導航來練練手，遇到了邊框覆蓋的問題。以下圖：css

li的紅色邊框蓋不住該灰色邊框。後來問經驗人士告訴我，這種邊框覆蓋是會出現沒法100%保證正常的狀況，遂獲得以下3中解決方案：html

1.之後遇到須要邊框覆蓋的，通常這個被覆蓋邊框用1px的圖片平鋪，這樣不佔用位置，上面的來覆蓋能夠輕鬆實現。spa

2.在移動到改元素上時，把被覆蓋邊框的邊框顏色設置爲什麼覆蓋邊框的顏色同樣。code

3.基於2，在移動到改元素上時，把被覆蓋邊框的邊框顏色設置爲none。xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<div class="content" >
    <div class="nav_left">
        <ul>
        <li class="nav_first_li"><div><span>服飾內衣</span></div></li>
        <li class="selected"><div><span>汽車用品</span></div></li>
        <li><div><span>居家傢俱</span></div></li>
        <li><div><span>在線教育</span></div></li>
        <li><div><span>文化娛樂</span></div></li>
        <li class="nav_last_li"><div><span>手機數碼</span></div></li>
        </ul>
    </div>
    <div class="nav_right">
    
    
    </div>
</div>
</body>
</html>

/* CSS Document */htm

body,ulblog

{
margin:0 ;
padding:0;
}
.content{
margin:0 auto;
padding:0;
background:white;
font-size:14px;
position:relative;
}
.nav_left,.nav_left ul{
width:100px;
}
.nav_left{
float:left;
margin:60px 0 0 60px;
}圖片

.nav_left ul li{
list-style:none;
line-height:2;
width:100px;
border: 1px solid white;
border-left:1px solid #888;
border-right:1px solid #888;
margin-top:-1px;get

}
.nav_left ul li:hover
{
cursor:pointer;
border:1px solid red;
border-right:1px solid white;
position:relative;
z-index: 300; it

}
.nav_left ul li:hover div
{
border-top:1px solid red;

}
.nav_left ul li div
{

border-top:1px solid #666;
width:80px;
text-align:center;
margin:-1px 10px 0 10px;
padding:0;
position:relative;

}
.nav_left ul .nav_last_li
{
border-bottom:1px solid #666;

}.nav_left ul .nav_first_li{ border-top:1px solid #666;}.nav_left ul .nav_first_li div{ margin-top:-1px;}.nav_right{ width:500px; height:500px; border:1px solid red; float:left; position:relative; z-index:200; left:1px; top:59px;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。