随笔分类 -  Html/CSS

我的Cnblog个人主页美化重构小结
摘要：当然这个是一个很粗糙的改版，我比较喜欢微软雅黑字体，在火狐中国版中看上去还可以，但是在其他非雅黑字体的浏览器中看上去就不是很好了，尤其在现在号称最快的浏览器Opera10.50上字体和段落行间距上渲染得都不是很好。注意一个小地方，背景小色块的位置和颜色是随机变化的，实现这个效果的不复杂，下面会说到。我禁用了模板默认的CSS之后，存了个人主页的在本地用Dreamwaver边修改编测试的。HTML的结... 阅读全文
posted @ 2010-03-16 01:23 island205 阅读(3178) 评论(32) 推荐(2)
如何CSS大背景站点
摘要：翻译自：web designer wall由于我发表了80 Large Background Websites，我就接到几份邮件来问我如何用CSS设计一个大背景的站点。所以，我想我应该开分享一下我设计大背景站点的技巧。于是我总结了一下几个技巧，运用一两张图片设计出大背景站点。普遍的错误：被裁切的背景（Demo）看一下示例文件，在1280px的分辨率下看起来是好的，但是如果转换到更高的分辨率下，你将... 阅读全文
posted @ 2009-12-21 18:37 island205 阅读(915) 评论(0) 推荐(1)
CSS文本渐变效果
摘要：翻译自：web designer wall另一篇CSS Decorative Gallery我觉得使用的技巧是一样的。 你不想打开PhotoShop制作每一张标题文字图片的渐变效果吧，这次是一个简单的技巧——仅仅使用一张PNG图片来实现所有的标题文本的渐变效果（纯CSS，不添加任何javascript或者flash）。仅仅在<hx>使用一个空的<span&... 阅读全文
posted @ 2009-12-21 14:18 island205 阅读(1112) 评论(2) 推荐(1)
引用文本块的引号效果
摘要：翻译自：web designer wall使用一个<blockquote>添加两张引号图片实现引用文本引号效果。方法是分别在blockquote和blockquote：first-letter添加背景图片。1.html源代码<blockquote>Hello, I am a double quote...</blockquote>2.样式化blockquoteb... 阅读全文
posted @ 2009-12-19 17:14 island205 阅读(401) 评论(0) 推荐(1)
样式化顺序列表
摘要：翻译自：web designer wall绝大多数的浏览器解释显示列表序号字体大小默认的和文本一样大小。这是一个简单的CSS教程利用有序列表<ol>和段落<p>标签来设计一个时髦的编号列表。概要定义<ol>的字体为：Georgia font,然后把<p>的字体设为：Arial。 1.Html源代码写一个有序列表，不要忘记用<p>包裹文本。... 阅读全文
posted @ 2009-12-19 16:39 island205 阅读(440) 评论(0) 推荐(2)
jQuery连续列表
摘要：翻译自：web designer wall你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。可以先看看示例。1a.添加jQuery代码下载jQuery，在<head>标签之间如下添加jQuer... 阅读全文
posted @ 2009-12-19 15:31 island205 阅读(2111) 评论(0) 推荐(1)
Hover属性的充分利用
摘要：翻译自：web designer wall通常，我们改变：font color，font styles， border styles，background等属性来实现hover的划过效果。但是其实我们可以运用hover做更多的东西。我们可以运用它美化设计，减少混乱和显示更多的额外信息。在这篇文章中，我将展示许多站点出色运用hover属性的例子，同样，我也将提供一个快速的教程，来实现不同的hover... 阅读全文
posted @ 2009-12-19 08:23 island205 阅读(3361) 评论(0) 推荐(2)
Design Out Of The Box 破盒设计
摘要：翻译自：web designer wall你是否厌倦了自己典型的死板的盒式设计？这次来学习下如何打破盒式设计做一点有创造力的事情。在这片文章中我收集了一些精彩的破盒设计。我也提供了一些运用背景图片和CSS的position属性等便捷的CSS技巧示例来说明如何进行具有活力的破盒设计。示例1：Huge IncHuge站点引起我兴趣的地方是它的header设计。请注意如何设计元素破盒的。 示例2：Ja... 阅读全文
posted @ 2009-12-18 21:48 island205 阅读(545) 评论(0) 推荐(1)
冗余代码清理和语义化编码
摘要：翻译自：web designer wall如果你用<div>处理所有的web前端设计，这篇文章正合适你看看。它关注于使用尽量少的<div>标签，如何使用语义化的标签写出干净简洁的Html编码。你有没有遇到过编辑别人的html模板，头疼于其凌乱而无意义的标记？编写干净的语义化的html模板不单单只对你个人呢有好处，对团队也大有裨益，在编辑和调试一个比较大的项目将会更加有效率。... 阅读全文
posted @ 2009-12-18 20:08 island205 阅读(1021) 评论(0) 推荐(1)
2009年最棒的CSS设计
摘要：翻译自：web designer wall自从2007年以来，我每年都做一个该年度最好的css设计网站画廊收集（07集与08集），又到了一年的这个时候了——2009年最棒的CSS设计。我选了50个精美的网站，我发现在他们之中有很多的是拥有优美的serif 字体的简约精美的设计。粗略的写生风格任然很强势，然而，大背景的设计不在像2008年一样如火如荼，取而代之的是纹理背景的流... 阅读全文
posted @ 2009-12-18 16:00 island205 阅读(335) 评论(0) 推荐(1)
五个简单的但是非常有用的css特性
摘要：翻译自：web designer wall这里说的有用的5个css特性是大家所熟悉的。没有涉及到css3.0的内容，都是css2.0标准里面的。clipmin-heightwhite-spacecursordisplay差不多所有浏览器都支持这些特性，所以千万不要错过这篇文章，你一定会惊奇于他们是如此的有用。1.css clipclip特性裁减一个绝对定位的元素。将元素的position定为abs... 阅读全文
posted @ 2009-12-18 11:19 island205 阅读(392) 评论(4) 推荐(1)
960 grid css web框架
摘要：960 grid css web框架。或许不能称作框架。官方网站：http://960.gs/因为：960px=12(60pz+20px)=16x(40px+20px)=24(30px+10px)所以：960个像素作12栏 16栏 24栏分割12栏和16栏分割的每个grid左右margin各10px，24栏分割每个grid左右margin各5px。几个重要的关键字和概念1.container容器：... 阅读全文
posted @ 2009-12-16 00:01 island205 阅读(1002) 评论(2) 推荐(1)