专栏首页smh的技术文章掌握好这几个css属性,少写100行js代码

掌握好这几个css属性,少写100行js代码

1.calc函数

calc可动态设置某个元素的长度。

html{
    font-size:calc(100vw / 8)
}
.main{
    width:100%;
    height:calc(100vh - 200px)
}

比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

2.attr函数

这个函数用于获取元素的属性的值,我常用于在before等伪类样式中。

ul li::before {
 position: absolute;
 color: #fff;
 left: calc(100% - 50px);
 font-size: 12px;
 content: attr(data-tip);
 line-height: 40px;
 transform: scale(0);
 transition: all 0.8s;
}

html

 <li data-tip="about"><a href="">关于我们</a></li>
 <li data-tip="center"><a href="">项目中心</a></li>
 <li data-tip="media"><a href="">媒体报道</a></li>

attr就获取li元素中data-tip属性,然后加入到before中,注意不是所有的属性都可以用attr获取。

3.nth-child()

这个属性大家应该用的还是比较多,可用于选择特定的元素。

ul li:nth-child(odd){background-color:green;}/*设置单行样式*/

ul li:nth-child(even){background-color:gray}/*设置双行样式*/

ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */

ul li:nth-child(4){background-color:green;}/*单独设置第四个li*/

ul li:nth-child(3n+2){background-color:green;}/*匹配2,5,8,11...*/

ul li:nth-child(n+6){background-color:green;}/*从第六个li开始匹配*/

ul li:nth-child(-n+6){background-color:green;}/*匹配1-6的元素*/

ul li:nth-child(n+3):nth-child(-n+5){background-color:green;}/*匹配3-5的元素*/

ul li:nth-child(3n-1){background-color:green;}/*匹配(3-1),(6-1),(9-1)....*/

4.invalid和vaild

这两个css属性主要配合文本框的pattern的属性使用,验证成功时加载vaild样式,失败加载invaild样式

html

<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>

css

input:invalid{background:Red}
input:valid{background:green}

5.filter: grayscale

这个属性主要是修改元素的黑白度,比如某人去世,让界面变灰,就可以使用此属性

html{filter:grayscale(100%);}

这样就可以使得页面变成灰色,适用于悼念某人的情况下。

6.linear-gradient

此属性配合background使用,实现渐变的背景

div{background-image:linear-gradient(to right, red , yellow); }

上述代码设置div从左侧到右侧,从红色到黄色的渐变。

如无作者授权,请勿转载。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 掌握好这几个css属性,少写100行js代码

    比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

    小明爱学习
  • 我的前端学习历程

      很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上...

    用户1168362
  • 你不知道的web前端那些事

    你不知道的web前端那些事,web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HT...

    用户5827212
  • JS设置标签的内容和样式

    上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

    HTML5学堂
  • day40_jQuery学习笔记_01

    day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

    黑泽君
  • 前端开发语言有哪些?需要掌握什么?

    前端开发语言有哪些?需要掌握什么?通常前端开发在基础阶段掌握html+css+js+jq;框架语言阶段掌握vue+react+小程序;后端掌握nodejs+mo...

    用户8671053
  • web前端程序员需要会那些技能?

      黑马程序员为大家分享web前端学习6大技术知识点,希望可以在今后的学习中帮到找到重点,以及学习的主次之分。

    用户4104697
  • 小白要学好Web前端,要从哪里入手?

    要说目前IT行业需求量最大的岗位是什么,Web前端工程师一定有姓名。Web前端工程师绝对是近几年火爆而且高薪的职业之一,当然,不同的公司也有不同的叫法,比如:网...

    用户5827212
  • 前端开发必会的HTML/CSS硬知识 (二)

    山月
  • 月入35k大佬总结:web前端必须学习的内容(附全套前端教程)

    优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析,企业要求主要有两部分,一个...

    用户5827212
  • web前端开发学习路线:html+css+JavaScript的学习方法

    二阶段:JavaScript、jQuery、ajax、面向对象、http传输协议等

    用户5827212
  • 妙用CSS变量,让你的CSS变得更心动

    「CSS变量」又叫「CSS自定义属性」,为什么会突然提起这个很少人用到的东西呢?因为最近在重构个人官网,不知道为什么突然喜欢用上「CSS变量」,可能其自身隐藏的...

    JowayYoung
  • 由浅入深 定制Bootstrap开发自己网站的六种方法

    对于Bootstrap这个CSS框架,很多程序员持鄙视的态度,就如鄙视jQuery一般。诚然,就算不用这个框架,而是纯手写,或者借助JS框架的模板,一样可以写出...

    PM吃瓜
  • 19 年学好前端的6点建议

    要成为一名年薪30W的前端工程师,基础一定要掌握牢固,基础知识一问三不知,岂不是要贻笑大方。

    grain先森
  • 一张图告诉你前端该怎么学 | 老尚自学方法论

    web前端教室
  • 【综合篇】Web前端性能优化原理问题

    想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢?--达达前端

    达达前端
  • 目录

    学习最难的两点,第一是接收信息,第二是归纳信息。现在是信息爆炸的时代,一个知识点,网络上有无数的blog,论坛,问答,也有无数相关的书本。学会甄别有效信息是很重...

    love丁酥酥
  • 为什么中国会有这么多程序员

    警告:这篇文章是黑程序员的,内容口味较重, 阅读时如感不适, 请停止。 现在的一二线城市的公交或地铁上, 一棒砸死十个人估计一半程序员, 为什么现在这种职业会这...

    用户1608022
  • 二〇一六年的前端入门指南

    时见疏星

扫码关注云+社区

领取腾讯云代金券