Archive for the ‘Design’ Category

css|概要与标准简介

CSS 指层叠样式表 (Cascading Style Sheets), 实现了内容与表现分, 极大的提高了实现效率, 并支持多层重叠。 重叠的优先级(由高到低)是 内联样式(在 HTML 元素内部),内部样式表(位于 <head> 标签内部),外部样式表, 浏览器缺省设置。

Index 索引

索引是更好的帮助我们或者他人来了解网站 还有你css的内容。 基本格式如下

Index of css

Index of css

Anchors 锚点

锚点就像css种的书签, 因为css种没有锚点系统。 所以我们可以用下面的方式来定义锚点

anchors definition

anchors definition

Classitis 重定义

重定义用于从新定义某个class里面的元素的style

classitis

classitis

Naming Convention 命名规则

尽量给出准确清晰的名字, 避免混淆, 为了更好的理解 css的内容。

命名规则

命名规则

Shorthand 速写

尽量保持代码简洁短小

保持简洁短小

保持简洁短小

Sprites

把所有的背景图(不同的action时候的变化, 比如hover)放在一个图片中,在点击的时候只是位置的变化, 这样就可以减少对http的请求次数。

sprites , apple menu

sprites , apple menu

Specificity 明确性

specificity

specificity


Resets 重置
全局属性重置确保一个网站在所有浏览器中显示几乎一样。在每一个案例中,不同的浏览器给所有网站使用它们自己的默认样式设置集,这将使我们的网站在不同的浏览器中显示不一样。全局属性重置将改正这种情况并让你从绝对一致的基础开始建立网站。 总是要重置某些分类。无论你是使用 Eric Meyer ResetYUI Reset

或者你自己编写的重置代码,只要使用就对了。

它能很简单的移除所有元素的填充(padding)和边距(margin):

  1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
  2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
resets

resets

Hacks

浏览器兼容性而引发的。。为了保证不同的浏览器看起来是差不多 我们或许会用的css hacks

hacks

hacks

Validation 验证

The W3C Validator has been a very popular online tool that validates CSS.

Css 属性的书写顺序

为了快速的找到我们需要的熟悉, 如果有一个很好的属性排序,就可以很快速的找到。

之前看到有人写按字母排序, lifesinger 在他的blog里面也提过这个问题。 这个并没有一个固定的标准 不同的人 有不同的书写习惯。lifesinger给出了他的分类方式, 个人觉得还是很容易理解跟记住的 先记下来 试试看。

  1. 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等)
  2. 自身盒模型的属性(比如:width, height, margin, padding, border等)
  3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等等)
  4. 装饰性属性(比如:color, background, opacity, cursor等)
  5. 生成内容的属性(比如:content, list-style, quotes等)

——————————

学习完毕 继续代码

reference:

1. http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices

2. http://lifesinger.org/blog/?p=1360

n262

水|生日快乐 妈咪

农历2月十九  我家妈妈大寿

生日快乐  爱你哟

想家

315过个高质量的生日吧

——————————–

最近犯病 不知道是太过高兴还是太过悲伤

怎样都好  好好的享受啦 好的不好的 喜欢的不喜欢的 简单纯粹的生活

n381

web developer| IE 不认识

还依然是兼容的老问题, 有一个message的div 应该出现在 top的位置  用了 position: fix, 但是在ie下面 似乎它又不认识 问谷歌 果然建议搜索里面出现的 就是 ie position fixed

顺便学习下position

static : 静态(默认),无特殊定位。

relative : 相对,对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

absolute : 绝对,将对象从文档流中拖出,通过width、height、left,right,top,bottom等属性与margin、padding、border进行绝对定位,绝对定位的元素可以有边界,但这些边界不压缩。而其层叠通过z-index属性定义。

fixed : 悬浮,使元素固定在屏幕的某个位置,其包含块是可视区域本身,因此它不随滚动条的滚动而滚动。(IE5.5+不支持此属性。) (该死的IE ! 我忍不住再骂一次)

inherit : 这个值从其上级元素继承得到。

————————————————–

问题有了 IE 不认识怎么办.
————————————————–

经过排查是因为float的原因。改了float以后一切ok 就当学习下 position吧。。 其实不能怪IE 是我自己写的错 sorry了 IE


n223

Web Developer| image format

拿到了设计公司的原稿图片, 现在要来转换成我需要的东西。 忽然想起要考虑下什么格式会好一些, 要考虑加载速度跟显示资料。 图片格式的东西都忘的光光了, 来学一下

Learning notes:

当我们创建图片文件的时候, 有很多格式的选择。 但是当我们来做页面的时候, 这个选择就变得非常的简单。因为只有三种格式可选。GIF, JPEG, PNG

  • (1987)The Graphics Interchange Format, or GIF, is perhaps the most common image format on the Web.
  1. color palette (色板): 这是gif最大的限制。 GIFS 是 8bits, 也就是说最多是2^8 =256 种颜色。 因为这样的限制 GIF 比较适合画线或者大块颜色 。
  2. Compression and Opimization(压缩跟优化):GIF用的是无损压缩。
  3. Animation, interlacing and transparency(动画,隔行扫描,透明): 这个是gif三个最大的优点, 动画: 可以吧一系列不同的图片存在同一个文件里面, 然后连续播放 就变成了动画。 隔行扫描: 允许扫描线不按照顺序存储, 允许浏览器显示图片可以按章扫描进度来显示。透明: 这样便于设计人员更方便的融合页面内容, 特别是不规则的图像, 放在一个有颜色的背景下。 如果原图的背景是透明的,一切就easy了。
  • In the early 1990s, the Joint Photographic Experts Group published a new graphics standard, which was named after
    the group: JPEG.
  1. color palette (色板): 24bits, 2^24-> 16.7百万种 对比gif, jpge不会有很突兀的边界, 但是在很少颜色或者大块同色的图片中, jpeg会比gif大。
  2. Opimazation(优化): JPEG是有损压缩, 所以如果图片变下 相应的图片的质量也会降低。
  • Portable Network Graphics, or PNG, is a file forma developed in response to the Unisys GIF patent battle.
  1. Feature: png的诞生就是为了取代gif (gif的版权问题), png 跟jpeg一样是 24bits的, 但是他支持transparency 透明and interlacing 隔行扫描。 无损压缩。png没有直接的支持动画, 但是有一些扩展的格式是可以做到的。 fireworks的默认格式就是png
  2. Browser support(浏览器支持): IE 到了 version3才支持 png, 一直到ie7才支持 transparency。。 (真是不解啊, 为什么浏览器没有一个行业规定呢, 浏览器兼容对于我这样的菜鸟真太痛苦了)

学习结束

n373

小单的青春异次元

恩 正式对外开放。。。

之前的blog都不会更新了。。全部搬家到这里来了

wordpress 很好很强大

----庆生的分割线----------------

正月十五 元宵节 奶奶生日 生日快乐 寿比南山 福如东海

又没能回家的一个春节 年算过完了 希望家人都健健康康 平平安安
从new year一直想要写点什么  春节都快过完 还没写出来

又漂泊一年 感触很多 新年很多寄望
慢慢写 慢慢实现

水完睡觉

小单

n375
Return top