有关css的一些奇技淫巧(自认为的)

扯点题外话:此时此刻,我只想说,这他喵的破项目终于快完事了,修修改改一个月,光一个首页就重做了两边,真是心塞啊,再这样下去,估计下一个上新闻的前端和产品就发生在我公司了。

额,最近在刷题,很老的题,不过还是发现了两个以前我自己不知道的有关css的东西,第一个就是利用a标签的锚点来控制相应元素的选择器=》:target,IE9以上可以用,附上官网解释:# 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。:target选择器可用于当前活动的target元素的样式。a标签的href属性链接的那个标签:target,然后就可以通过点击a标签来控制那个标签的样式了,煮个栗子:


利用锚点来控制div

上面的代码大家可以试一试,不过唯一不足的就是a标签未在URI上加一个#div,也就是锚点,而:target就是利用这个锚点,我目前还是找到如何能去掉这个URI上的锚点,所以还是不用的好,反正多知道一点总是好的,可以用这个:targegt写个轮播装装B,当然,这个就得大家自己动脑子想象了,下面将要介绍的还是有点实用性的,不想留给下篇,所以就在这直接写了,有点长,见谅哈!


利用:checked来实现导航,弹窗等效果。

以往大家写一些导航,多少会用到JS,写个弹窗也是,利用JS来操作display等属性达到这类效果,如果要是可以只写css不动JS也许可以省去不少时间呢。

那么:checked就派上用场了,附上官方解释::checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。看到这里一些人可能还是想不到(高手别吐槽我),如何利用这个:check来实现这类效果呢?不说废话。先上图:


简单的显隐

我就不附代码了,怪长的,而且写一遍没坏处,:checked就是用来控制被鼠标选中radio或者checkbox的input标签的,那么label想必大家都用过,label可以控制for属性里面的的id对应的标签,既然这样,咱们把input这个丑陋的家伙隐藏掉,然后label现在等同于input,所以点击label就可以用css的~来控制p标签,进而改变样式,我这里只是做了个显隐,更神奇的效果有待大家去探索,不知道我有没有表达清楚,请大家见谅吧,对了:checked也是IE9以上可以用,虽然说上述的两个属性可以做出来某些你想要的效果,但是毕竟本篇文章是奇技淫巧,偶尔用下还可以,但是该用JS还是老老实实用JS吧,规范同样很重要。加油,干吧得。

以上均个人理解,为了自己巩固,也为了分享给大家,写的或好或坏,希望大家见谅,摸摸大!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,242评论 19 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,668评论 32 459
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,860评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,395评论 1 41
  • 叛逆,它很厉害。它能让一个人在一两年甚至更长的时间里,将是非颠倒,好坏不分。任凭善意的建议忠恳的教诲正确的指导如潮...
    山姆大叔ss阅读 276评论 0 0