2Guy's Blog

left和margin-left的区别

Author:
by： linkto
Date:
30. March 2009 18:02
Tagged in:
Comments:
0
今天在论坛中看到有人询问left和margin-left的区别，好像一直以来都没深究过这两者的区别，多实验下整理出下面内容。 通常情况下我们只能通过margin来控制元素的偏移，只有在某一元素运用了相对、绝对或固定这三种定位的情况下left(right、top、bottom)才会起作用。其实定位方式还有一种：静态定位，这也是各个元素默认的定位方式，所以left(right、top、bottom)并不会产生效果。 对于left和margin-left在定位中的区别我分为下面两种来说明： 1.相对定位position:relative 应用相对定位的元素，仍然占据着文档流的空间，所以其它元素的位...
[More]

一些关于Google产品的想法

Author:
by： linkto
Date:
26. March 2009 11:09
Tagged in:
Comments:
0
某一产品有的多了就会有想法，不是说改产品不好，只是某一面的处理方式对我而言不太好，即使Google的产品也不例外，呵呵 Gmail 1.无法知道我刚看了什么 为了方便我把公司的邮箱整合到Google帐号中，这才发现一个问题，当我阅读一封邮件返回到收件箱界面时就不知道自己刚看的是哪封信了，因为没有任何提示可以告诉我刚才我看的是那封信，我能做的只有凭着记忆一个个的尝试。 Google Document 1.可对当前编辑的行的标识不明显，经常看花眼。 如图中看到的，我现在编辑的是第26行，当前行的高亮处理是改变了行数26的背景色，既然需要高亮突出为什么不显眼点呢？ 2.不同背景色的内容相互复制...
[More]

列表样式

Author:
by： linkto
Date:
25. March 2009 16:30
Tagged in:
Comments:
0
大部分网站都会包含某种形式的列表，如网站导航、新闻列表。下面列表是4种比较常见的列表样式 1.垂直列表 创建列表，首先需要一个结构良好的HTML代码：<ul id="nav">      <li id="nav_hom"><a href="/>">Home</a></li>      <li id="nav_map"><a href="/maps/">Maps</a></li>&nb...
[More]

用好你的背景图片

Author:
by： linkto
Date:
21. March 2009 13:39
Tagged in:
Comments:
1
为了减少页面的http请求数，很多设计师会把许多的小背景图片整合起来变成一张大的图片，而如何整合这些图片、页面上又该如何使用，这些在开始写代码前就需要规划好。 1.取自淘宝 下图是淘宝首页的一个列表：   淘宝在大背景图片中是水平排列这些icon的，所以我们就不能直接对li或a应用这个背景。淘宝的做法是在每个li中添加一个span，通过这个span获得背景图片。 <ul class="icon">        <li class="">&...
[More]

选择性调用样式表

Author:
by： linkto
Date:
19. March 2009 18:04
Tagged in:
Comments:
0
从《精通CSS》开始，我就知道良好的页面是结构、样式和行为分离的，只有这样我们才能最自由的管理页面，所以最佳的方式就是把样式写在专门的CSS文件中，再用链接方式应用到相应的页面中。但是为什么还是有很多大型网站，如淘宝、yahoo 会把部分样式直接写在页面上，难道他们会不知道分离的好处？今天看了Best Practices for Speeding Up Your Web Site 似乎有一点明白了。 1.外部链接样式<link href="base.css" rel="stylesheet" type="text/css" /> 调用外部样式表和加载图片一样增加http请求数，对...
[More]

YUI中的3列布局

Author:
by： linkto
Date:
15. March 2009 21:04
Tagged in:
Comments:
0
html代码： <div id="main">      <div id="col1">        <div id="col1_content">          <h2>#col1</h2>          <p>Fi...
[More]

YUI框架的等高技巧

Author:
by： linkto
Date:
15. March 2009 21:03
Tagged in:
Comments:
0
实际项目中，为了在视觉上实现等高效果，有时会使用垂直平铺背景图片来制造虚假的等高效果。今天再一次拿起YUI的CSS框架，不管多么痛苦还是要好好研究下。其中运用的3列等高技巧确实不错。 <div id="bd">            <div id="main">          <div id="col1">     ...
[More]

lang属性

Author:
by： linkto
Date:
12. March 2009 12:30
Tagged in:
Comments:
0
lang属性用来表明网页中内容的语言类型，可以用在html,span,a或其他任何元素上，表明某一元素的语言类型不同于页面中的其他内容。 从图中可以看出各浏览器并不能完全的支持lang属性，但是这个属性体现的好处是超越浏览器本身的： 使用辅助设备的用户，如屏幕阅读器可以根据语言的类型调整朗读的音调。"penchant"是法语，当用户表明语种的这类代码是：<span lang="fr">penchant</span>，屏幕阅读器就会自动调整发音为法语的"pon-shont"，而不是"pen-chunt"; lang帮助搜索引擎提供恰当的内容给部分限定语种进行搜索的...
[More]

跨浏览器实现inline-block布局

Author:
by： linkto
Date:
11. March 2009 19:33
Tagged in:
Comments:
0
Cross-Browser Inline-Block中介绍了用display:inline-block实现下图所示的效果，译文：跨浏览器的inline-block 。 碰到这样的布局，如果是固高固宽很好办，使用左浮动就完成了。不过这种设计中的文本一般是多变的，也就是说高度是没法估计的，最多是是限定下min-height。如果有某一个内容太长，布局就崩溃了。 这里我仅记录核心代码： HTML <ul> <li> <div> <!--"-moz-inline-stack" has some bug on firefo...
[More]

Powered by BlogEngine.NET 1.4.5.0
Theme by Linkto