用CSS如何实现此效果？

怒放的生命

911

发布于
2016-02-29

图片描述

效果如上图。

看起来貌似很简单，但是做起来有难度。路过的学霸们能否指点一下？

学渣在此谢过了 ~~(╯﹏╰)||

css html

阅读 3.4k

7 个回答

得票最新

xaobi

发布于
2016-03-01

更新于
2016-03-01

✓ 已被采纳

demo:nav

cd150505

1.1k368

发布于
2016-03-01

.item {
border:1px solid green;
border-bottom: 1px solid #000;
}

.item:hover{
border:1px solid #000;
border-bottom: 0 // 或者 1px solid transparent
}

wuyulau

345

发布于
2016-03-01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="a.css">
  <style>
    *{margin: 0; padding: 0;}
    li{list-style: none;}
    .box{margin: 50px 0 0 150px}
    ul{border-bottom:1px solid #000; width: 100%; height: 50px;  }
    ul li{float: left; width:70px; border:1px solid #000;margin-left:-1px;text-align: center; height: 50px; line-height: 50px;}
    li:hover,.act{border:1px solid red; border-bottom: 1px solid #FFF; position: relative;z-index: 2;}
  </style>
</head>
<body>
 <div class="box">
     <ul>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
     </ul>
 </div>
</body>
</html>

这样子的

chic

1.1k93951

发布于
2016-03-01

http://jsbin.com/yagurutore/edit?html,css,output

施展TIGERB

9.5k116994

发布于
2016-03-01

css hover border-bottom:none

kikong

19.1k31320

发布于
2016-03-01

更新于
2016-03-01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        li{
            list-style: none;
        }
        ul.tabBox{
            border-bottom:1px solid #000;
            width: 100%;
            height: 53px;
            font-size: 0;
        }
        ul.tabBox li{
            font-size: 16px;
            letter-spacing: normal;
            word-spacing: normal;
            display: inline-block;
            width:70px;
            border:1px solid blue;
            border-bottom: 0;
            margin-left:-1px;
            text-align: center;
            height: 52px;
            line-height: 52px;

        }
        ul.tabBox li:hover{
            border:1px solid black;
            height: 52px;
            border-bottom: 1px solid #FFF;
            position: relative;z-index: 2;
        }
        ul.tabBox li:first-child{
            margin-left:50px;
        }
    </style>
</head>
<body>
    <ul class="tabBox">
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
        <li>Tab4</li>
        <li>Tab5</li>
    </ul>
</body>
</html>