最近学习了几个选项卡的案例,有用javascript实现的,有用纯CSS实现的,新浪网的选项卡我之前就实现过,感觉难度也不是很大。只是今天在观察的时候把网页放大发现,我实现的效果和新浪网实现的效果在细节上有些小出入,就是当前选项卡的上边框变为橙色的时候,橙色边框的上面还有一条灰色的边框(图1),而新浪网的上边框上面是没有这条灰色细线的。
如图1
图2 新浪网效果
这个细节如果不是把网页放大来看我都没注意到,于是我就想去掉这条灰色的线。
这条灰色的线是由borer:1px solid #dbdee1生成的,我如果去掉,就都没有边了,如果加上,就都有,那新浪网是怎么实现的呢?
没办法只好去翻新浪网的源代码,看了以后才恍然大悟,原来新浪网实现的这个边框的效果是一张图片做背景,背景自带的边框,不是用border实现的。这张背景图片宽度只有一个像素,水平方向平铺开的效果如下。
使用的时候,使用雪碧图来实现,代码如下:
background: url(images/bg1px.png) 0 -32px repeat-x;
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 360px;
margin: 100px auto;
position: relative;
}
.tab_list {
height: 36px;
background: url(images/bg1px.png) 0 -32px repeat-x;
}
.tab_list li {
float: left;
height: 36px;
line-height: 36px;
padding: 0 20px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}
.tab_list .current {
border-top: 3px solid #ff8400;
border-left: 1px solid #dbdee1;
border-right: 1px solid #dbdee1;
background-color: #fff;
color: #333;
}
.tab_con{
height: 200px;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
padding-top: 10px;
}
.item li{
height: 35px;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">抗疫</li>
<li>图片</li>
<li>专栏</li>
<li>热点</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
<ul>
<li>提高科学精准防控水平</li>
<li>零下十几度 吉林长春方舱医院怎么建?</li>
<li>本轮疫情中,为何无症状感染者如此之多?</li>
<li>6个城市昨日新增阳性超百例,变化趋势一图读懂</li>
<li>商品介绍模块内容</li>
</ul>
</div>
<div class="item">
<li>春分时节赏春光</li>
<li>江西婺源油菜花</li>
<li>杭州西湖樱花</li>
<li>西藏林芝桃花</li>
</div>
<div class="item">
<li>网络电影IP生态观察</li>
<li>中生代男演员的自我修养</li>
<li>中国足球疯狂欠薪错在谁?</li>
<li>2021全世界4000所大学胜者排名</li>
</div>
<div class="item">
<li>金羊网评:破解乡村振兴人才瓶颈</li>
<li>海淀区创新1+4政策体系</li>
<li>中国天眼给力!重复快速射电暴"身份证"找到</li>
</div>
</div>
</div>
<script>
// 获取标签部分的所有元素对象
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
// 获取内容部分的所有内容对象
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) { // for循环绑定点击事件
lis[i].setAttribute('index', i); // 开始给5个小li设置索引号
lis[i].onmouseover = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 下面的显示内容模块
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
</body>
</html>
用到的图像bg1px.png
还需要注意把列表项li设置为border-box,不然下面左右边框会突出来。