纯CSS实现自适应标签列表切换代码点击鼠标切换不同列表！-西德SEO

作者：西德SEO

发布于 2020-10-13

评分 :

在网站建设的过程中尤其是前端设计，通常会调用多个文章列表，这样会使得网站看起来非常“臃肿”，这时候使用JS来实现标签列表的折叠切换不仅可以大大提高网页空间的使用率，使得网站卡起来清爽许多，同时不需要减少列表数量，有利于网站优化，实在是一举两得的美事，但往往说起来容易做起来难，尤其是一些新手，对代码的运用与掌握并不熟悉，就很难实现纯CSS实现自适应标签列表切换的功能，不过没关系，西德SEO来告诉大家超级简单的纯CSS实现自适应标签列表切换代码来实现点击鼠标切换不同列表！

资源汇总：

CSS文件
|_style.css
|_index.css
|_m_view.css
|_pc_view.css
图片文件
|_banner1.jpg
|_banner2.jpg
|_banner3.jpg
|_hot.png
|_see.png
|_xxx.gif
|_zan.png
html代码文件
|_index.html

我们先来处理网页的头部部分，也就是<head>与</head>之间的内容，通常头部是引用网页所需要的CSS文件，在头部添加以下代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<link rel='stylesheet' id='index-css'  href='css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='index-css'  href='css/index.css' type='text/css' media='all' />

而后在主题<body>下面添加以下html代码用以创建标签列表切换

<div class="juzhong">
  <div class="widget widget-tab">
    <input type="radio" name="widget-tab" id="new" checked="checked"/>
    <input type="radio" name="widget-tab" id="hot"/>
    <input type="radio" name="widget-tab" id="random"/>
    <div class="widget-title">
      <ul>
        <li class="new">
          <label for="new">学校新闻</label>
        </li>
        <li class="hot">
          <label for="hot">通知公告</label>
        </li>
        <li class="random">
          <label for="random">教研学术</label>
        </li>
      </ul>
    </div>
    <div class="widget-box">
      <ul class="new-list">
        <li class="we"> <img src="images/banner1.jpg" alt="" /> <a href="#" class="fwe">我校举办“互联网+”创业大赛</a>
          <p>1月9日上午，我校2019-2020学年第一学期期末科技工作会议在图书馆103会议室召开。校长孟长功&#8230;</p>
        </li>
        <li><a href="#">学校举办星语心愿•爱动会</a><span> 2020.02.12</span></li>
      </ul>
      <ul class="hot-list">
        <li class="we"> <img  src="images/banner2.jpg"  alt="" /> <a href="#" class="fwe">秉承四心原则，提高培养质量</a>
          <p>陈宝生部长指出，高教大计、本科为本，本科不牢、地动山摇。在教务处工作的我倍感身上肩负的使命和责任。</p>
        </li>
        <li><a href="#">关于深化本科教育教学改革意见</a><span> 2020.02.14</span></li>
      </ul>
      <ul class="random-list">
        <li class="we"> <img  src="images/banner3"  alt="" /> <a href="#" class="fwe">3D打印技术专场学术报告会</a>
          <p>多孔模型具有质量轻、复合性能好的特点，在航空、航天、船舶等行业具有广泛应用前景，广受关注。相比传统材料</p>
        </li>
        <li><a href="#">我校参加省高新技术成果展</a><span> 2020.02.14</span></li>
      </ul>
    </div>
  </div>
</div>

之后保存html文档，并使用浏览器打可以看到我们已经使用纯CSS实现自适应标签列表切换代码点击鼠标切换不同列表，在减少了使用JS的同时使得浏览器渲染速度得到了很好的优化，这让网页加载速度也有一定的提升有助于网站优化！

资源压缩包下载探针：https://seocid.lanzous.com/iRWHnhelste

未经允许不得转载：西德SEO » 纯CSS实现自适应标签列表切换代码点击鼠标切换不同列表！

纯CSS实现自适应标签列表切换代码点击鼠标切换不同列表！

相关推荐

热门推荐

新型推广模式云媒体打造高权重平台强强联合询盘接不断！

热门文章

站内搜索

站长推荐

热门标签

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