求Div+Css教程

emoheshang 2009-05-05 11:32:00

给个div+css教程

...全文

372 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

jccook 2010-05-20

打赏
举报

严重推荐你去网页之家 http://www.51css.net 那里的教程很棒，并且还有实例，在学习完教程后，还有DIV+CSS模板，和常用的网页资源，很实用，我刚学CSS就是从那里学的；很不错，www.51css.net

wuyq11 2009-05-05

打赏
举报

参考
参考

gdjlc 2009-05-05

打赏
举报

CSS网站布局实录：基于Web标准的网站设计指南（第二版）
这本书很不错的，讲得很简明透彻，学完之后感觉进步了不少。

WizardWu 2009-05-05

打赏
举报

用 CSS 替代 HTML 的 table tag 设计网页版面

http://www.cnblogs.com/WizardWu/archive/2008/07/26/1252079.html

版工之前就耳闻 CSS 功能强大，可完全取代 HTML 的 table、tr、td 等 tag，做网页「外观 (user interface)」的编排。CSS 除了可避免陷在 HTML 多层的巢状 table 里，亦可明显减少网页档案大小，让页面日后可统一维护，而非逐一修改。日前版工找了一些书上的 CSS 范例，经简单修改并测试后，开放七个 CSS + div tag 网页排版的「样板」让大家下载 (.html 格式，可直接用浏览器开启)，内容如下：

(1) 两栏式版面，画面上的字段宽度可随浏览器自动调整
(2) 两栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(3) 三栏式版面，画面上的字段宽度可随浏览器自动调整
(4) 三栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(5) 多栏式版面，画面上的字段宽度可随浏览器自动调整
(6) 多栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(7) 非对称、字段坐标不固定，画面上的字段位置可随浏览器自动调整

本帖的示例代码下载点：
http://files.cnblogs.com/WizardWu/070915.zip

七个范例中，主要可区分为两大类：
• 页面中的字段，会随使用者的屏幕分辨率、鼠标拖曳浏览器边框，自动延展和调整
• 页面中的字段，宽和高固定，不会随使用者的屏幕分辨率、鼠标拖曳浏览器边框，自动延展和调整

透过 CSS 对整个 div 区块的统一设定，可让页面外观的编辑和维护工作变得轻松许多。不过有少数 CSS 的属性设定，需要额外考虑到浏览器的厂牌和新旧版本问题。此外本帖提供下载的多栏式版面范例中，亦要考虑到，当页面其中一栏的图文内容特别多时，是否会照字段的预设宽度往下延伸，抑或图文内容会围绕别的字段；此种情况可能会发生在「非固定栏宽」的页面中，此时就得再引用其它 CSS 的排版技巧加以调整。

CSS 除了版面设计功能强大外，还有许多其它的优点。像是要让使用者透过浏览器「打印」网页，传统的做法，开发人员可能会特地替需要打印的页面，重新排版、重写一个适合 A4 纸张打印的页面；但透过 CSS，我们可以在使用者要打印时，让其自动套用新的 CSS 样式表，而非 redirect 到另一个专供打印的网页，如此便可省下重新撰写打印页面的时间，及 Web server 的硬件系统资源。