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

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

纯CSS实现自适应标签列表切换代码点击鼠标切换不同列表
纯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实现自适应标签列表切换代码点击鼠标切换不同列表!

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏

'); })();