在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的 知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：一、margin:auto 0 与 text-aligh:center 在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可...
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。 在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码： /*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited {font-size:12px;text-decoration:none;}a:hover{} /*页面层容器*/#container {width:800px;margin:10p...
10个 CSS简写/优化 技巧 http://www.xinran001.com/bbs/thread-72525-1-1.html 高效整洁CSS 代码原则 (上) http://www.xinran001.com/bbs/thread-71710-1-1.html 高效整洁CSS代码原则 (下) http://www.xinran001.com/bbs/thread-71711-1-1.html 实战中总结出来的CSS常见问题及 解决办法 http://www.xinran001.com/bbs/thread-105-1-31.html 解决IE6、IE7、 Firefox兼容最...
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要?嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-align对它们不起 作用。 相关教程：div水平居中的N种方法 ...
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要?嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-align对它们不起 作用。 相关教程：div水平居中的N种方法 ...
看到、遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。 我们看下面的图片： 这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我们看下面的分析图片： ...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 ...
Div+CSS布局入门教程 (2.写入整体层结构与CSS) 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档
讲师：林玉燕简介：担任多个大型产品项目的需求分析和架构设计，以及应用软件的代码编写、测试、架构设计到项目管理工作，具有高级软件工程师培训经历，历任大学兼职讲师，长期从事企业级开发应用研究和高级软件工程师的培养及管理工作，为了社会提供了更多、更优秀的软件人才。讲师：林玉燕简介：担任多个大型产品项目的需求分析和架构设计，以及应用软件的代码编写、测试、架构设计到项目管理工作，具有高级软件工程师培训经历，...
网站重构&web标准设计视频(60课，DIV+CSS布局技术) 目前雅虎，网易，淘宝等网站都是采用这种符合Web标准的方式对网站进行重构 网站重构能够实现加快网页解析的速度，实现信息跨平台的可用性以及更加良好的用户体验，网站重构以高效开发与简单维护降低服务成本，最重要的是它便于改版，实现与未来兼容。 web标准就是实现网站重构的方法，所谓WEB标准，即网站标准，一般指网站建设采用基于XHTML语言的网站设计语言，WEB标...
在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 一、绝对定位 绝对定位的优势在于，我们可以...
按照CSS规范，浮动元素（float）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签...
- 清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原理是，在「高级」浏览器中使用 :af...
我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写： Example Source Code [www.52css.com] 第一列 第二...
1: 底部对齐的代码(相对于父块)： .box1 {border:1px #cccccc solid; width:500px; height:600px;position:relative;}.box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:0;} 2： .box1 {border:1px #cccccc solid; width:500px; height:600px;}.box2 {border-top:1px #cccccc solid; border-bottom:0; background:#f2f6fb; width:500px; height:22px;}