第9天:第一个CSS布局实例

接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。

注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：

1.确定布局

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=gb2312" />
<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>

这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？

4.100%自适应高度?

为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。

赞 (0)

相关推荐

  • 第9天:第一个CSS布局实例

    第9天:第一个CSS布局实例

    接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • CSS 布局一个漂亮的滑块

    CSS 布局一个漂亮的滑块

    好好看看代码,相信会对你帮助不少. CSS布局一个漂亮的滑块 dl { margin: 0; padding: 0; } dt { position: relative; clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } dd { position: r

  • 第8天:CSS布局入门

    第8天:CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid;BORDER-R

  • Bootstrap CSS布局之列表

    Bootstrap CSS布局之列表

    本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下 列表 普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontal ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 普通列表ul li 有序列表ol

  • android LinearLayout 布局实例代码

    复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <!--      <LinearLayout>         线性版面配置,在这个标签中,所有元件都是按由上到下的排队排成的   --> <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"    

  • CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px; PADDING-LEFT: 20px;  PADDING-TOP: 20px; PADDING-RIGHT: 10px;  P

  • div＋css布局入门

    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at

随机推荐