当前位置:Gxlcms > html代码 > CSS布局:40个教程、技巧、例子和最佳实践_html/css_WEB-ITnose

CSS布局:40个教程、技巧、例子和最佳实践_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:25人阅读

CSS 布局:40个教程、技巧、例子和最佳实践


前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在hl。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到,据我所知,第二版在中国没有翻译出版。你可以从这里下载英文版(不过需要注册个用户名)


正文


基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ――找到那些完美的布局,完全灵活的,等高栏和工作完美的布局。


因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧,教程和最佳实践的列表。


当然你也可能对下面这些和CSS相关的主题有兴趣:


The 7 CSS Hacks that we should use


Using CSS to Do Anything: 50+ Creative Examples and Tutorials


Using CSS to Fix Anything: 20+ Common Bugs and Fixes


CSS 布局教程


1-使用CSS完成三栏固定布局结构- 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素(顶部的logo条,导航条,文本区,定义分类的中部栏,右边侧栏插入google的120X600的广告区)的固定三栏页面布局。


2-使用CSS设计页面布局- 如何使用CSS文件来为你的站点设计页面布局。


3-如何创建一个水平布局的站点- 创建不同于常规的水平布局的站点技术(译者注:水平布局,客户体验也就仁者见仁了)


例子查看这里 |下载


4-超级简单的两栏布局- 创建不同于常规的水平布局的站点技术(译者注:这里是原作者笔误吧和上面的内容一样).


例子查看这里 下载


5-简单两栏CSS布局- 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区,一个水平导航条,主内容区,边侧栏,和页脚区。并且这个布局是水平居中的。


例子查看这里


6-圣杯布局(The holy grail layout) � 3栏布局会有一些问题 ,这篇文章讨论了一种三栏布局――两栏固定宽度边侧栏加上一栏变宽中栏布局,保证了页面的良好结构和清晰。


例子查看这里


7-CSS居中101- 如何使用CSS完成居中一个固定宽度的布局


使用CSS,通过下面两条规则完成对id为container的DIV所包含的内容居中


8-从头创建CSS布局- 这个指南通过创建一个全功能的 CSS布局来一步步教你入门CSS布局。


9-非主流!多栏布局- 多栏布局,等高栏(每一列的高度都相等),固定或变宽中央区,简洁标记,CSS 。(译者注:原文作者的图配的和上图一样)


例子查看这里


10- 创建天下无双的CSS布局- 高灵活性布局,等高栏,跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标,并使用它们创建天下无双的CSS布局(译者注:原文是One True Layout ,不知道怎么翻译,就天下无双吧。)


查看这里


11-从PSD到HTML,手把手完成WEB设计-从Photoshop到完整HTML,全过程手把手教会你。

人气教程排行