2014 年 11月随笔档案 - 柴犬金刚

大小不固定的图片、多行文字的水平垂直居中

摘要：想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size... 阅读全文

posted @ 2014-11-14 13:02 柴犬金刚阅读(249) 评论(0) 推荐(0)

关于Google圆角高光高宽自适应按钮及其拓展

摘要：一、前言对于一门技术而言，要想达到真正的高度，需要形成自己关于这门技术的世界观。我在研究css上花费的功夫相对多些，但还不至于形成css世界观的程度，css是如此精深的一门学问，不仅仅是一门技术，更融入了美学，哲学的东西。当然，对于css，我是有自己的一套约束准则的，请允许我称之为“鑫三无准则”，即... 阅读全文

posted @ 2014-11-14 13:01 柴犬金刚阅读(261) 评论(0) 推荐(0)

精简高效的CSS命名准则/方法

摘要：一、“无”的哲学佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。例如我之前写过的“中国古代道家思想与网页重构的思考”一文。老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看... 阅读全文

posted @ 2014-11-14 13:00 柴犬金刚阅读(284) 评论(0) 推荐(0)

关于文字内容溢出用点点点(…)省略号表示

摘要：前言：由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text- overflow:ellipsis... 阅读全文

posted @ 2014-11-14 12:59 柴犬金刚阅读(1072) 评论(0) 推荐(0)

让IE6/IE7/IE8浏览器支持CSS3属性

摘要：一、下载您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。二、上面的是什么东西首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。ht... 阅读全文

posted @ 2014-11-14 12:56 柴犬金刚阅读(244) 评论(0) 推荐(0)

CSS实现跨浏览器的box-shadow盒阴影效果（2）

摘要：一、前言我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章，本文虽然题目类似，但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是使用的是shadow滤镜，这种滤镜的效果很牵强，效果过渡不自然，见下图：您可以狠狠地点击这里：IE下阴影不自然demo而本文实... 阅读全文

posted @ 2014-11-14 11:21 柴犬金刚阅读(316) 评论(0) 推荐(0)

CSS实现跨浏览器的box-shadow盒阴影效果（1）

摘要：一、无关紧要碎碎念在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果：然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效... 阅读全文

posted @ 2014-11-14 11:20 柴犬金刚阅读(549) 评论(0) 推荐(0)

使用CSS将图片转换成模糊(毛玻璃)效果

摘要：本文很单纯，就是图片模糊效果的实现。CSS3 blur滤镜实现如下测试代码：.blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter:... 阅读全文

posted @ 2014-11-14 11:14 柴犬金刚阅读(11423) 评论(0) 推荐(1)

CSS实现兼容性的渐变背景(gradient)效果

摘要：一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目... 阅读全文

posted @ 2014-11-14 11:10 柴犬金刚阅读(300) 评论(0) 推荐(0)

CSS3下的条纹以及方格斜纹背景的实现实例页面

摘要：http://www.zhangxinxu.com/study/201104/css3-strips-patterns-no-image.html 阅读全文

posted @ 2014-11-14 11:09 柴犬金刚阅读(401) 评论(0) 推荐(0)

CSS3&HTML5各浏览器支持情况一览表

摘要：CSS3性质(CSS3 Properties)平台MACWIN浏览器CHROMEFIREFOXOPERASAFARICHROMEFIREFOXOPERASAFARIIE版本53.610.1443.631010.54678RGBAYYYYYYYYYYNNNHSLAYYYYYYYYYYNNNMultip... 阅读全文

posted @ 2014-11-14 11:02 柴犬金刚阅读(543) 评论(0) 推荐(0)

IE5,IE6,IE7,IE8的css兼容性列表[转自MSDN]

摘要：At-rulesCSS 2.1:IE 5.0IE 5.5IE 6.0IE 7.0IE8 Beta 1IE8 Beta 2IE 8.0@charsetNoYesYesYesYesYesYes@importYesYesYesYesYesYesYes@mediaNoYesYesYesYesYesYes@p... 阅读全文

posted @ 2014-11-13 16:47 柴犬金刚阅读(275) 评论(0) 推荐(0)

还记得我们折腾过的居中么？

