一个html有几个css,几个CSS的黑科技_html/css_WEB-ITnose

5268f80b9b1e01f982625ef6fac83ca1.png

原文出处: JellyBool(@JellyBool) 欢迎分享原创到伯乐头条

昨天由于某些原因没有写博客,之前说好的每天一篇的,这篇是为了补昨天的了。然后我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

border-radius

很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:

CSS

1

2

3 .box {

border-radius: 4px;

}

稍微高端一点的是这样的:

CSS

1

2

3 .box {

border-radius: 4px 6px 6px 4px;

}

然而,终极黑科技是这样用的:

CSS

1

2

3 .box {

border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;

}

对,它可以赋8个值,没见过?不着急,具体的解释是这样的:

CSS

1 斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

outline-offset

相信很多开发者在写CSS的时候对下面的语句会很熟悉:

CSS

1

2

3

4

5

6

7 input {

outline : none;

}

input:focus {

outline : none;

}

这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样

CSS

1

2

3 input {

outline-offset: 4px ;

}

调节该属性值的大小你就可以看到outline的距离变化了。

类的声明

对于下面的类的声明,可能大家都很熟悉:

CSS

1

2

3 .col-8 {

}

这当然没什么,但是如果你这样写呢:

CSS

1

2

3

4

5

6

7 .? {

color: hotpink;

}

.★ {

color: yellow;

}

嗯,看起来怎么样,你是可以这么用的:

CSS

1

只要是Unicode的,你都可以这么来声明你的类。

选中连续的几个元素

CSS

1

2

3

4

5

6

7 ol li:nth-child(n+7):nth-child(-n+14) {

background: lightpink;

}

/** Or Safari Way **/

ol li:nth-child(-n+14):nth-child(n+7) {

background: lightpink;

}

上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。

伪类设置单标签

html中有几个常见的单标签:

,等。具体可以查看这里:

http://www.w3.org/TR/html5/syntax.html#void-elements

下面的示例是实现对的修饰。

CSS

1

2

3

4

5

6

7 hr:before {

content: "??";

}

hr:after {

content: " This is an element";

}

没错,关键就是使用 :before 和 :after 这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰 和 ,不过这个前提是,你把这两个的 display 属性设置为:

CSS

1 display: block

属性区分大小写

假如我们在写html的时候有类似下面的代码:

XHTML

1

2

然后我们用属性选择器进行CSS修饰:

XHTML

1

2

3

4

5

6

7 div [class="box"] {

color: blue;

}

input [type="email"] {

border: solid 1px red;

}

这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:

XHTML

1

2

3

4

5

6

7 div [class="BOX"] {

color: blue;

}

input [type="EMAIL"] {

border: solid 1px red;

}

这变成了大写之后,第一个 class="BOX" 并不会影响到

,而第二个 type="EMAIL" 还是会正常修饰 。所以在使用属性选择器的时候,注意大小写问题。

目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。

Happy Hacking

都说程序员的工资高,却很少了解他们加班的痛苦,你是不是每次也在心里想,按时间折算下来这个工资都给少了,于是会想在心里呐喊,要么涨工资,要么涨工资,要么涨工资,为什么??因为不让我们加班,这是不可能的!!!

想要颠覆自己的工作模式吗?想要减少自己的加班时间吗?加入我们,和我们一起探寻属于我们程序员的自由模式吧!

一款针对程序员的原生APP,以共享知识技能为目的,以悬赏方式在线互动交互平台。

我们拥有高达近20人顶尖的技术团队,以及优秀的产品及运营团队。团队领军人物均在行业内有10年以上的丰富经验。

现在我们正在招募原始的参与英雄,您将同我们一起改变程序员的工作方式,改变程序员的世界!同时也会有丰厚的报酬。作为我们的原始的参与者,您将同我们一起体验这款程序员神器,您可以提出专业的建议,我们会虚心采纳。每一个人都会是英雄,而您就会是我们需要的英雄!同时您也可以邀请您的朋友一起参与这场英雄的招募互动。

我们不会耽误你太多时间,我们只需要您的专业看法,只要您从一个月内抽出1个小时,以后您每天都可以节省两个小时,一切都是为了我们自己!

来?还是不来?

接头人暗号:1955246408 (QQ)

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python递归函数讲解_带你深入学习Python——Python递归详解!

一、递归 递归:在调用一个函数的过程中,直接或间接地调用了函数本身这个就叫递归 注:Python在递归中没有像别的语言对递归进行优化,所以他的每一次调用都会基于上一次的调用进行,并且他设置了最大的递归数量防止递归外溢 递归调用…

51nod 1040最大公约数和(欧拉函数)

1040 最大公约数之和题目来源: rihkddd基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题收藏关注给出一个n,求1-n这n个数,同n的最大公约数的和。比如:n 61,2,3,4,5,6 同6的最大公…

计算机安全基础:加密技术知识笔记

1、加密技术介绍 加密技术是最常用的数据安全保密的手段,加密技术的关键在于加密/解密算法和密钥管理。 数据加密的过程:对明文文件或数据按照某种算法进行处理,变成密文。密文需要根据相应的密钥才能获得原来的明文信息,通过这种…

an导入html5,H5-FLASH:AN HTML5-BASED FLASH RUNTIME

摘要:Flash has been widely deployed to many internet applications.Nevertheless,as a closed development platform,there are more and more concerns arisen around its security and performance problems.On the other hand,HTML5 provides an alternative …

JAVA 获取格林威治时间(GMT)

记录下获取GMT时间的方法: //格式可根据需要自定义,如yyyy-MM-dd HH:mm:ss 等等 SimpleDateFormat sdf new SimpleDateFormat("EEE, d MMM yyyy HH:mm:ss GMT", Locale.US); Calendar calendar Calendar.getInstance(); sdf.setTimeZone(Tim…

