收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > CSS/HTML > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

非常好的CSS基本布局16例

单行单列 查看图片

单行单列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:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。 查看图片

单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。 单行两列 查看图片

单行两列1:两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。

查看图片

单行两列2:两列都百分比宽度,但不满屏。第一列固定在左上角,第二列浮在第一列右边。

查看图片

单行两列3:两列都百分比宽度,满屏。两列都采用绝对定位。 查看图片

单行两列4:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。

查看图片

单行两列5:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。 单行三列 查看图片

单行三列1:左右列都绝对定位(右列定位在右上)。左列和右列固定宽度,中间列自适应页面。

查看图片

单行三列2:左列定位在左上,右列定位在右上,中间列浮在左列右面。左列和右列固定宽度,中间列自适应页面。 查看图片

单行三列3:三列都绝对定位。左列和右列固定宽度,中间列根据内容自适应。 查看图片

单行三列4(推荐):类似样式2,只是将margin: 20px属性增加在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标记,可

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号