专栏首页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长度的属性

    小明爱学习
  • 关于css3属性nth-child的用法大全

    css3中有很多新增的功能,让我们以前不得不用js才能完成功能,现在用css就可以完成。

    小明爱学习
  • javascript事件之捕获阶段和冒泡阶段

    事件冒泡阶段:事件开始的时候由事件发生的元素接受,然后逐级向上传播,触摸相对的事件。

    小明爱学习
  • 掌握好这几个css属性,少写100行js代码

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

    小明爱学习
  • 关于css3属性nth-child的用法大全

    css3中有很多新增的功能,让我们以前不得不用js才能完成功能,现在用css就可以完成。

    小明爱学习
  • 【叔小生】JavaScript进阶篇

    如何插入JS JS基础语法 语法、函数、方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。

    达达前端
  • CSS 制作雪碧图列表

    在日常开发列表中会有很多的小图片,例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。

    Devops海洋的渔夫
  • JavaScript入门

    2看文字样式 T 单击目标文字,菜单栏下面查看文字效果---释放选择:ctrl + enter或选择其他工具

    小闫同学啊
  • jquery导航栏点击及页面跳转后对应栏目添加选中效果

    但是一般页面的导航栏都是需要跳转页面的,上面的方法只在当前页面有效,跳转后就失效了。

    德顺
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习

扫码关注云+社区

领取腾讯云代金券