随笔分类 -  CSS

• EasyUIDataGrid列标题换行显示
  摘要：有时候表格标题字数太多，而宽度有限，就会导致一部分列的标题显示不出来 这时候，加入如下css代码即可将标题换行显示 阅读全文
  posted @ 2019-05-21 16:49 teagueli 阅读(3732) 评论(0) 推荐(0) 编辑
• woff/woff2字体404找不到
  摘要：每次控制台都报这个错，很纳闷，服务器上明明放了字体文件，怎么找不到呢 今天突然想起来，IIS的MIME类型要配置一下 之前部署网站，一个链接下载app的时候，IIS就不识别apk格式的文件，尽管服务器上存在该文件，还是提示404错误 在MIME类型中加上以下两条即可 .woff applicatio 阅读全文
  posted @ 2018-08-23 10:40 teagueli 阅读(964) 评论(0) 推荐(0) 编辑
• 解决HighChart开发遇到的2个问题
  摘要：需求很简单，显示一条24小时的变化曲线 写完代码效果是只有一条直线，连时间轴都没有 第1个错误 Highcharts error #12 当通过要绘制的点超过1000个时就会报这个错，我按分钟计算间隔，一天有1440分钟，超过了1000所以报错。 解决办法是在初始化参数中配置 设置完成后时间轴算是显 阅读全文
  posted @ 2018-07-26 17:49 teagueli 阅读(572) 评论(0) 推荐(0) 编辑
• 使用LESS对CSS进行预处理
  摘要：LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情。 变量 请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次。 ** 甚至可以用变量名定义为变量: ** 混合 在 LES 阅读全文
  posted @ 2018-07-16 12:10 teagueli 阅读(871) 评论(0) 推荐(0) 编辑
• window.innerWidth和document.body.clientWidth的区别
  摘要：以上的代码运行结果如下 因为body默认情况下具有margin，这个默认值为8px。window.innerWidth (1280px) - 2*8px = document.body.clientWidth(1264px)。 如果代码改成 运行结果如下 document.body.clientWi 阅读全文
  posted @ 2018-07-13 12:56 teagueli 阅读(832) 评论(0) 推荐(0) 编辑
• EasyUI DataGrid设置列宽为百分比导致表头和内容错位的解决方法
  摘要：在DataGrid中设置列宽为百分比一般是没有问题的 但在一些版本的JQuery EasyUI下设置列宽时使用百分比，并没有效果，反而会出现表头和内容错位 但是我们又不想讲列宽设置为固定值，而是使用百分比占满整个屏幕 这时候可以将column的width设置为一个可变化的值，和百分比的效果是一样的 阅读全文
  posted @ 2018-05-09 21:10 teagueli 阅读(903) 评论(0) 推荐(0) 编辑
• 美化上传文件按钮
  摘要：使用默认的input上传文件按钮，十分难看 按钮本身没有任何样式，右边还显示上传的文件名 有些人使用uploadify，我不否认这个插件功能的强大，但个人认为uploadify的按钮是基于flash的，而flash已经是淘汰的技术，Adobe已经放弃了对它的更新 怎样才能隐藏掉上传按钮右边的文件名， 阅读全文
  posted @ 2018-05-03 16:00 teagueli 阅读(253) 评论(0) 推荐(0) 编辑
• 自适应内部元素
  摘要：摘自《CSS揭秘》 LEA VEROU著 难题 众所周知，如果我们不给元素指定固定的高度（height），它会根据其内容的高度自适应。假如我们希望宽度（width）也具有类似的行为，该怎么做呢？举个例子，假设我们用HTML5来标记图片元素，结构代码可能是这样的： 假设还需要给它添加一些基本的样式，比 阅读全文
  posted @ 2018-04-24 09:52 teagueli 阅读(245) 评论(0) 推荐(0) 编辑
• position:fix相对父元素定位
  摘要：大家都知道，当position的值为fix时，生成绝对定位的元素，相对于浏览器窗口进行定位。 它常常应用的场合是，当下拉滚动条时固定导航栏到顶部，将广告固定在页面两侧或浏览器中间。 如果需要将导航栏div固定到浏览器顶部，只需要将top设置为0即可。 如果要将广告div固定在特定位置，只需要用js计 阅读全文
  posted @ 2018-04-14 21:56 teagueli 阅读(8093) 评论(1) 推荐(0) 编辑
