![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
billfeller
https://github.com/billfeller
展开
-
CSS3如何实现超出指定文本以省略号显示效果
作者:zhanhailiang 日期:2014-10-24不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。以下分享实现指定文本超出部分以省略号展示的Demo:style>.text1 { width原创 2014-10-24 23:12:36 · 3039 阅读 · 0 评论 -
SD9027: 各浏览中某些标记通过鼠标触发 Click 事件后不会获得焦点并触发 Focus 事件
SD9027: 各浏览中某些标记通过鼠标触发 Click 事件后不会获得焦点并触发 Focus 事件标准参考 • 问题描述 • 造成的影响 • 受影响的浏览器 • 问题分析 • 解决方案 • 参见作者:钱宝坤标准参考根据 W3C HTML4.01 规范中的描述,onFocus 是 HTML 中的标准属性,它在元素通过鼠标或者键盘 TAB 导航获得焦点时触发,一般转载 2012-08-29 16:48:54 · 1363 阅读 · 0 评论 -
{{CSS}}浮动和定位
1.浮动float:left|right|none|inherit初始值:none应用于:所有元素继承性:无1)浮动元素对于浮动元素有以下几点需注意。首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。即一个元素浮动时,其他内容会“环绕”该元素。2)不浮动float:none用于防止元素浮动。3)浮动规则首先,需要建立包含块(cont原创 2012-08-20 22:20:33 · 950 阅读 · 0 评论 -
{{CSS}}字体font属性详解
1.字体系列font-familyCSS定义了5种通用字体系列:1.Serif字体2.Sans-serif字体3.Monospace字体4.Cursive字体5.Fantasy字体当然还有各种特定字体系列,如Times,Verdana,Helvetica,Arial最佳实践:1.在所有的font-family规则中都提供一个通用字体系列,这样就提供了一条后路原创 2012-08-19 11:58:10 · 1971 阅读 · 0 评论 -
{{CSS}}结构和层叠
每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素。有了这个结构树,选择器才能起作用,这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠。1.特殊性每个选择器都有特殊性,对于每个规则,用户代理会计算原创 2012-08-19 00:43:50 · 1227 阅读 · 0 评论 -
HTML验证注意点
符合标准的网页是要通过HTML验证的,在我们制作网页时需要注意以下6点内容。1.必须在文档开始声明文档的类型。(这点很重要,不显示起明文档类型,对于IE,FF早期的浏览器会触发Quirk模式,会导致很多莫名的问题)建立XHTML文档,首先我们最重要的就是要生命该文档是什么类型的!有很多的XHTML文档类型,但是我们通常用的就三种:HTML 4.01 Strict, HTML 4.0原创 2012-08-16 18:27:35 · 713 阅读 · 0 评论 -
{{CSS}}visibility与display的区别
有两种CSS属性可以用来改变文档元素的可见性,即visibility与display。属性visibility比较简单,设为hidden,就不显示元素,设为visible,就显示元素。属性display用途更多,它用于指定显示的元素的类型。它可以指定一个元素是块元素,内联元素,还是列表项目,等等。但当display属性被设置为none时,受影响的元素就不会显示出来,甚至根本不被放置。vis原创 2012-08-14 21:25:20 · 761 阅读 · 0 评论 -
表单中Readonly和Disabled的区别
表单中Readonly和Disabled的区别2010-06-22Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio,转载 2012-07-28 18:23:55 · 757 阅读 · 0 评论 -
iframe 和 frame 的区别
iframe 和 frame 的区别2010-03-08iframe标记的使用提起iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟frame就不会陌生了。frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教转载 2012-07-28 18:30:27 · 540 阅读 · 0 评论 -
IE下Iframe跨域访问不能写cookie的解决方法
最近做了一个系统,需要链入另外一个系统的页面,姑且称为 系统A 链入系统B的页面,采用iframe引用B的页面;在测试环境的时候,访问一切正常;到了正式环境,发现有部分人在系统A访问iframe引用的 B系统的页面,出现session丢失的问题; 比较两边环境,发现测试环境中系统A和B都在一个主机上,而正式环境系统A和系统B是分开部署的。而IE的iframe有一转载 2012-07-26 21:43:29 · 881 阅读 · 0 评论 -
解决跨域iframe自适应高度
关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217大概原理见下图:可以直接看示例:http://lzlu.com/lab/loader/下面直接上代码了下面是核心代码loader.js/** * 跨域iframe自适应高度解决方案 * Author: changyin@tao转载 2012-07-26 20:34:26 · 974 阅读 · 0 评论 -
浅谈个人在瀑布流网页的实现中遇到的问题和解决方法
转自:http://cued.xunlei.com/log031先上Demo瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.php瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html瀑布流+无限拖 (js获取图片高度版) http://cued.xunle转载 2012-08-27 20:56:47 · 976 阅读 · 0 评论 -
event.currentTarget与event.target的不同
源引https://developer.mozilla.org/en-US/docs/DOM/event.currentTarget的说法:event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element原创 2012-09-06 14:18:24 · 940 阅读 · 0 评论 -
input button的行高在FF下的显示问题
最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式:input#button {border: 2px solid #06f;color: #06f;background-color: #6cf;font: bold 12px Ari转载 2012-09-07 15:53:06 · 4867 阅读 · 0 评论 -
ie bug集合
转自:http://www.w3cplus.com/solution/iebug/iebug.html在说bug之前,有必须了解下什么是ie的haslayout,因为了解了这个,可以帮助你解决很多ie的bug,先推荐三篇haslayout相关的文章:IE Haslayout 详解,haslayout,"HasLayout" Overview下面分两块来介绍ie的bug,第一块以转载 2013-03-11 16:43:58 · 917 阅读 · 0 评论 -
Block Formatting Contexts(块级格式化上下文)
转自:Block Formatting Contexts(块级格式化上下文)前几天看到kejun‘s blog里面的一篇文章:“近期面试感受”,里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatting Contexts(块级格式化上下文),而我一点印象都没有,所以就找了一些相关的文章学习一下,看到一篇很好的文章,所以就翻译出来和大家转载 2013-02-26 17:47:05 · 933 阅读 · 0 评论 -
IE CSS hack
作者:zhanhailiang 日期:2012-12-24IE系列的常见的Hack技术总结起来就一句话——针对特定版本的IE写特定的的样式,该样式在指定版本的IE以外无法被正确解析。#ml10 { margin-left:10px; margin-left:10px !important; /* Firefox、IE7+支持 */ _margin-left:10原创 2012-12-24 15:42:32 · 1053 阅读 · 0 评论 -
IE CSS hack
作者:zhanhailiang 日期:2012-12-24IE系列的常见的Hack技术总结起来就一句话——针对特定版本的IE写特定的的样式,该样式在指定版本的IE以外无法被正确解析。#ml10 { margin-left:10px; margin-left:10px!important; /* Firefox、IE7支持 */ _margin-left:10px原创 2012-12-24 15:36:42 · 82 阅读 · 0 评论 -
word-wrap和word-break强制换行
强制换行与强制不换行问题曾经一度困扰着我,每当遇到换行问题时候那就是痛苦回忆的开始,现在终于痛定思痛,一鼓作气把这个长期顽固问题给解决。强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地:w转载 2012-11-27 15:36:25 · 833 阅读 · 0 评论 -
css精品教程汇集
本文章旨在收集css的精品教程,为大家提供一个高质量的学习翻阅参考平台。其实网络上有很多很好的css教程,牛人更是一大把,只是藏得太深。每次查阅点资料那个百度啊,好不麻烦。索性我们一起动手,把那些黄沙中的金子挑出来,让它光芒尽显,造福于我辈,岂不快哉!每人贡献一份力量,把你自己的或你朋友的或你膜拜的偶像的精品文章贴出来吧。您可以通过下面评论,或者加入w3cplus qq群(1041263),或者通转载 2012-10-29 10:30:16 · 656 阅读 · 0 评论 -
CSS布局——左定宽度右自适应宽度并且等高布局
今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:左侧固定宽,右侧自适应屏幕宽;左右两列,等高布局;左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)要求不用JS或CSS行为实现;仔细分析试题要求,要达到效果其实也并不转载 2012-10-19 19:30:36 · 924 阅读 · 0 评论 -
ie6下的双倍外边距问题
一、ie6下的双倍外边距问题 .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; } 很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。二、怎么会这样?转载 2012-10-19 19:03:06 · 594 阅读 · 0 评论 -
八种创建等高列布局
高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情。如果一个设计是固定宽度(非流转载 2012-10-19 20:16:43 · 1156 阅读 · 0 评论 -
javascript 判断 iframe是否加载成功(该方法可自然延伸到判断script脚本是否加载成功)
javascript 判断 iframe是否加载成功(该方法可自然延伸到判断script脚本是否加载成功,方法请见《高性能网站建设进阶指南》第5章第三节Preserving Order Asyncronously里第4种方法Script onload解决方案)许 晨光 ♦ 五月 8, 2011转自:http://blog.css-js.com/javascript/javascript转载 2012-08-29 16:53:44 · 2252 阅读 · 0 评论 -
Iframe高度自适应(兼容IE/Firefox、同域/跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。采用JavaScript来控制iframe元素的高度是iframe高度自适应的转载 2012-07-26 20:14:07 · 1212 阅读 · 0 评论 -
纯CSS制作三角形的方法
在前端设计中经常用到三角形图标,如列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用。今天教大家几种纯CSS制作三角形的方法:1、通过border 属性来实现最简单也是最实用的方法,将元素的宽带和高度设为0,通过border属性来实现三角形。优点:简单、可创建不同角度的三角形缺点:IE6不支持transparent,可以通过chroma滤镜来解决、边会有锯齿转载 2012-08-10 09:23:12 · 1089 阅读 · 0 评论 -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度转自:http://blog.51xuewen.com/wangpan/article_2091.htm网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽)转载 2012-03-12 15:15:09 · 538 阅读 · 0 评论 -
完美解决IE6不支持position:fixed的bug
完美解决IE6不支持position:fixed的bug 废话不多说,先看一下下面这段代码:IE6 position:fixed bug*{padding:0;margin:0}p{height:2000px}#gs{border:1px solid #000;position:fixed;right:30px;top:120px}转载 2012-03-12 09:45:39 · 488 阅读 · 0 评论 -
解决IE6、IE7、Firefox的CSS HACK 方法集
转载:http://hi.baidu.com/358168840/blog/item/32119c4c619d11ead62afcf4.htmlIE6对css的支持所存在常见的一些bug:1.IE6中奇数宽高的BUG 2.IE6 3像素BUG3.IE6文字溢出BUG4.IE6中PNG Alpha透明5.li在IE中底部3像素的BUG6.链接伪类(:hover)CSS背景转载 2012-03-11 11:42:33 · 626 阅读 · 0 评论 -
《编写高质量的代码》base.css文件源码
转载:http://hi.baidu.com/358168840/blog/item/1a147a03208c109bd53f7ca3.html@charset "utf-8";/* CSS Document *//*CSS reset*/html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h转载 2012-03-11 11:43:24 · 604 阅读 · 0 评论 -
DOM元素节点nodeType取值详解
DOM元素节点nodeType取值详解转自:http://www.impng.com/web-dev/element-nodetype-values.html引用来自Javascript Kit的一个表格Element nodeType valuesReturned integer Node type Constant1 ELEMENT_NODE转载 2012-03-23 20:16:52 · 1045 阅读 · 0 评论 -
Andy Budd的样式指南
Andy Budd的样式指南转自:http://www.cnblogs.com/JustinYoung/articles/763052.htmlkeyword:cssMastery,andy Budd,style Guide,css样式表组织与规划.下载地址:http://files.cnblogs.com/JustinYoung/Styleguide.rar《转载 2012-03-07 01:16:07 · 757 阅读 · 0 评论 -
CSS position: absolute, relative详解
CSS position: absolute, relative详解转载:http://www.jb51.net/article/16461.htmCSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层转载 2012-02-27 17:11:44 · 506 阅读 · 0 评论 -
HTML DOM的nodeType值
将HTML DOM中几个容易常用的属性做下记录:nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document转载 2012-03-22 20:32:20 · 535 阅读 · 0 评论 -
CSS Filters
今天在前端观察上看到了《-webkit-filter是神马?》,感觉特别有意思,具体关于CSS Filter可以看Filter Effects 1.0,以及 filter功能,Webkit率先支持了这几个功能,效果非常赞+10086!支持的效果有:blur(模糊)grayscale(灰度)drop-shadow(阴影)sepia(褐色滤镜)brigh转载 2012-04-16 23:33:16 · 667 阅读 · 0 评论 -
自适应网页设计(Responsive Web Design)
自适应网页设计(Responsive Web Design)作者: 阮一峰日期: 2012年5月 1日随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;P转载 2012-05-08 20:28:39 · 599 阅读 · 0 评论 -
IE6不支持border-color:transparent 的问题解决(转载)
IE6不支持设置transparent为边框的颜色。例如:border:solid 1px transparent;解决方法:border:solid 1px transparent;_border-color:tomato;_filter:chroma(color=tomato); (说明: Chroma属性可以设置一个对象中指定的转载 2012-08-10 09:23:59 · 544 阅读 · 0 评论 -
IE6 中 a:hover 的bug
转自:http://ued.taobao.com/blog/2007/03/05/ie6-hover-bug/如上图,在制作数码热销排行的页面时,每种手机的图片都是固定的160×120大小,但是出于页面美观及内容可读性的考虑,在列表页上图片都压缩为原大小的50%显示;也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时,我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显转载 2012-08-09 09:42:27 · 927 阅读 · 0 评论 -
前端开发链接分享
淘宝UED淘宝开放平台支付宝UEDChinaUI.com蓝色理想UCDChina阿里巴巴(中文站)视觉同盟UI设计频道19Lou.com DKUED视觉中国阿里巴巴(国际站)淘宝QA口碑网UED9RIA.com天地会淘宝DBA淘宝数据仓库团队阿里妈妈UED支付志(支付宝官方Blog)淘宝网招聘四川电信UI互动部腾讯CDC腾讯Webteam搜狐UED淘宝营销产品博客UIRSS.com原创 2012-08-09 09:48:25 · 218 阅读 · 0 评论 -
CSS3动画效果-animate.css
animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验。动画效果包括强调突出,滑块,淡入淡出,放大缩小等等。你也可以结合jQuery一起使用,例如$(‘.bouncy’).addClass(‘bounceInDown’);项目主页:http://daneden.me/animate/git地址:htt转载 2012-07-09 14:05:41 · 660 阅读 · 0 评论