当前位置：首页 -> 网页设计 -> HTML/CSS -> Xhtml第9天:第一个css布局实例

Xhtml第9天:第一个css布局实例

时间： 2021-07-31 作者：daque

接下来发端要真实安排构造了。和保守的本领一律，你开始要在脑际里有大概的表面设想，而后用photoshop把它画出来。你大概看到相关web规范的站点多数很俭朴，由于web规范更关心构造和实质，本质上它与网页的场面没有基础辩论，你想如何安排就如何安排，用保守表格本领实行的构造，用div也不妨实行。本领有一个老练的进程，把div看成和table一律的东西，怎样应用就看你的设想力了。

xhtml第9天:第一个css布局实例图1

注：在本质运用进程中，div在有些场合简直不如表格简单，比方背局面的设置。但任何工作都有得有失，选择在乎你的价格确定。好，不罗嗦了，咱们发端：

1.决定构造

xhtml第9天:第一个css布局实例图2

w3cn的首先安排草图如次：

用表格的安排本领的话，普遍都是上中下三行构造。用div的话，我商量运用三列来构造,变成如许。

2.设置body款式

先设置所有页面包车型的士body的款式,代码如次：

body { margin: 0px;padding: 0px; background: url(../images/bg_logo.gif) #fefefe no-repeat right bottom;font-family: 'lucida grande','lucida sans unicode','宋体','新宋体',arial,verdana,sans-serif;color: #666;font-size:12px;line-height:150%; } 之上代码的效率在上一天的教程有精细证明，大师该当一看就领会。设置了边框边距为0；后台脸色为#fefefe，后台图片为bg_logo.gif，图片坐落页面右下角，不反复；设置了字体尺寸为12px；字体脸色为#666;行高150%。

3.设置重要的div

首次运用css构造，我确定沿用恒定宽窄的三列构造(比自符合辨别率的安排大略,hoho，别说我躲懒，先实行大略的，减少点决心嘛！)。辨别设置左中右的宽窄为200:300:280，在css中如次设置:

/*设置页面左列款式*/#left{ width:200px;margin: 0px;padding: 0px;background: #cdcdcd;}/*设置页面中列款式*/#middle{ position: absolute;left:200px;top:0px;width:300px;margin: 0px;padding: 0px;background: #dadada;}/*设置页面右列款式*/#right{ position: absolute;left:500px;top:0px;width:280px;margin: 0px;padding: 0px;background: #fff; } 提防：设置中列和右列div我都沿用了position: absolute;，而后辨别设置了left:200px;top:0px;和left:500px;top:0px;这是这个构造的要害，我沿用了层的一致定位。设置中央列隔绝页面左边框200px，隔绝顶部0px；设置右列隔绝页面左边框500px，隔绝顶部0px；。

这功夫所有页面包车型的士代码是：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><head><title>欢送加入新《网页安排师》:web规范教程及实行</title><meta http-equiv="content-type" content="text/html; charset=utf8" /><meta http-equiv="content-language" content="gb2312" /><meta content="all" name="robots" /><meta name="author" content="ajie(at)netease.com,阿捷" /><meta name="copyright" content="www.w3cn.org,自在版权,大肆连载" /><meta name="description" content="新网页安排师,web规范的教程站点,激动web规范在华夏的运用." /><meta content="web规范,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" /><link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" /><link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" /></head><body><div id="left">页面左列</div><div id="middle">页面中列</div><div id="right">页面右列</div></body></html> 这功夫页面包车型的士功效只是不妨看到三个并列的灰色矩形，和一个后台图。然而我蓄意莫大是满屏的，如何办呢？

xhtml第9天:第一个css布局实例图3

4.100%自符合莫大?

为了维持三列有同样的莫大，我试验在#left、#middle和#right中树立"height:100%;"，但创造实足没有预见的自符合莫大功效。过程一番试验后，我只好给每个div一个一致莫大:"height:1000px;"，而且跟着实质的减少，须要连接矫正这个值。莫非没有方法自符合莫大了吗？跟着阿捷本人进修的深刻，创造一个灵活的处置方法，本质上基础不须要树立100%，咱们仍旧被table思想束缚太深了，这个方法鄙人一节的进修中精细引见。

Xhtml第9天:第一个css布局实例

相关推荐

推荐下载

热门阅览

最新排行