新浪网选项卡实现的几个小细节

最新推荐文章于 2024-09-02 20:34:02 发布

蒲公英1001

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量1.1k

点赞数 2

文章标签： css css3 html javascript

本文链接：https://blog.csdn.net/wangyining070205/article/details/123740679

版权

最近学习了几个选项卡的案例，有用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，不然下面左右边框会突出来。

蒲公英1001

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
新浪网选项卡实现的几个小细节

最近学习了几个选项卡的案例，有用javascript实现的，有用纯CSS实现的，新浪网的选项卡我之前就实现过，感觉难度也不是很大。只是今天在观察的时候把网页放大发现，我实现的效果和新浪网实现的效果在细节上有些小出入，就是当前选项卡的上边框变为橙色的时候，橙色边框的上面还有一条灰色的边框（图1），而新浪网的上边框上面是没有这条灰色细线的。如图1图2 新浪网效果这个细节如果不是把网页放大来看我都没注意到，于是我就想去掉这条灰色的线。这条灰色的线是由borer:1px solid #dbdee1生成的
复制链接

扫一扫