[ 一线风 | 2009-11-11 17:31:24 | 阅读: 847 | 分类: 工作相关 | Tag: Xhtml CSS DIV | 永久链接 | 评论: 0 ]

今天对简历进行了更新,因为女朋友最近在学习DIV+CSS,我也跟着一块学了学,刚好,把学到的差不多都用上了。修正了一些原先的错误观念,修改过后还是有点心得的,呵!

总结:
-------------------------
1. CSS应用了float属性后要同时申请宽度定义,widht:auto,这个是标准问题
2. CSS应用了float后在下面要应用clear:both;清除,否则float元素会脱离上一级元素
3. W3C很变态,target="_blank" 不符合规范了
4. 想让固定尺寸的DIV居中于屏幕的话,除了最上层的DIV的texta-align:center;外还要在其下层的DIV里写上margin-Right: auto; margin-Left: auto;才行

 阅读全文及评论...

[ 一线风 | 2009-8-26 14:44:31 | 阅读: 3135 | 分类: 学习参考 | Tag: jquery css3 圆角 样式 | 永久链接 | 评论: 0 ]

  css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。

   在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。

1.多重背景

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}

2.文字阴影

b { text-shadow:  5px 5px 5px #666666; }

 阅读全文及评论...

[ 一线风 | 2009-8-25 14:55:40 | 阅读: 2962 | 分类: 学习参考 | Tag: div css position 定位 | 永久链接 | 评论: 0 ]

原文:http://www.cnblogs.com/iamv/archive/2008/01/03/1024371.html

1. position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位
example:
以下是引用片段:
#div-1 {
 position:static;
}

----------------------------------------------------------
2. position:relative|相对定位
使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
example:
以下是引用片段:
www.bitsCN.net网管博客等你来搏


#div-1 {
 position:relative;
 top:20px;
 left:40px;
}

如果用到相对定位,紧随他的层divafter是不会出现在div-1的下方,而是和div-1在同一个高度出现。

可见, position:relative;并不是很好用。

 阅读全文及评论...

[ 一线风 | 2009-6-22 14:08:15 | 阅读: 2780 | 分类: 学习参考 | Tag: PSD Xhtml CSS 转换 教程 | 永久链接 | 评论: 0 ]

我没有看到过关于这种清单的文章,于是,我就自己创建了一篇。作为一名设计师, web程序部分的编写一直是我最困难的部分。但现在有很多非常棒的辅导教程来指导我们怎么使用一些简单的XHTML + CSS去创建惊人的布局效果,他们会解释真正发生在事件背后的的每一个步骤。学习怎么正确地使用CSS,创建布局,忘掉表格布局,享受真正的CSS布局的 强大,然后, 良好地使用《43个PSD转XHTML, CSS辅导教程》!
1.
PSD 转 XHTML 教程
在这第一个视频博客网站中,我开始转变为使用Adobe Photoshop模式来创建真正的基于CSS的网站。这里聚集很多不同类型的人,我相信,随着时间的转移将会有更多的侧重点。

 阅读全文及评论...

[ 一线风 | 2009-4-15 9:48:02 | 阅读: 2931 | 分类: 学习参考 | Tag: xhtml css div Web 设计 转换 | 永久链接 | 评论: 0 ]

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。彬Go也希望通过博客让所有读者正视代码语义化的重要性,请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CSS”替代吧!

今天将向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程,在国外也可以叫做PSD2XHTML。如果你是以为网页设计师,可能会对将自己的效果图实现成语义化的xHTML页面感到头痛,还有一些CSS初学者对于xHTML+CSS处于懵懂状态,希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓,即使你已经成为高手,我也相信其中有你值得学习的地方。

 阅读全文及评论...

[ 一线风 | 2009-4-9 14:32:33 | 阅读: 413 | 分类: 学习参考 | Tag: css hack 兼容 | 永久链接 | 评论: 0 ]

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.

我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11).

在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.

 阅读全文及评论...

[ 一线风 | 2008-12-11 9:25:20 | 阅读: 2862 | 分类: 学习参考 | Tag: CSS 设计 参考 学习 | 永久链接 | 评论: 0 ]

转自:http://blog.ixpub.net/html/28/15748528-282194.html

原文出自Jacob Gube之手。

 

1.A List Apart CSS Topics


A List Apart是一个CSS优秀文章的收集网站,从1999年开始收集文章,关注最佳网页设计。

 阅读全文及评论...

[ 一线风 | 2008-12-8 13:42:23 | 阅读: 875 | 分类: 学习参考 | Tag: CSS 设计 | 永久链接 | 评论: 0 ]

这是 webdesignerwall.com 2008年精选的50个最佳 CSS 设计,素材来源是 Best Web Gallery。从今年的设计趋势来看,越来越多的人使用大背景,以及 JavaScript 框架( jQuery 与 MooTools)来增强用户界面。也有个别设计,将 Flash 与 CSS 结合起来使用,这也许是2009年的趋势。

Let It Bleed
夺目的视觉效果


Vermont Coffee Works
Flash 结合 CSS

 阅读全文及评论...

[ 一线风 | 2008-11-14 21:45:41 | 阅读: 564 | 分类: 学习参考 | Tag: css | 永久链接 | 评论: 0 ]

转自:http://www.cnblogs.com/rene1018/archive/2008/11/14/1333826.html

转自:沉寂博客

根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS。

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。

* 不赞成 - color:#f3a;

* 建议用 - color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。

* 不赞成 - visibility:hidden;

* 建议用 - display:none;

 阅读全文及评论...

[ 一线风 | 2008-8-6 10:56:10 | 阅读: 924 | 分类: 学习参考 | Tag: css 先后顺序 | 永久链接 | 评论: 1 ]

昨天调试一个页面的样式时,明明改了就没有反映,后来用FireFox的调试插件才发现,原来是样式的先后顺序不是我原来想的那样,因此再次找了一下参考来看看!

 

 阅读全文及评论...