CSS
关注
分享
扫一扫
Quincylk
这个作者很懒，什么都没留下…
展开
-
CSS3属性选择器及伪类选择器
CSS3相比CSS2在选择器中增加了通配符的概念，赋予其强大功能。E[attr^="val"] 定义了属性attr，并且以val开头的任意字符串E[attr$="val"] 定义了属性attr，并且以val结尾的任意字符串E[attr*="val"] 定义了属性attr，并且属性字符串包含val结构性伪类选择器:root:root 即html的样式:root{bac...转载 2019-10-30 11:33:01 · 790 阅读 · 0 评论 -
HTML使用Radio Input来实现Tab切换
在开发中看见仅使用css技巧，就用HTML的Radio Input来实现的Tab的切换，连click事件都未使用。代码效果如下：<!DOCTYPE HTML><html><header><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/f...原创 2018-12-06 16:58:28 · 2895 阅读 · 0 评论 -
Font Awesome使用方法
原文：https://www.cnblogs.com/zhaowy/p/8400244.htmlFont Awesome（中文站点）是一套为Bootstrap而创造的图标字体库及CSS框架，在业界享有盛誉。FA包含了常规web开发所需要用到的几乎所有图标，并且免费授权使用，只需要下载即可。所有的图标列表查看加入文件1.最简单的方式：CDN （由BootCDN提供）一句话将Fo...转载 2018-12-06 15:55:03 · 3165 阅读 · 0 评论 -
前端不为人知的一面--前端冷知识集锦
原文：https://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识...转载 2018-11-30 14:20:07 · 329 阅读 · 0 评论 -
别再用FontAwesome了
转：https://www.jianshu.com/p/5d4a39cdf96d图标技术哪家强？你脑海中第一个闪现的，必然是 fontawesome、ionicons、google icons...是的，确实很方便，直到今天之前，我还在用着FA，还在为了一个图标翻遍他的网站，就像这样：image.png不得不说，这是一件很费眼睛的工作， 但最要命的是:绝大多数时候你无法找到想...转载 2018-11-02 16:59:21 · 13163 阅读 · 2 评论 -
彻底理解nth-child和nth-of-type的区别
原文：https://www.cnblogs.com/pssp/p/5991029.html为什么要写篇呢，主要是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样，于是打算写下来。nth-child倒很好理解就是选择第几个，代码如下：<style> p:nth-child(2),p:nth-child(7){ color:...转载 2018-10-18 14:14:27 · 1618 阅读 · 0 评论 -
Flex 布局教程：语法篇
原文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案---...转载 2018-10-18 11:34:46 · 172 阅读 · 1 评论 -
浮动的清除 -- 四种方法
原文：https://www.cnblogs.com/gchlcc/p/5824200.html浮动的清除 -- 四种方法前言 -- 一个父亲不能被自己浮动的儿子，撑出高度。开胃小菜来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。...转载 2018-10-11 15:41:55 · 2888 阅读 · 1 评论 -
在html5中不支持<table>的cellpadding 和 cellspacing的替代方案
原文：https://www.cnblogs.com/cbza/p/7147214.html在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.1.初始:<!DOCTYP...转载 2018-08-21 18:09:32 · 8686 阅读 · 0 评论 -
css3实现固定表格头部而无需设置单元格td的宽度
原文：http://www.html-js.com/article/cssyanjiu-css3shixiangudingbiaogetoubuerwuxushezhidanyuangetddikuandu%204019背景最近小弟在工作都是做后台系统，一堆的表格，各种各样的。然后需求上要有固定的表头的表格，如下图所示在网上查询固定表头的实现方式为：thead 设置为 fixe...转载 2018-08-20 18:10:02 · 694 阅读 · 1 评论 -
使用 position:sticky 实现粘性布局
原文：https://www.cnblogs.com/coco1s/p/6402723.html如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ 1 2 3 4 5 6 { position: static; position: relativ...转载 2018-08-15 16:06:40 · 907 阅读 · 0 评论 -
CSS3 超实用属性：pointer-events
原文：https://www.jianshu.com/p/3eba945fc19e最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点...转载 2018-07-05 15:24:26 · 5315 阅读 · 0 评论 -
HTML中滚动条滚动时如何让上面的标题固定不动
在做web前端开发时，有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的，通过在不同的节点设置overflow就很容易实现。但是有时候一开始的层次结构设计的不能满足让标题固定不动，如果调整层次结构又会改动很多文件。例如一开始，标题并没有单独放在一个div里，而是按左右设计的，并且是在2个不同的模板文件里。这时要实现上述需求，在不改动大的层次结构原创 2016-10-20 15:47:35 · 35512 阅读 · 0 评论 -
前端构建：Less入了个门
原文： http://www.cnblogs.com/fsjohnhuang/p/4187675.html一、前言 说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT转载 2016-07-01 22:31:36 · 930 阅读 · 0 评论 -
overflow：hidden在IE9中不起作用
不精确样式：ul{ margin :0 ;padding :0; float :left ; list-style :none; width:100%;}li{ float :left ; overflow :hidden;}当使用以上样式时，可以看到当li中的内容超过了li的宽度时，overflow属性没起作用。正确的样式：ul{ margin :0 ; paddin原创 2014-05-13 16:22:35 · 4910 阅读 · 1 评论 -
CSS中em单位和px单位的区别
http://blog.sina.com.cn/s/blog_6415d9de0101by4o.html转载 2014-04-11 16:05:32 · 908 阅读 · 0 评论 -
表格单元格td设置宽度无效的解决办法
http://zzstudy.offcn.com/archives/11366在做table页面时，有时对td设置的宽度是无效的，td的宽度始终有内部的内容撑开，可以设置padding，但直接设置width却无效，下面我们来具体看下这个示例：123456789101112131415161718转载 2014-05-15 10:33:53 · 128265 阅读 · 11 评论 -
css word-wrap和word-break强制换行
http://www.wufangbo.com/css-qiang-zhi-huan-hang/强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个：word-wrap;word-break; white-space。这三转载 2014-04-18 13:58:23 · 1866 阅读 · 0 评论 -
html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56转载 2014-04-14 17:54:20 · 4858 阅读 · 0 评论