CSS+HTML | 紫枫印象

‘CSS+HTML’ 分类的文章

CSS Overflow属性详解

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性 overflow-y 和overflow-x，它们很少被采用。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow 的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…

2010.03.07 / no responses / 分类: CSS+HTML
CSS网页布局中易犯的10个小错误

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS 网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查html元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

2010.03.07 / no responses / 分类: CSS+HTML
使用CSS为图片添加的五种特殊效果

1、阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML：
1
<img class=”shadow” src=”sample.jpg” alt=”" />
CSS：
1 2 3 4
img.shadow { background: url(shadow-1000×1000.gif) no-repeat right bottom; padding: 5px 10px 10px 5px; }
2、双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：
1
<img class="double-border" src="sample.jpg" alt="" />
CSS：
1 2 3 4 5
img.double-border { border: 5px solid #ddd; padding: 5px; /*Inner border size*/ background: #fff; /*Inner border color*/ }
2010.03.06 / no responses / 分类: CSS+HTML
揭秘HTML5和CSS3

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：
HTML5新增和移除的元素

HTML5 新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条，在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的 placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的 rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

2009.12.17 / no responses / 分类: CSS+HTML
晒一下CSS Sprite(雪碧)

今天在网上看了一篇关于css sprite的文章，最近的项目，也一直在用Sprite 雪碧，制作中需要精确的定位。下面收集了一些牛人们的雪碧，晒给大家看看：

先晒下我最近项目中的雪碧↓

考虑本博的图片限制，图片进行了处理，还请大家谅解!

2009.11.09 / no responses / 分类: CSS+HTML