CSS基本布局16例
2005-03-01 12:07
519 查看
CSS基本布局16例
此主题相关图片如下:
单行单列1:采用float浮在左上角,固定宽度。
此主题相关图片如下:
单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。
此主题相关图片如下:
单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
[align=right][/align]
此主题相关图片如下:
单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。
单行单列
此主题相关图片如下:
单行单列1:采用float浮在左上角,固定宽度。
#content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 370px; } html>body #content { width: 370px; /* ie5win fudge ends */ }
此主题相关图片如下:
单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。
#content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 370px; } html>body #content { width: 370px; /* ie5win fudge ends */ }
此主题相关图片如下:
单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
#content { position: absolute; top: 0px; left: 0px; margin: 20px; background: #FFF; border: 5px solid #666; width: 74%; /* ie5win fudge begins */ padding: 10px 10% 10px 15%; voice-family: "\"}\""; voice-family:inherit; width: 55%; padding: 10px 9% 10px 11%; } html>body #content { width: 55%; padding: 10px 9% 10px 11%; } /* ie5win fudge ends */
[align=right][/align]
此主题相关图片如下:
单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。
body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #c060; background-color: #CCC; text-align: center; /* part 1 of 2 centering hack */ } #content { width: 400px; padding: 10px; margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #FFF; border: 5px solid #666; text-align:left; /* part 2 of 2 centering hack */ width: 400px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 370px; } html>body #content { width: 370px; /* ie5win fudge ends */ }