CSS的一些你可能不知道的强大技巧

栏目: CSS · 发布时间: 5年前

内容简介:现如今,各种前端框架盛行的时代,单纯的完成一些界面上的功能已经越来越方便了。然而,过多的使用了这些框架而不去多研究想想这类框架的具体实现,只是会用是不能迅速提高自己个人能力的,相反,用多了有时候会遮蔽自己的视野,无法完成自己的知识体系升级。今天,我就准备讲讲

现如今,各种前端框架盛行的时代,单纯的完成一些界面上的功能已经越来越方便了。然而,过多的使用了这些框架而不去多研究想想这类框架的具体实现,只是会用是不能迅速提高自己个人能力的,相反,用多了有时候会遮蔽自己的视野,无法完成自己的知识体系升级。今天,我就准备讲讲 CSS 能够做的一些功能交互,这些功能或许你之前第一时间想到的可能是用 js ,殊不知强大的 CSS 也能完成,希望通过我的分享能够增加你的知识视野。

1 tabs(标签页)

在线演示

CSS的一些你可能不知道的强大技巧

1.1 敲重点

  1. 相同 name 属性的 radio 组一次性只能选择一个,模拟面板切换
  2. 利用 radio 具有可聚焦属性,模拟点击事件
  3. 通过 CSS 派生选择器,结合 z-index 层级来完成内容显隐切换

1.2 关键代码

<div class="tab">
    <input type="radio" id="radio1" name="radiogroup"/>
    <label for="radio1">标签1</label>
    <section>内容1</section>
  </div>
  
  <div class="tab">
    <input type="radio" id="radio2" name="radiogroup"/>
    <label for="radio2">标签2</label>
    <section>内容2</section>
  </div>


复制代码
#radio1:checked ~ label,#radio2:checked ~ label,#radio3:checked ~ label{
  background:#e67e22;
}

#radio1:checked ~ section,#radio2:checked ~ section,#radio3:checked ~ section{
  z-index:1
}
复制代码

2 collapse(折叠面板)

在线演示

CSS的一些你可能不知道的强大技巧

1.1 敲重点

checkbox
checkbox
CSS

1.2 关键代码

<input type="checkbox" id="checkbox1" class="checkbox-common"/>
  <label for="checkbox1" class="panel-title">面板1</label>
  <section class="panel-content" id="content1">内容1</section>
复制代码
#checkbox1:checked ~ #content1,#checkbox2:checked ~ #content2,#checkbox3:checked ~ #content3{
  height:100px;
}
复制代码

3 dialog(模态框)

在线演示

CSS的一些你可能不知道的强大技巧

3.1 敲重点

  1. 通过a标签瞄点定位元素, hrefid 一致,模拟点击
  2. 通过 :target 选择器定位模态元素,切换显隐

3.2 关键代码

<a href="#dialog" class="dialog-btn">click me</a>
<div class="dialog-box" id="dialog">
  <div class="dialog-con">
    <a href="#" class="dialog-close">X</a>
    content
  </div>
</div>
复制代码
.dialog-box:target{
  visibility:visible
}
复制代码

4 lightBox(图片预览)

在线演示

CSS的一些你可能不知道的强大技巧

4.1 敲重点

  1. 通过a标签瞄点定位元素, hrefid 一致,模拟点击
  2. 通过 :target 选择器定位大图显示

4.2 关键代码

<div class="light-box">
  <a href="#img1"><img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png?w=100&h=100" alt=""></a>
  
  <a href="#" id="img1" class="lightbox">
    <img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png" alt="">
  </a>
  
</div>
复制代码
.lightbox{
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,1);
  right:0;
  bottom:0;
  text-align:center;
  display:none;
  z-index:999;
}
.lightbox:target{
  display:block;
}
复制代码

5 tooltip(文字提示)

在线演示

CSS的一些你可能不知道的强大技巧

5.1 敲重点

  1. 利用 html 自定义属性 data-attr 来存储提示内容
  2. 通过 attr(data-attr) 来获得提示内容并通过 hover 来显示文字提示

5.2 关键代码

<p class="poem">昼短<span data-tip="痛苦难熬的夜晚" class="tooltip" href="" tabindex="0">苦夜</span>长,何不<span href=""class="tooltip" data-tip="一起夜晚游玩" tabindex="0">秉夜</span>游</p>
复制代码
.tooltip:before{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:120%;
  display:block;
  padding:.5em;
  width:150px;
  transform:translateX(-50%);
  background:#7d5fff;
  color:#fff;
  opacity:0;
  text-align:center;
  outline:none;
}
复制代码

6 indicator (阅读进度)

在线演示

CSS的一些你可能不知道的强大技巧

6.1 敲重点

  1. body设置一个对角线的渐变背景
  2. 在body上覆盖一个背景为白色的遮盖层,露出顶部一点点用来显示进度

6.2 关键代码

body{	
	background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
	background-size: 100% calc(100% - 100vh + 129px);
	background-repeat: no-repeat;
}
复制代码

7 总结(Summary)

看完上述例子,是不是对 CSS 的强大有了一层更深的认识?希望在留言分享你的 CSS 一些特殊有用技巧,大家一起学习。

参考链接:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

黑客秘笈

黑客秘笈

[美]彼得·基姆 / 徐文博、成明遥 / 人民邮电出版社 / 2015-7-1 / 45.00

所谓的渗透测试,就是借助各种漏洞扫描工具,通过模拟黑客的攻击方法,来对网络安全进行评估。 本书采用大量真实案例和集邮帮助的建议讲解了在渗透测试期间会面临的一些障碍,以及相应的解决方法。本书共分为10章,其内容涵盖了本书所涉的攻击机器/工具的安装配置,网络扫描,漏洞利用,人工地查找和搜索Web应用程序的漏洞,攻陷系统后如何获取更重要的信息,社工方面的技巧,物理访问攻击,规避杀毒软件的方法,破解......一起来看看 《黑客秘笈》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具