摘要：虽然div中内容上下居中的问题已经是一个比较古老的话题，但是最近发现还是有很多前端开发者在询问如何实现。其实网络上已经有很多资料和案例了，我这里再总结一下几个比较常见的处理方式。情形一：div限高，内容长度限一行1 .v-align {2 margin: 0 auto;3 width... 阅读全文

posted @ 2014-11-13 16:44 柴犬金刚阅读(193) 评论(0) 推荐(0)

使用CSS使内容垂直居中的N中方法

摘要：用css+div使页面内容水平居中的方法大家并不陌生，那么如何使内容垂直居中呢？OK，下面进入正题，不如我们使用做高中数学题时经常用的思想：分情况讨论。1.当待垂直居中的DIV高宽为已知时： 1.1绝对定位法： CSS: .middle-div{ width:3... 阅读全文

posted @ 2014-11-13 16:41 柴犬金刚阅读(199) 评论(0) 推荐(0)

Css调整图片大小[将大图片压缩成小图片]

摘要：采用滤镜[filter]效果，实现大图片压缩成小图片。阅读全文

posted @ 2014-11-13 16:35 柴犬金刚阅读(860) 评论(0) 推荐(0)

html/css一些需要注意的基础点

摘要：border:0;边框存在但不现实并且占内存border:none;边框未渲染HTML的书写规范： 1、标签换行。 2、标签缩进。 3、标签要关闭。 4、标签名属性不能为空。 5、首先要！doctype声明。 6、编码格式为UTF-8。 7、标签要半角英文小写。 8、合理注释。9、类名，id名要... 阅读全文

posted @ 2014-11-13 16:30 柴犬金刚阅读(165) 评论(0) 推荐(0)

Css设置图片垂直居中

摘要：说明：样式设置主要是针对图片的父级元素，并非图片元素本身。Css代码[图片父级点的样式]：Html代码：阅读全文

posted @ 2014-11-13 16:28 柴犬金刚阅读(176) 评论(0) 推荐(0)

设置兼容性[指定IE浏览器渲染方式]

摘要：以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。以上代码告诉IE浏览器，Windows以最高版本的IE显示内容。根据指令确定如何呈现内容。标准模式指令以Windows Internet Ex... 阅读全文

posted @ 2014-11-13 16:27 柴犬金刚阅读(440) 评论(0) 推荐(0)

各种浏览器css hack

摘要：你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:IE都能识别*，标准浏览器（如FF）不能识别*；IE6能识别*，但不能识别 !important；IE7能识别*，也能识别 !important；IE8能识别\0，不能识别*，+,_,*加!important;FF不能识别*，但能识别 ... 阅读全文

posted @ 2014-11-13 16:22 柴犬金刚阅读(1066) 评论(0) 推荐(0)

10步掌握CSS布局定位: position static relative absolute float

摘要：无意中看到此文，因作者强调其中避开了浏览器bug/分歧，所以个人认为值得借鉴。不才仔细看了此文，自觉受益匪浅，屡试不爽，佩服作者对css布局的精炼总结，顺便小译了一段，英文水平有限，且个人通常写写php，对css了解不深却有点兴趣，错误之处还请指正。个人没有空间，代码中的css文件和js保留了完整... 阅读全文

posted @ 2014-11-13 16:21 柴犬金刚阅读(278) 评论(0) 推荐(0)

魔哥圆角--（代码精简，完全自适应）

摘要：圆角底部内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里圆角底部阅读全文

posted @ 2014-11-13 16:19 柴犬金刚阅读(157) 评论(0) 推荐(0)

IE6终极备忘单：修复IE6下 25+ Bugs

摘要：参见：http://bbs.blueidea.com/thread-2965546-1-1.html 阅读全文

posted @ 2014-11-13 16:17 柴犬金刚阅读(117) 评论(0) 推荐(0)

Img图片在IE6下显示空白的Bug解决方案

摘要：在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {d... 阅读全文

posted @ 2014-11-13 16:16 柴犬金刚阅读(199) 评论(0) 推荐(0)

web标准常见问题整理

摘要：参见：http://bbs.blueidea.com/thread-2692909-1-1.html 阅读全文

posted @ 2014-11-13 16:15 柴犬金刚阅读(115) 评论(0) 推荐(0)

解决li在ie,firefox中行高不一致问题

摘要：li在ie与firefox的高度是不一样的，解决办法是li font-size:0;然后在将其子元素复为12px￥3452元起台湾环岛经典8日游台湾环岛经典8日游-华￥3452元起台湾环岛经典8日游台湾环岛经典8日游-华￥3452元起台湾环岛经典8日游台湾环岛经典8日游-华￥3452元起台湾环岛经典... 阅读全文

posted @ 2014-11-13 16:04 柴犬金刚阅读(195) 评论(0) 推荐(0)

win7常用快捷键

摘要：本文的快捷键只要是笔者工作中(前端开发)常用的，个人觉得比较实在、好用，推荐给各位，希望对大家有所帮助。1. Ctrl + Shift + N – 创建一个新的文件夹你需要在文件夹窗口中或者桌面按Ctrl + Shift + N才行2. Ctrl + Shift + Esc – 快速打开 Windo... 阅读全文

posted @ 2014-11-13 15:59 柴犬金刚阅读(142) 评论(0) 推荐(0)

使用VirtIE6代替IE6

摘要：做前端开发难免要使用IE6，相信很多朋友知道win7上是不支持安装IE6的，通常会使用IETester，要么在win7中安装虚拟机，在虚拟机中安装IE6。分析下这2种方式：IETester：并不是真正的IE6，使用起来不稳定，经常会出现奔溃，有些公司内网的环境下使用代理脚本上网导致IETester也... 阅读全文

posted @ 2014-11-13 15:56 柴犬金刚阅读(280) 评论(0) 推荐(0)

CSS实现背景透明，文字不透明，兼容所有浏览器

摘要：11.11也是公司成立的日子，16岁啦，我呢3岁半，感谢公司给了这样一个平台，让我得以学习和成长，这里祝愿公司发展越来越好~进入主题，每年11月11号是光棍节，产生于校园，本来只是一流传于年轻人的娱乐性节日，以庆祝自己仍是单身一族为骄傲，而如今是各大商家以脱光为由打折促销的时期，成为了所谓的”购物节... 阅读全文

posted @ 2014-11-13 15:45 柴犬金刚阅读(444) 评论(0) 推荐(0)

单张图片轮换

摘要：单独图片轮换 - 豪情张蓝心登杂志秀美腿潘晓婷蕾丝装身姿动人 ... 阅读全文

posted @ 2014-11-13 14:54 柴犬金刚阅读(172) 评论(0) 推荐(0)

png-24在ie6中的几种透明方法

摘要：由于游戏类官网在页面背景和装饰人物的设计上追求画丽且与游戏风格想匹配，这就给前端页面制作人员带来了很多的麻烦，一个页面的制作主要时间和精力花费在兼容ie6上，而ie6因为不兼容png-24的图片一直被开发人员所鄙视。由于市场决定了页面的存在的价值，所以ie6还是必须要兼容。下面介绍几种常用的解决办法... 阅读全文

posted @ 2014-11-13 14:43 柴犬金刚阅读(291) 评论(0) 推荐(0)