XHTML-CSS 的最新文章

Bootstrap 4 alpha版新鲜出炉

今天对Bootstrap来说是个特别的日子,不仅是因为过了第四个生日。经过一年的开发,我们的第一个Bootstrap 4的Alpha版本终于出炉了。
August 20, 2015

跳转连接和视口位置(译)

我们常使用页面内部连接以跳转到页面的某个位置,但当使用了fixed的头部时会遇到问题(跳转到锚点的时候最上方被fixed的头部盖住)。有些技巧可以解决,用一些CSS的方法在视口的顶部和目标元素之间插入空白。
August 2, 2013

若干图片空隙问题的解决方案

做网页的人,有时候会碰到这样的问题,图片与容器之间有个空白死活无法去掉,而且明明没有任何的字符,也没有设置margin/padding等等,这是为神马呢?迄今为止我碰到过两种情况会导致这种问题:DOCTYPE为在HTML4或者XHTML1.0(过渡)在IE浏览器中会发生,原因是图片后面有"空格",这里的空格并非指&nbsp,而是就是普通的空格,也就是说图片标签的结束没有紧紧地贴住容器的结束标签。DOCTYPE为HTML5在所有浏览器都一样,图片与容器间有几个像素的空白。...
May 31, 2011

CSS3按钮--10几组范例以及相关的教程

多年来,我们通常透过图片或者JavaScript来创建非标准的漂亮的按钮。随着浏览器对CSS3的越来越多的支持,我们已经可以不受阻碍地使用CSS3按钮了。使用CSS3的属性,有着设计按钮的巨大空间,使用border-radius实现圆角,使用linear-gradient以及box-shadow来实现渐变和阴影,以及动画过场效果,以及......这里列出了十几个代码优美又富有创意的CSS3按钮,你可以使用它们或者从中得到启发。此外,你可以在文章的结尾找到所有其他的CSS3按钮相关的资源以帮助你创建更好的按钮。CSS3 Buttons With Simple Markup尽量使用简单的标记来创建的一套按钮,共计18个。其中有三个只适合Webkit内核的浏览器(如Safari、Chrome),其余的可兼容所有主流浏览器。...
April 20, 2011

闲聊CSS之关于clearfix--清除浮动

一,什么是.clearfix你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。 .clearfix:after { content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1; } <div class="clearfix"> <div class="floated"></div> </div> 上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理: 1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。 2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。 <div> <div class="floated"></div> </div> <div style="clear: both"></div>...
April 15, 2011

HTML5设计原理--Jeremy Keith(转)

本文来自于阿姆斯特丹召开的Fronteers 2010上Jeremy Keith的演讲,您还可以下载投影片(PDF格式),或者观看视频,在"为之漫笔"中有翻译,转载如下:今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。...
April 14, 2011

CSS Bug Table

hasLayout.net介绍了不少关于IE的CSS Bug,本文摘抄了alipay关于IE的CSS Bug的整理表格...
November 18, 2010

趣味小应用:用 HTML5 消磨时光(转+整理)

HTML5 渐入佳境,它强大的功能正被逐渐挖掘出来,各种实验性应用层出不穷,本文介绍几个由 Hakim El Hattab 设计的 HTML5 趣味小应用,它们非常有趣,我刚刚在它们身上消磨了两个小时。当你体验完这几个小应用,会发现 HTML5 比你想象的更强大。 Bacterium An interactive experiment with bacteria in a playful and dynamic physics world. 开始体验:Bacterium 01...
November 17, 2010

分辨率为1024×768时IE6最大化网页宽度

今天有同事说起,分辨率1024×768下,如果网页的宽度设定为1000px,在IE6中会不会出现横向滚动轴。在我的记忆中,这种情况下是会出现横向滚动轴的,但抱着“严谨”的态度,还是到虚拟机(原汁原味的Windows XP)中去试了一下,发现我记忆中的画面并没有出现,并且1000px的网页并没有占满浏览器。...
July 30, 2010

纯粹用CSS做出来的Icon,你相信吗?

如果告诉你下图中的Icon纯粹是用CSS做出来的,你相信吗?...
July 7, 2010

【IE6的疯狂系列】IE6 BUG大全(转)

原作者不断地更新中…… 【IE6的疯狂之一】IE6中奇数宽高的BUG:http://www.css88.com/archives/1725 【IE6的疯狂之二】IE6中PNG Alpha透明:http://www.css88.com/archives/577 【IE6的疯狂之三】IE6 3像素BUG的实例:http://www.css88.com/archives/117 【IE6的疯狂之四】IE6文字溢出BUG:http://www.css88.com/archives/253 【IE6的疯狂之五】div遮盖select的解决方案:http://www.css88.com/archives/545 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题):http://www.css88.com/archives/421 【IE6的疯狂之七】样式中文注释后引发失效:http://www.css88.com/archives/726...
June 11, 2010

苹果官网Demo展示HTML5网页特效

或许可以算是与Adobe之间“开放”平台 之争的新回合,苹果今天在官方网站上专门开辟了一个栏目,展示基于HTML5标准的网页动态应用效果。 苹果展示的动态网页效果综合应用了HTML5、CSS以及JavaScript技术,包括7款Demo,分别是网页视频、文字特效、画面变换、图片 浏览、音频、360度全景图片以及VR虚拟现实。所有Demo都可以在iPhone、iPod touch、iPad或Mac/Windows版的Safari浏览器上运行,其他浏览器打开该网页会被要求下载Safari。其中最特别的VR虚拟现实 Demo由于需要CSS 3D变换技术支持,因此只支持苹果移动设备或Mac机上的Safari浏览器,Windows平台用户需要下载WebKit 引擎每日更新版浏览器才能运行。...
June 7, 2010

HTML 5 新亮点

使用Chrome可以更好地体验HTML5:) 本地储存 – Web Storage // use localStorage for persistent storage // use sessionStorage for per tab storage textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; window.localStorage['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.localStorage['value'];...
May 24, 2010

兼容FF的网页变灰:CSS pointer-events 让下层元素被点击(转)

是否曾经有过这样的经历:把一个元素置于另一个元素之上,而希望下面的那个元素成为可点击的?现在,利用css的pointer-events属性即可做到。CSS pointer-eventsPointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而"none"是一个有趣的属性。将它应用到一个元素如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素,就像这样: <style> .overlay { pointer-events: none; } </style> <div id="overlay" class="overlay"></div>...
May 8, 2010

最新图片

0uwo1.jpg 0ulqlif025fzthuf.jpg gitlab_file_view.png QQ20160403-1.png gitlab-newlogo.jpg QQ20150820-1@2x.png QQ20150820-2.jpg d1.jpg compare.jpg 20130814023118336.jpg 071936023143352.jpg 071935133778301.jpg

最新评论