最近学习了几个选项卡的案例，有用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 = Attribute('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，不然下面左右边框会突出来。
本文发布于:2024-01-30 03:19:31，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170655598718859.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