• 利用CCS3渐变实现条纹背景
  摘要：本文摘自《CSS揭秘》中国工信出版集团 难题： 不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。 阅读全文
  posted @ 2017-11-30 14:23 teagueli 阅读(868) 评论(0) 推荐(0) 编辑
• CSS3实现投影效果
  摘要：Webkit引擎定义了-webkit-box-reflect属性，该属性能够实现投影效果，具体语法如下： 属性取值说明如下： <direction>：定义反射方向，取指包括above、below、left和right。 <offset>：定义反射偏移的距离，取指包括数值或者百分比，其中百分比是根据对 阅读全文
  posted @ 2017-08-06 16:01 teagueli 阅读(4004) 评论(0) 推荐(0) 编辑
• @font-face使用在线字体
  摘要：@font-face规则在CSS3规范中属于字体模块，该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中，设计师不敢使用各种艺术字体类型，甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中是否安装了所有字体。有了@font-face规则，这个顾虑就可以放下了：只要在互联网上 阅读全文
  posted @ 2017-08-06 09:51 teagueli 阅读(2822) 评论(1) 推荐(0) 编辑
• 利用CSS3实现透明边框和多重边框
  摘要：使用background-clip属性实现透明边框 查看运行效果 使用box-shadow模拟多重边框 使用outline属性生成多重边框 outline属性结合outline-offset属性的多重边框实现缝边效果 查看运行效果 阅读全文
  posted @ 2017-08-01 09:44 teagueli 阅读(9775) 评论(0) 推荐(1) 编辑
• 我应该使用预处理器吗
  摘要：以下内容摘自《CSS揭秘》一书 你很可能听说过像 Stylus（http://stylus-lang.com/）、Sass（http://sass-lang.com/）或 LESS（http://lesscss.org/）这样的 CSS 预处理器。它们为 CSS 的编写提供提供了一些便利，比如变量、 阅读全文
  posted @ 2017-07-21 10:29 teagueli 阅读(201) 评论(0) 推荐(0) 编辑
• 冰与火之歌：浏览器前缀
  摘要：以下内容摘自《CSS揭秘》一书 在标准的开发过程中，总是有大大的"第22 条军规"1①挡在面前：标准的工作组需要网页开发者这一端的输入，以确保各项规范可以处理真实的开发需求；但是开发者往往没有兴趣尝试那些在生产环境中还不能使用的东西。当实验性的技术被广泛应用到生产时，工作组就被这些技术早期的、实验性 阅读全文
  posted @ 2017-07-17 08:55 teagueli 阅读(463) 评论(0) 推荐(1) 编辑
• CSS实现禁止文字选中
  摘要：E10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持，Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。 user-select：none | text | all | element text – 可以选择文本 element – 可 阅读全文
  posted @ 2017-07-06 18:08 teagueli 阅读(243) 评论(0) 推荐(0) 编辑
• CSS3学习笔记
  摘要：一、CSS3属性选择器 我们以前学过类选择器、ID选择器、标签选择器、关联选择器、组合选择器、伪类选择器。CSS3中新增了属性选择器： 二、CSS3伪类选择器 在CSS2的时候我们学过伪类 :hover、:link、:active、:visitied CSS3新增的伪类选择器 e:first-chi 阅读全文
  posted @ 2017-07-05 22:33 teagueli 阅读(150) 评论(0) 推荐(0) 编辑
• DIV实现垂直居中的几种方法
  摘要：说道垂直居中，我们首先想到的是vertical-align属性，但是许多时候该属性并不起作用。例如，下面的样式并不能达到内容垂直居中显示 原来vertical-align属性仅能够作用于单元格或图像显示。因此要在上面样式内加入以下代码，才能够使文字或图像垂直居中： 但是IE浏览器并不能很好的支持di 阅读全文
  posted @ 2017-07-05 21:26 teagueli 阅读(1236) 评论(0) 推荐(0) 编辑
• CSS中的通用字体
  摘要：往往设计师在设计时一厢情愿地去思考问题，那样会带来很多潜在的麻烦。事实上你可以为网页设计任意字体，包括艺术字体。也许你的计算机中已经安装了很多字体，但是不能够保证所有的浏览者都已经安装了相同的字体，因此，当你非常想使用各种个性字体或艺术字体美化页面时，你可以使用下面的方法来解决此类矛盾。 一种方法是 阅读全文
  posted @ 2017-07-05 20:00 teagueli 阅读(2660) 评论(0) 推荐(0) 编辑