随笔分类 - css
摘要：这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。这个方法来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。<style type="text/css">.clearfix:after {content: ".";display: block;height: 0;clear: both;visib...
阅读全文
摘要：层叠样式表(css)是Web设计的一种语言，CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢？虽然还有一些新属性没有得到官方的确认，但是一些浏览器已经开始支持来自CSS3得新特性了。 但问题是——许多浏览器支持了，唯独最主要的Internet Explorer浏览器仍不支持！ 很多人尤其是中国的前端er们会觉得既然IE不支持，那就先不关心...
阅读全文
摘要：前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法。今天，暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图。网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对来说也是比较复杂的，往往需要精准的测量和栏目划分。960 Grid System/960网格系统，这是一套可以让你快速创建网格设计的工具，之所以叫960，就是说模板的宽度是960像素。而之所以用960像素来做为标 准，是因为960像素宽具有高度的灵活性。今天我们就来教大家制作一个960 Grid Sy
阅读全文
摘要：幻灯效果是 Web 设计中的新风潮，新的白宫网站也未能免俗，幻灯效果（拉洋片）特别适合在站点的首要位置展示一些核心的，展示性的内容。最早的幻灯效果多基于 Flash，随着 JavaScript 在 Web 设计师与开发者眼中地位的提升，基于 JavaScript 的幻灯效果开始取代 Flash。本文介绍了一些非常出色的 Web 幻灯设计实例。Micro一个非常干净简单的幻灯片效果。Paramore漂亮的轮播效果，边界处理也很出色。Obox Design简单干净的图片幻灯效果。SpaceCollective使用了一些很好的手工操作的图片幻灯。Josh Smith非常简单的图片混等，少即是美。Be
阅读全文
摘要：http://www.ajaxload.info/#preview 进度条在线制作
阅读全文
摘要：国内的一个UI网站http://www.zcool.com.cn/丹麦Icon设计师的主页http://jonas.seph.ws/生活在澳洲的19岁中国UI设计师http://www.istartedsomething.com/又一俄罗斯icon工作室http://www.turbomilk.com/还有fasticonhttp://fasticon.com/http://topstyles.net/来个小日本的icon工作室http://www.hybridworks.jp/此站偶每天必看http://www.enhancedlabs.com/main/index.html来个icon国王
阅读全文
摘要：http://www.68ps.com/down/index.asp素材库http://www.colourlovers.com/色彩方案http://99ut.blueidea.com/welcome.html ps教程http://tech.163.com/special/000915SN/PS_D.html视频教程http://www.sincol.net/各种素材http://www.chinaui.com/ 人机交互界面http://www.blueidea.com/蓝色理想http://jorux.com/挖掘国外网络资源http://bbs.redocn.com/forum-71
阅读全文
摘要：前面的很多内容属于引言部分，如果您对这些内容比较了解，可以直接跳到下面的“盒模型问题的解决”，查看主要的内容。首先谈谈!important问题的引起（盒模型问题）： 在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border） 和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如， Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说： 层的宽度 = "width" + "padding(left and right)" + "
阅读全文
摘要：屏蔽IE浏览器（也就是IE下不显示）*:lang(zh) select {font:12px !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/select:empty {font:12px !important;} /*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7与IE5.0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。仅IE7可以识别*+html select {…!important;}当面临需要只针
阅读全文
摘要：尽管有 CSS 的 vertical-align 特性，但是并不能有效解决未知高度的垂直居中问题（在一个 DIV 标签里有未知高度的文本或图片的情况下）。 标准浏览器如 Mozilla, Opera, Safari 等.，可将父级元素显示方式设定为 TABLE(display: table;) ，内部子元素定为 table-cell (display: table-cell)，通过...
阅读全文
摘要：有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是设计师工作中最常遇到的一个问题，很有代表性。 题目的难点在于两点：垂直居中； 图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法： ...
阅读全文
摘要：Google adsense的广告中的小字体改好看了，研究了一下用的字体是：Pmingliu，大小：11px，之前在POCO站点的图上看到过这样的字 google ad中使用的： font-family: Pmingliu,verdana,arial,sans-serif;font-size:11px 不过如果用GB2312或者GBK字符集的时候，你在测...
阅读全文
摘要：示例代码: 无标题文档 首页 产品介绍 相关下载 服务支持 招贤纳士 公司资源 论坛交流 联系我们 大家应该注意到上边这个例子里的#topMenu ul 用了两次margin也是很多人所说的双margin解决方法,这样做是有原因的，因为这样做的目的就是为了让页面在IE和firefox里显示都正确。这里边就用了!important在IE和firefo...
阅读全文
摘要：网页设计者值得一去的地方！好就顶！现在网页设计方面的站点越来越多，究竟哪个才是经典；根据网页设计中牵涉到的：网页制作，平面设计，动画制作，素材安排等，我特地找了些好的站点，发表在这里，如果大家有好的站点，也希望能跟在后面。 一、网页设计类 1。网站名称：有风的日子 网站地址：http://www.windstudio.net/ 简介：很不错的一个设计...
阅读全文
摘要：在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100p...
阅读全文
摘要：1、针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样：#1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */*+html #1 { color: #999; } /* IE7 */ 那么在firefox下字体颜色显示为#333，...
阅读全文
摘要：转至http://news.cnblogs.com/n/44079/上周跟大家分享了2008年国外50个最佳CSS设计，今天将向大家推荐国外50个2008年最漂亮的网站，08年的网页设计开始流行一些破旧的质感和一些植物、图腾效果,还有一些网站在追求一种平面中的立体感，让用户感觉更加身临其境。这50个网站可以说是风格各异，每个网站都有自己独特的设计风格。相信您在看完之后也会获得很多宝贵的灵感。您还可以参考以下网页设计相关资源:《20+漂亮的网站分类存档设计赏析(下)》《20+漂亮的网站分类存档设计赏析(上)》《推荐80个使用超大背景图片的网站设计》《2008年国外50个最佳CSS设计欣赏》Sai
阅读全文
摘要：Web 2.0 Badges - .一套免费的超酷web小图标 (http://www.web20badges.com/)Mycoolbutton - 简洁的web2.0按钮生成器(http://www.mycoolbutton.com/)Stripe Generator - 专业的流行web2.0 stripe生成器(http://www.stripegenerator.com/)Ajax loading - web2.0 loading 图片生成器(http://www.ajaxload.info/)Webscriptlab - ajax的loading图片生成器(http://www.w
阅读全文
摘要：在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px;IE7 专用 *+height: 100px;IE7、FF 共用 height: 100px !important;一、CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐，用下面的一种感觉最安全) 随着IE7对!important的支
阅读全文