随笔分类 - xhtml+css
1
摘要：尽管人们期待屏幕显示技术有所改进，但CSS和HTML却只提供了少数的交互设计控制，而且还只是双向状态的而非渐进状态，如：一个链接只能是一种颜色或另一种颜色，文本域只能是一种尺寸或另一种尺寸，一幅照片要么透明要么不透明。没有从两种状态的之间的部分，即没有过渡。
这种不优雅的切换效果使很多页面让人感觉突兀。虽然我们可以用DHTML和jQuery来实现过渡效果，但这需要很多代码来实现原本很简单的事情。
在这篇文章中，我们用一种简洁的方法来给页面增加过渡效果，你将会发现CSS ransitions的一些有用的信息以及如何使用它们。
阅读全文
摘要：animation对应的CSS属性列表：
animation-name 动画的名称。
animation-duration 定义动画播放一次需要的时间。默认为0；
animation-timing-function 定义动画播放的方式，参数设置类似transition-timing-function animation-delay 定义动画开始的时间
animation-iteration-count 定义循环的次数，infinite即为无限次。默认是1。
阅读全文
摘要：尽管 HTML5 规范在 2014 年之前不会有正式版本，很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门，原生支持了以前只可能使用 JavaScript 或 Flash 实现的东西。这里收集了学习 HTML5 的 175 个参考资源，包括教程，框架，示例等。基本上算是 HTML5 葵花宝典了吧？
阅读全文
摘要：float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。
清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的 html。于是有人就想到css里面有一个：after的，这样就不需要加入额外的html了，完全由css完成，于是就有了下面这段比较经典的css代码：
.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;}
阅读全文
摘要：IE6 png 透明 (三种解决方法)(转来的哦)
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的
=============================================================================
此效果简单，。。。。相当不错 推荐
阅读全文
摘要：by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=471
一、匆匆带过的概念
关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页中，层的概念与photoshop或是flash中层的概念是一致的。熟悉 photoshop或是flash的应该知道，层级越高（图层越靠上），越在上面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。
阅读全文
摘要：周六参加web交流会www.w3ctech.com ，获益匪浅。开发中只是使用YSlow 的Grade评级进行web站点优化，却没有发现，其实YSlow的Tools也相当强大。
这里，我就现学现卖。讲讲使用YSlow的Smush.it 进行web图片的优化。
1. 首先，还是使用前端开发的不可缺少的利器--FireFox 浏览器。安装上YSlow--Add-ons
阅读全文
摘要：通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得 CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。
阅读全文
摘要：原文：Efficiently Rendering CSS
我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢，浏览器渲染的速度又如何呢？
这是应该是浏览器开发者应该关心的(页面加载更快，用户就会更愉快)。Mozilla有一篇文章： about best practices . Google 当然也很关心这个问题，他们也有这样一篇文章：Optimize browser rendering 。
让我们了解下他们主要倡导的东东，然后讨论他们的实用性。
阅读全文
摘要：1.通配选择符
语法：
* { sRules }
说明：
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
示例：
阅读全文
摘要：看到淘宝网页中这样写使用的是import,而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的？他们有什么区别？css用import还是link好?从经典论坛和另外一个网站大概了解了一下
阅读全文
摘要：01 命名规范
文件命名的原则：以最少的字母达到最容易理解的意义。
一般文件及目录命名规范：
每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm
文件名称统一用小写的英文字母、数字和下划线的组合
阅读全文
摘要：好久没遇到如此有趣的BUG了，有多有趣呢？看下面的图~
阅读全文
摘要：在网上看到篇文章讲全球很多高手的CSS全局样式（reset.css），再一次体会到了什么叫“细节决定成败”。原文：http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/。 原文是借着翻译插件看下来的，大概意思就是讲什么是Css，以及各浏览器的css规则的不同，而制定"Css Reset"也是为了兼容与统一，正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱。我的理解是：CSS reset的意义，不是让你全部去掉，而是让各种浏览器尽量起点一样。
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。通过高手们的经 验，下面两个细节需要注意。你可以检查一下你设计网站或者博客的全局CSS。
阅读全文
摘要：由于浏览器之间存在兼容性问题，在制作网 页的时候，为了使页面能在不同浏览器中显示相对一致；所以总结了几个浏览器之间的Hack和在浏览器兼容问题上的一些相关注意事项。现在浏览器基本需要兼容IE6；IE7；IE8；FF。
第一节 CSS HACK 汇总速查一览
阅读全文
摘要：margin-top在firefox中会绑架父节点的margin，通俗点说呢，就是子节点 的margin-top 设置，有些情况下会被传递给了父节点的margin-top。本来head 和content 在设计的语意上来说，是两上下相邻的。而结果却content节点却被子节点margin-top绑架.问题就这样来了。
遇到过这样的问题，然后在网上搜罗了一些资料后解决了，然后这里写点我的心得给大家
我很长一段时间里一直也都认为这是firefox的一个bug，但是最近看过一些资料后在想起这事情，其实这是很正常的。
上下两个垂直接触的div 。 head 和content吧。 在ie下面是好的，为什么是好的，最后在交代，这里先说出了问题的firefox
阅读全文
摘要：一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常 用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比 如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签 是一致的。
四.取消class和id前的元素限定
阅读全文
摘要：以下是ＣＳＳ２．０手册中对于定位问题的解释：
检索对象的定位方式。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。
此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
阅读全文
摘要：1.超链接访问过后hover样式就不出现的问题?
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
2.IE6的双倍边距BUG
例如:
阅读全文
摘要：目 录
第一部分 文档需求、说明及参与人员
第二部分 静态页面规范
一 静态页面基本规范
二 XHTML标准
三 图片规范
第三部分 CSS样式书写规范
阅读全文
1
浙公网安备 33010602011771号