位置: 编程技术 - 正文
非常好的CSS基本布局16例(css的基础)
编辑：rootadmin推荐整理分享非常好的CSS基本布局16例(css的基础)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css有哪些好处,css基本操作,css的基础,非常好的css基本框架,非常好的css基本框架,css的基本用法,常用的css,非常好的css基本操作,内容如对您有帮助，希望把文章链接给更多的朋友！
单行单列1：采用float浮在左上角，固定宽度。
#content { float: left; padding: px; margin: px; background: #FFF; border: 5px solid #; width: px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: px; }html>body #content { width: px; /* ie5win fudge ends */ }
单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。
#content { position: absolute; top: 0px; left: 0px; padding: px; margin: px; background: #FFF; border: 5px solid #; width: px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: px; }html>body #content { width: px; /* ie5win fudge ends */ }
单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。
单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。 单行两列
单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。
单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。
单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。 单行三列
单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。
单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
单行三列4(推荐)：类似样式2，只是将margin: px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。
单行三列5：左右列绝对定位，中间列自适应。宽度满屏。 顶行三列
顶行三列1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。 顶行三列2：宽度满屏
一个针对IE7的CSS Hack IE7修复了很多bug，也增加了对一些选择符的支持，所以现在诸如*html{}和html＞body{}等针对IE隐藏或显示的hack都会在IE7中失效。虽然CSSHack不推荐使用，条
如何解决下拉菜单被flash覆盖的问题 把swf文件属性设置成透明，在flash参数里面加上，如果你用dreamweaver，选中那个swf文件，属性面板上会有一个参数...按钮（在面板的最下面），点一下，
网页中关闭IE的图像工具栏和XP主题 关闭XP系统主题在IE中的显示如果开发环境是XP系统,IE中的input标签会和XP系统主题相符合,影响了外观的统一,采用下列方法可以关闭.添加下列META标记，可
标签: css的基础
本文链接地址:https://www.jiuchutong.com/biancheng/371880.html 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706497928.jpg)
