建材秒知道
登录
建材号 > 设计 > 正文

css禅意花园过时了吗

贤惠的斑马
儒雅的小熊猫
2022-12-29 22:03:22

css禅意花园过时了吗

最佳答案
震动的蜜粉
炙热的音响
2026-04-20 18:50:42

css禅意花园没过时。作者是世界著名的网站设计师,书中的范例来自网站设计领域最著名的网站——CSSZenGarden(CSS禅意花园)。CSS禅意花园现在已发展到包含将近150件设计作品的规模,这些作品来自世界各地,树立了使用CSS设计高质量网站的标准。本书将引领读者探索CSS禅意花园中最激动人心的36件设计作品。

最新回答
帅气的花卷
可爱的大门
2026-04-20 18:50:42

第1章结构

 1、 带有语义的标记 ,选择何种HTML标签取决于标签本身的语义,而不是其默认显示出的样式。使用CSS进行设计时的主要任务之一就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。

2、 创建良好的标记   选择DOCTYPE,指定语言和字符集,指定标题,选择恰当的元素,避免过度使用div和span,尽可能少用标签,适当使用class和id(class 和id可以选用字母或数字,下划线命名,但是必须以字母开头)

UTF-8是一种Unicode,Unicode是一种流行的国际性编码方案,使用UTF-8好处是,不同的字符集的多种语言,例如法语、日语、阿拉伯语和希腊语等,将能够共存于同一张页面中。

第2章  设计

在css中使用的颜色,css支持17种颜色分别为black(黑色)、sliver(银色)、gray(灰色)、white(白色)、maroon(栗色)、red(红色)、purple(紫色)、fuchsia(紫红色)、green(绿色)、lime(鲜绿色)、olive(橄榄色)、yellow(黄色)、navy(藏青色)、blue(蓝色)、teal(蓝绿色)、aqua(浅蓝绿色)、orange(橙色)。

RGB(绝对值表示) 红(Red ,R)R,绿(Green,G),蓝(Blue,B)三种颜色的绝对值来描述某种颜色。RGB值(百分比表示)如:color:rgb(93%,51%,93%)表示紫色 (十六进制值)如color:#0000FF;(十六进制简写值)#ff6699 ->#f69

使用CSS的关键之处是将页面的表现形式从页面结构中分离出来

将HTML结尾部分的照片图像定位到页首。 绝对定位在处理居中时并不那么方便。shea使用了一种非常有用的技巧来处理这个问题:首先将父元素绝对定位于页面的最左边,并将其宽指定100%,在水平方向占满整个浏览器窗口。然后将其子元素,设置居中。

例如:#eDiv1{

position:absolute

top:41px

left:0

text-align:center

width:100%

}

#eDiv1 span{

background:transparent url(aa.jpg) top left no-repeat

display:block

margin-left:auto

margin-right:auto

height:123px

width:770px

}

如果不想绝对居中,为元素加上一定的内边距(padding)能够增加元素的总宽度,但是这个偏移量的值在指定到内边距时要加倍计算——因为在给元素添加内边距的同时也增加了元素的总宽度。还有内边距要添加在与期望偏移方向相反的一侧,例如若要让在正中央图像像左移动,那么应该为图像添加右侧的内边距值(padding-right)。反之亦然。

自觉的饼干
结实的导师
2026-04-20 18:50:42
通过结合使用少量的标记,级联样式表(CSS)可提供引人注目的视觉设计,与HTML驱动的老式布局相比,使用的代码更少,而效率和灵活性却高得多。受这种Web设计方法的创意启发,Dave Shea创建了“CSS禅意花园”。其理念简单而独特:召集设计师在设计良好的HTML的基础上,通过应用CSS技巧创建极富想象力的设计,然后将底层的CSS代码粘贴在网站上,供他人研究和使用。在2003年创建之初,“CSS禅意花园”还默默无闻,而现在已扩大到包含将近150件设计作品,这些作品来自世界各地,树立了使用CSS设计高质量网站的标准。

秀丽的芹菜
含糊的星星
2026-04-20 18:50:42
禅意花园是2003年5月8日创办的。创始人是Dave Shea,创立的初衷是想改变人们对WEB设计的看法,向人们展示CSS设计可实现的视觉效果,但最终却出乎意料的改变了全球技术发展的趋势。

你说的更新时间是指的什么意思?指网站改版还是网站出现新内容。说改版的话,那就要问管理者了,出现新内容,我想每天都会出现新内容,因为网站是面向全球的,只要你愿意,你就可以上传你的作品。

网站以样式表和图像的方式征集作品,但每个作品都必须使用相同的HTML代码(代码是由禅意花园提供的)

稳重的香水
心灵美的歌曲
2026-04-20 18:50:42
极力推荐《CSS设计彻底研究》

第1章 (X)HTML与CSS核心基础

1.1 HTML与XHTML

1.1.1 追根溯源

1.1.2 DOCTYPE(文档类型)的含义与选择

1.1.3 XHTML与HTML的重要区别

1.2 (X)HTML与CSS

1.2.1 CSS标准简介

1.2.2 在HTML中引入CSS的方法

1.3 基本CSS选择器

1.3.1 标记选择器

1.3.2 类别选择器

1.3.3 ID选择器

1.4 复合选择器

1.4.1 “交集”选择器

1.4.2 “并集”选择器

1.4.3 后代选择器

1.5 CSS的继承特性

