CSS笔记
清枫草塘
HTML+JS+CSS,Html5+CSS3,Canvas/SVG,PHP+MySQL
展开
-
块级元素和级联元素的区别与含义
Block element 块级元素顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。Inline element 内联元素通俗点来说就是转载 2011-12-14 16:37:33 · 1970 阅读 · 0 评论 -
IE下单选按钮隐藏后点击对应label无法选中的bug解决
项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。注意,需要指定表单元素的id属性然后使用label的for属性绑定控件。label的for属性是内联元素,其对应的js属性为htmlFor,例如可以这样访问或设置for属性值。document.getElementById("xxx").htmlFor="in原创 2013-10-09 19:09:24 · 10921 阅读 · 3 评论 -
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了。今天呢,主要是重新温习一下这个属性,并实际测试来说明正确的写法,和IE各版本的支持度和书写区别。首原创 2013-12-05 17:36:51 · 147136 阅读 · 1 评论 -
IE8下html5标签脱离文档流的现象及其解决方式
我们都知道,IE6-IE8对于html5的大部分新标签是不认识不支持的。所以在实际中也产生了许多这方面的插件,如html5shiv,不过如果页面内使用html5标签很少的情况下,反而使用插件显得有些累赘,有点大炮打蚊子的感觉。最简单的方式其实是下面的方式: var tagArray = ["header","nav","article","footer"]; for(var i =原创 2013-12-03 16:58:59 · 3993 阅读 · 0 评论 -
IE6、IE7不支持二级子ul的问题
今天遇到一个在ul下增加子ul的问题,先贴html代码: 部队系统 卡片系统 科技系统 分解系统 升级系统 采用上述结构的原因是起初二级ul放在父li里面的话会影响hover浮层效果覆盖的区域:浮层会将二级ul全部罩住,影响鼠标点击二级菜单操作。所以就把二级ul拿原创 2013-12-02 15:16:02 · 4597 阅读 · 0 评论 -
mlellipsis.js-实现多行文字溢出隐藏显示省略号
超出容器部分文字做省略,这是基本写前端代码都会遇到的问题。某些位置为了表现完美不额外加滚动条,都会要求多出的部分作省略,例如文章简介”今天天气真的好…”,文本之后部分点击进入详情页才能看到,超出多余的用”…”省略。然而,一般这些简介都是用后台语言去作处理,例如只显示前140字等,如何用前端代码实现?你会想到用css的overflow:hidden;white-space:nowra转载 2013-10-12 15:37:30 · 28246 阅读 · 6 评论 -
你需要知道的三个 CSS 技巧
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。在CSS中用attr()显示HTML属性值attr()功能早在CSS 2.1标准中就已经出现,但现在才开翻译 2013-10-08 18:16:25 · 3792 阅读 · 0 评论 -
CSS属性line-height新解
在做wap新站时候使用了很多html5和CSS3的属性,经测试,一般标准的浏览器(包括PC端的和手机客户端浏览器)都是兼容的比较好,惟独发现Opera Mobile手机浏览器(也就是国内的欧朋浏览器)对CSS3兼容的不太好。我测试的是最新版本7.2.2。而且,我发现,不只是对CSS3不支持,而且对line-height的属性的解析与其他浏览器也是不相同的。虽然,Opera的新版手机浏览器马原创 2013-06-06 11:05:44 · 9066 阅读 · 0 评论 -
【三月之春】CSS笔记之三
使用该测试,需要将您的Adobe Flash Player 播放器升级到10或更新版本下载最新版本" menu="true" play="false" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0">原创 2012-03-26 19:44:03 · 1458 阅读 · 0 评论 -
【三月之春】温故知新CSS笔记之二
由于新增需求,加入一些方便用户的多选框,从而从一堆checkbox引出一系列的问题。记录如下按照设计图一下样式,如上图:固件版本部分html代码: *固件版本 手机Andriod-All 手机Andriod-All(不含4.0) 手机Android2.1及以上 手机Android2.1及以上(不含4.0) 平板Android 3.0及以上 Andri原创 2012-03-13 19:41:04 · 1534 阅读 · 0 评论 -
让IE6/IE7/IE8支持CSS3的插件-CSS3PIE
在前面的文章中,介绍了使IE支持HTML5的插件《HTML5网页如何让所有的浏览器都能识别HTML5标签样式》。而CSS3 新增了不少实用功能,比如圆角、阴影、文字效果、渐变等,但IE6-8 还无法支持这些新特性,因为IE 在国内还占据着相当大的市场份额,因此这个用 JS 编写的插件对国内开发人员来说是一个福音。本文将介绍 css3pie 的使用,点击上面的图片链接到官方网站。官网的首转载 2012-03-09 17:54:14 · 16064 阅读 · 0 评论 -
【三月之春】CSS问题笔记之一
网站导航是通栏的,但是也没主体居中,是固定长度,而导航中的分屏切换按钮arrow却不在主体区域,这样如果定位不对在IE浏览器下存在不显示按钮的问题,[CODE] 美丽如花情感天地血拼购物聪慧女人休闲时光<a title="美眉游戏" href="#tag-c06" class="">美眉游戏 [/CODE] 为此注意CSS的定义方式:.nav原创 2012-03-09 18:47:24 · 1922 阅读 · 0 评论 -
CSS背景图像位置属性background-position百分比详解
百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50% 50%; } 这使得背景图像的中心同其父元素中心对齐。换句话说,百分比值同时应用于元素及其背景图转载 2012-01-13 08:25:46 · 11070 阅读 · 0 评论 -
块级元素和行内元素使用心得汇总
------------------------------------------------原文地址:http://www.yixin.me/blog/inline-and-block-elements.html行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元转载 2011-12-16 11:36:58 · 7940 阅读 · 0 评论 -
移动端:active伪类无效的解决方法
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况,一般主流浏览器下也支持其他元素,如button等。在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键。该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。说到:active伪类就不得原创 2015-02-11 16:20:05 · 48431 阅读 · 13 评论