CSS应用

摘要: 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨 浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。 阅读全文
posted @ 2010-06-09 14:48 CB 阅读(53) | 评论 (0) 编辑
摘要:
We advocate using CSS whenever possible, and we often successed. Modern browsers have very good support for CSS — it’s certainly good enough for you to use CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. That’s why today we wanted to highlight 15 jQuery solutions for the most common browser issues that you’ll encounter when building w阅读全文
posted @ 2009-02-04 08:43 CB 阅读(655) | 评论 (0) 编辑
摘要: 浮动的一个特点就是他们脱离了文本流(尽管你可以通过为后面的元素使用clear来重新控制它们)。浮动元素后面的内容会被移动以为浮动元素留空间(通常是通过浏览器对静态顶部填充来清除浮动)。如果浮动元素根本没有出现该位置,那么后面的内容会占居浮动元素原来在页面中的位置。因此对一个浮动元素使用负的顶部填充(margin),浮动元素会冲破任何包含它的块级元素限制,因为我们前面已经提到浮动元素一开始就脱离了文本流。但是如果我们把元素从包含它的块级元素向外拖动足够远以至于它完全超出父元素范围,那么它后面的任何元素将不会继续跟随其向上移动,但是重新设定包含块级元素的内部内容的大小,会使浮动元素继续浮动。阅读全文
posted @ 2008-12-31 08:56 CB 阅读(160) | 评论 (0) 编辑
摘要: Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”,意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?这个问题问得很好,但却很难回答。在这篇文章中,我们专注于这个复杂问题会有那些方面的表现,某一方面的具体讨论和范例请参考文中给出的相关链接。阅读全文
posted @ 2008-12-25 14:39 CB 阅读(91) | 评论 (0) 编辑
摘要: input{ zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this)); }阅读全文
posted @ 2008-12-25 11:25 CB 阅读(81) | 评论 (0) 编辑
摘要: .indicator{ background: red; /** 只对FF Opera和Safari有效 **/ #background: blue; /** 只对IE7有效 **/ _background: green; /** 只对IE6有效 **/ /*/background: orange;*/ /** 只对IE8有效 **/ } 阅读全文
posted @ 2008-12-19 13:07 CB 阅读(69) | 评论 (0) 编辑
摘要: Showing Hyperlink Cues with CSS I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari.阅读全文
posted @ 2008-12-07 09:36 CB 阅读(137) | 评论 (0) 编辑
摘要: 列举了一些常见,新手经常问的问题。举例并说明解决方法。(内容在下面对应) IE6IE7IE8共存问题 1.超链接访问过后hover样式就不出现的问题 2.FF下如何使连续长字段自动换行 3.ff下为什么父容器的高度不能自适应 4. IE6的双倍边距BUG 5. IE6下绝对定位的容器内文本无法正常选择的问题 6. IE6下为什么图片下方有空隙产生 7. IE6下这两个层中间怎么有间隙 8. list-style-image无法准确定位的问题 9. LI中内容超过长度后以省略号显示的方法 10.web标准中定义id与class有什么区别吗 11.如何垂直居中文本 12.如何对齐文本与文本输入筐 13.为什么FF下面不能水平居中呢 14.为什么FF下文本无法撑开容器的高度 15.为什么IE6下容器的宽度和FF解释不同呢 16.为什么web标准中IE无法设置滚动条颜色了 17.为什么我定义的样式没有作用呢 18.为什么无法定义1px左右高度的容器 19.为什么这个背景颜色无法显示 20.怎么样才能让层显示在FLASH之上呢 21.怎样使一个层垂阅读全文
posted @ 2008-10-19 19:06 CB 阅读(123) | 评论 (0) 编辑
摘要:   头:header   内容:content/containe   尾:footer   导航:nav   侧栏:sidebar   栏目:column   页面外围控制整体布局宽度:wrapper   左右中:left right center   登录条:loginbar   标志:logo   广告:banner   页面主体:main   热点:hot   新闻:news   下载:download   子导航:subnav   菜单:menu   子菜单:submenu   搜索:search   友情链接:friendlink   页脚:footer   版权:copyright   滚动:scroll   内容:content   标签页:tab   文章列表:list   提示信息:msg   小技巧:阅读全文
posted @ 2008-07-14 16:11 CB 阅读(151) | 评论 (0) 编辑
摘要: 最新流行flash轮播或切换幻灯片广告演示源码
阅读全文
posted @ 2008-07-08 15:31 CB 阅读(4413) | 评论 (1) 编辑
摘要:

补充资料

在曾经的 淘宝UED 招聘 中有这样一道题目:

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

题目的难点在于两点:

垂直居中;
图片是个置换元素,有些特殊的特性。

阅读全文
posted @ 2008-05-29 10:48 CB 阅读(65) | 评论 (0) 编辑
摘要:

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

阅读全文
posted @ 2008-05-28 11:25 CB 阅读(84) | 评论 (0) 编辑
摘要:

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。


阅读全文
posted @ 2008-05-28 10:13 CB 阅读(216) | 评论 (1) 编辑
摘要:

50多套CSS导航菜单免费资源

阅读全文
posted @ 2008-05-25 10:31 CB 阅读(4776) | 评论 (0) 编辑
摘要:

这是来自SmashingMagazine的又一个CSS相关资源收集文章,事实上,里面有一半多的技巧,帕兰在之前翻译Noupe的101个CSS技术高级应用教程(上)101个CSS技术高级应用教程(下)里面都已经介绍过了。 不过还是全部翻译一个,就当作是复习吧。

阅读全文
posted @ 2008-05-25 10:29 CB 阅读(203) | 评论 (0) 编辑
摘要:

导航是网页设计中的重要元素。一个良好的网页导航系统能不止是要把它设计的够漂亮,同时更重要的是要能够带领你的用户逗留在你的网站之中,让访客轻松找到他们想要观看的内容。这篇文章介绍了导航菜单在近期的发展趋势,实例和创新的解决方案,非常的丰富,相信能够为你的下次网页设计带来更好的灵感和参考。

阅读全文
posted @ 2008-05-25 10:25 CB 阅读(2968) | 评论 (0) 编辑
摘要:

新的技术在不断的发展和更新,利于我们创造更多独特和看上去很酷的菜单效果。下面是7个基于CSS创建的网页导航菜单:

阅读全文
posted @ 2008-05-25 10:07 CB 阅读(2199) | 评论 (0) 编辑
摘要: 全国哀悼日 网站灰黑色CSS滤镜代码
根据国务院文件,5.19-5.21为全国哀悼日,在此期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。5月19日14时28分起,全国人民默哀3分钟,届时汽车、火车、舰船鸣笛,防空警报鸣响。 很多草根网站都将整站换成素装。并建议中国所有站点更换为素装。 国务院决定5月19日至21日为全国哀悼日阅读全文
posted @ 2008-05-19 22:52 CB 阅读(143) | 评论 (0) 编辑
摘要: http://bbs.blueidea.com/thread-2851793-1-1.html
蓝色风格:预览  下载
蓝色风格双击关闭:预览  下载阅读全文
posted @ 2008-05-04 13:15 CB 阅读(76) | 评论 (0) 编辑
摘要: /*------------------------------------------------------------------
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements 阅读全文
posted @ 2008-05-04 08:59 CB 阅读(145) | 评论 (0) 编辑
摘要: 各种遮罩层(lightbox)实现
Thickbox - 基于 jQuery,支持 AJAX,轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k,目前还可作为 WordPress 的插件使用。

GreyBox - 创建 iframe 的弹出界面,可使用图片、HTML 及 URL,大小约为 20k。

GreyBox Redux - 基于 jQuery,比 GreyBox 更轻。
阅读全文
posted @ 2008-04-08 09:51 CB 阅读(2897) | 评论 (1) 编辑
摘要: Html+CSS 在 网页构建(Web Page Building) 中的应用已经不是什么新鲜事了。轻盈的 Div布局 方式替换了笨重 Table布局 方式。而在 Div布局 方面多数人使用的是 float方式 ,Div 在 float 的控制下忽左忽右好不自在。但我们今天要说的不是 网页构建 ,而是 B/S结构 软件界面构建。所以我想介绍另外一种方式 position方式 。我个人比较喜欢这种方式,虽然很多人认为把 Div 的 position属性 设置为 absolute 后用 top属性 和 left属性 在页面中随意定位进行布局是一种极端菜鸟的方式,但在 B/S结构 软件界面构建过程中这种 position方式 的灵活绝对会给你带来意想不到的效果。当然我所说所写 position方式 还存在很多的不足之处,这只是为了抛砖引玉,来给大家打开一个话题。阅读全文
posted @ 2008-04-02 16:38 CB 阅读(423) | 评论 (0) 编辑
摘要:
就是比如有一行文字,很长,表格内一行显示不下.
阅读全文
posted @ 2008-04-01 21:35 CB 阅读(92) | 评论 (0) 编辑
摘要: 53 CSS-Techniques You Couldn’t Live Without
53个CSS-不可或缺的技巧
CSS是重要的,它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个CSS文件更换另一个。难道它不够强大吗?恩,是的,其实它很强大。
在过去的几年里,网站开发者写了很多关于CSS的文章和开发了很多实用的技巧,这些能帮你节省很多时间。当然,如果你有足够时间也可能发现它们。在下面,你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的,它们使我们的生活更简单。让我们看一看这53个基于CSS的技巧,如果你做网站开发,应该永远都愿意掌握它们。
感谢所有的在过去几年里在易用和可用的基于CSS设计方面作出贡献的开发者们,我们真的很感谢他们!谢谢你们!
阅读全文
posted @ 2008-04-01 16:23 CB 阅读(113) | 评论 (0) 编辑
摘要: 关键字表,就是一些用于公共定义的ID和Class名称。
ID

1. #B-* // Body用
2. #Head, #Main, #Foot //布局用ID
3. #Message // 系统消息用
4. #Logo, #Toolbar, #Search, #Menu // Head内元素
5. #Layout_*, #Group_*, #Col_* // Main内元素
6. #Links, #CopyRight // Foot内元素
7. #B* // 广告位,与class=”b”结合使用
8. #Plugin // Banner用

Class

1. .txt, .btn, .label_checkbox, .label_input, .handle // 表单内元素
2. .meat // 模块主体元素
3. .list_*(.list_v, .list_h, .list-t, .l阅读全文
posted @ 2008-03-23 09:44 CB 阅读(31) | 评论 (0) 编辑
摘要: 彻底弄懂CSS盒子模式(DIV布局快速入门)
前言
作者:唐国辉   天涯社区、经典论坛昵称:webflash

如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查找相关信息。
阅读全文
posted @ 2008-03-19 10:30 CB 阅读(95) | 评论 (0) 编辑