Linux CentOS下安装Oracle

1 、在安装oracle之前首先安装以下组件包,直接输入下列语句安装。 yum install binutils* -y yum install compat-lib* -y yum install gcc* -y yum install glibc* -y yum install ksh* -y yum install libgcc* -y yum install libstdc* -y yum install libaio* -y…

计算机安全基础:认证技术知识笔记

1、认证技术介绍 认证技术主要是用来解决网络通信过程中通信双方身份的认可。认证的过程涉及加密和密钥交换。认证方一般都会有账户名、口令、使用摘要算法和基于PKI认证。 2、PKI系统介绍 PKI是一种遵循既定标准的密钥管理平台,能够为所有的网络应用提供加密和数字…

python 比例之差z假设检验_假设检验在数据分析中的应用

前言Z检验T检验独立样本t检验配对样本t检验单样本t检验前言在这篇文章中,我不会具体去推导检验统计量和相应拒绝域的得出,这对于大部分非统计学专业的人士来说是晦涩的,我只想通过一个案例告诉大部分初学者假设检验怎么在数据挖掘中使用。%ma…

中南民族大学计算机类有什么具体专业,中南民族大学计算机科学学院计算机科学与技术专业简介...

计算机科学与技术专业计算机科学与技术专业1985年开始招收本科生。1989年开设计算机应用专业。1998年教育部进行专业调整,成立了计算机科学与技术专业。2012年,计算机科学与技术专业获得校级品牌专业称号。计算机科学与技术专业师资雄厚,结构…

Java实现字母的大小写转换

String result1 "JAVA";String result2 "springcloud";/*** toLowerCase()* 大写转小写*/System.out.println(result1.toLowerCase());/*** 小写转大写* toUpperCase()*/System.out.println(result2.toUpperCase()); 运行截图如下:

iOS开发tableview二级联动的细节实现中注意的细节总结

首先说网络慢带来的数据显示问题 可以通过判断请求参数是否一致来刷新tableview。 SJBCategaryModel * categaryModel self.categarys[CategarySelectRow]; NSMutableDictionary * params [NSMutableDictionary dictionary]; categaryModel.currentPage 1; params["a&q…

linux ctrlc 退出循环_linux按行读取 (while read line与forloop)

在linux下一般用while read line与for循环按行读取文件。这两种方法有什么区别呢&#xff1f;现有如下test.txt文件&#xff1a;1while read linewhile read line; do echo $linedone < test.txt输出结果与上图一致。这里也可以写为&#xff1a;cat test.txt | while read …

计算机系统基础:计算机可靠性知识笔记

1、计算机可靠性介绍 计算机的硬件故障通常都是由于元器件失效造成的。元器件的可靠性分为三个阶段&#xff1a;开始阶段元器件处于不稳定阶段失效率比较高、第二阶段是正常工作阶段&#xff0c;失效率最低、第三阶段元器件开始老化&#xff0c;失效率就又开始提高。又称为“浴…

python时间计算_python datetime库使用和时间加减计算

datetime库使用 一、操作当前时间 1.获取当前时间 >>> importdatetime>>> printdatetime.datetime.now()2019-07-11 14:24:01.954000 时间格式化输出&#xff1a; >>> print datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")2019-…

桌面计算机打开不了怎么办,电脑桌面上的所有东西都打不开了 怎么处理

1、如果各分区下带autorun.inf一类的隐藏文件&#xff0c;删除后最好重新启动电脑。2、在文件类型中重新设置打开方式(以XP为例)打开 我的电脑&#xff0d;&#xff0d;工具&#xff0d;&#xff0d;文件夹选项&#xff0d;&#xff0d;文件类型&#xff0c;找到“驱动器”或“…

原生js实现京东商城楼梯效果

这个可能有些兼容问题和小bug,新手写的不完善 欢迎指出 <!DOCTYPE html> <html> <head><title></title><meta charset"utf-8" /><style type"text/css">*{margin: 0px;padding: 0px;list-style: none;}#header{…

IDEA云行项目提示Error: java: OutOfMemoryError

idea运行项目提示如下 解决方法: 调整一下Compiler下面的Compiler Process heap size 参数&#xff0c;默认的是700。如果2048还不能解决问题&#xff0c;试着将它调得更大一些吧&#xff0c; 修改为2048 修改后运行成功

常见的BIOS硬盘故障现象及急救措施

硬盘是电脑的数据仓库&#xff0c;是最为重要的存储设备&#xff0c;由BIOS直接管理。如果硬盘出现故障&#xff0c;一般情况下系统通常会显示一些提示信息&#xff0c;说明问题所在。下面&#xff0c;将一些常见的硬盘故障信息向大家一一介绍。1 C&#xff1a;Drive Failure …

js var是什么类型_JS变量的执行环境和生命周期

温故而知新&#xff0c;这些JS基础知识你都知道吗&#xff1f;今天和大家分享的是 JavaScript 中有关变量的知识&#xff0c;希望这篇文章能让你对JS中的变量有新的认识.目录&#xff1a;变量的执行环境&#xff08;执行上下文&#xff09;执行上下文的生命周期创建变量对象变量…

网络中不能显示全部计算机,win10家庭版局域网中计算机设备无法完全显示的解决方法...

许多用户都喜欢通过局域网来共享一些文件等&#xff0c;打开局域网就可以看到所有共享的计算机&#xff0c;然而有不少win10家庭版用户却发现局域网中只能看到几台计算机设备&#xff0c;无法完全显示&#xff0c;该怎么办呢&#xff0c;现在为大家讲解一下win10家庭版局域网中…