1.5.1 继承关系

1.5.2 CSS继承的运用

1.6 CSS的层叠特性

1.7 本章小结

第2章 “CSS禅意花园”作品鉴赏

2.1 “CSS禅意花园”简介

2.2 郊野——两列布局

2.3 像素画——三列布局

2.4 百合池塘——三列布局变体

2.5 郁金香——多列布局

2.6 日与夜——包含圆角的设计

2.7 Si6—— 包含倾斜的设计

2.8 清茶时光——装饰性设计

2.9 爱之空气——流体布局

2.10 谷香——食品主题设计

2.11 城市——建筑主题设计

2.12 “卡通版”禅意花园——特色效果

2.13 收音机——特色效果

2.14 杀手风格——特色效果

2.15 海底世界——特色效果

2.16 博物馆——特色设计

2.17 剧院效果——特色效果

2.18 本章小结

第3章 深入理解盒子模型

3.1 盒子的内部结构

3.2 边框(border)

3.2.1 实验1——border-style

3.2.2 属性值的简写形式

3.2.3 实验2——属性的缩写形式

3.2.4 实验3——边框与背景

3.3 内边距(padding)

3.4 外边距(margin)

3.5 盒子之间的关系

3.5.1 HTML与DOM

3.5.2 标准文档流

3.5.3 div 标记与 span 标记

3.6 盒子在标准流中的定位原则

3.6.1 实验1——行内元素之间的水平margin

3.6.2 实验 2——块级元素之间的竖直margin

3.6.3 实验3——嵌套盒子之间的margin

3.6.4 实验4——将 margin设置为负值

3.7 CSS中的几何题

3.8 本章小结

第4章 盒子的浮动与定位

4.1 盒子的浮动

4.1.1 准备代码

4.1.2 实验1——设置第1个浮动的div

4.1.3 实验2——设置第2个浮动的div

4.1.4 实验3——设置第3个浮动的div

4.1.5 实验4——改变浮动的方向

4.1.6 实验5——再次改变浮动的方向

4.1.7 实验6——全部向左浮动

4.1.8 实验7——使用clear属性清除浮动的影响

4.1.9 实验8——扩展盒子的高度

4.2 盒子的定位

4.2.1 static(静态定位)

4.2.2 relative(相对定位)

4.2.3 absolute(绝对定位)

4.2.4 fixed(固定定位)

4.3 z-index空间位置

4.4 盒子的display属性

4.5 本章小结

第5章 文字与图像

……

第 6章 链接与导航

第7章 竖直排列的导航菜单

第8章 水平导航菜单

第9章 下拉菜单

第10章 表格也精彩

第 11章 圆角设计

第12章 应用Spry制作高级网页组件

第13章 固定宽度布局剖析与制作

第14章 变宽度网页布局剖析与制作

第15章 “CSS禅意花园”作品研究

第16章 综合案例研究

第17章 从学习到创作

附录 CSS英文小字典

强健的金鱼
背后的小甜瓜
2026-04-20 18:50:42
CSS ZEN GARDEN (CSS禅意花园) 这个是我重点推荐的一本,很优美的CSS设计书,不但适合初级读者,也适合有一定基础的读者。

剩下的比较不错的还有:

CSS权威指南(第3版)

精通CSS:高级Web标准解决方案(第2版)

精彩绝伦的CSS

CSS设计彻底研究

优秀的石头
健壮的鼠标
2026-04-20 18:50:42

学习前端模块化知识主要集中精力学好以下知识点:

1、学好三驾马车:HTML5 + CSS3 + JavaScrip

2、推荐学习过程:

1)CSS

(1)入门:

Codeademy上的html&css课程——在线交互式编程平台,弄清楚基本概念和基本语法

w3school上的HTML/CSS教程——技术手册式的教程,比较全面,照着实例敲一遍

(2)进阶:

《精通CSS·高级Web标准解决方案》——对CSS有一个比较深入的学习,对核心技术了解。

《HTML5权威指南》——非常全面的书,内容也很新,包含了HTML5+CSS3+JS DOM

(3)实战:

bootstrap框架: bootstrap中文网/《bootstrap实战》——流行的前端框架,注重实用即可                                    

Codeademy上的Web Developer Skills+Projects——通过自己做小页面/小网站来运用所学  

(4)提高:

《CSS禅意花园》——提高自己的艺术设计能力,通过实例来学习如何用CSS设计出漂亮的页面

2).Javascript:

(1)入门:

Codeademy上的javascript教程——实例比较多,比较浅,算是基本了解JS                      

w3school上的JS教程——比较详细的了解下JS的特性                      

《JavaScript DOM编程艺术》——讲js和DOM的基本知识和运用,了解JS和DOM可以做什么

(2)进阶:

《JavaScript高级程序设计》——JS圣经,比较全面,非常好的一本书,比犀牛书可阅读性强

《JavaScript权威指南》——传说中的犀牛书,好厚好厚的一本书,不适合入门,适合当工具书看

《JavaScript语言精粹》——很薄的一本书,但是可以帮助你快速了解JS的精华部分

(3)实战:

jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery  

《jQuery基础教程》——流行的前端框架,注重实用                    

(4)提高:

《高性能JavaScript》——讲如何提高js性能,以及构建和部署文件到生产环境的最佳实践

《Secrets of the JavaScript Ninja》——jQuery作者写的书,如果你觉得精通JS了再看这本书