毕业论文使用div+css开发个人网站

式表格式化这个块来进行控制。

各大个人网、企业网、门户网基本上都在推崇DIV+css这一布局方式。比如：腾讯网、IBM官网、等等。其中就以IBM官网来说，顶部是导航，下面为FLASH，底部用UL 列举出公司各项服务的连接。从整体布局来看，采用的是单栏式，是页面看上去简洁大方，现在的网页布局主流也从繁杂华丽转变到简单大方，个人也比较推崇后者。所以对于重庆逸飞咨询有限公司的网站也从DIV+CSS着手，模仿IBM官网div布局。本网站的骨架架构如下图2.1：

图2.1 设计中网站的骨架图

第五节 div+css理论概述

一、理解CSS盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS

9

盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。盒模型3D效果图如下图2.2所示：

图2.2 css2.0盒模型

在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。

二、转变思路

传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。

10

三、实现结构与表现分离

这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。

第六节 div+css的兼容性问题

一、div的垂直居中问题

vertical-align:middle; 将行距增加到和整个

DIV

一样高

line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 。

二、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

三、浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table。

四、IE与宽度和高度的问题

11

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度，比如要设置背景图片，这个宽度是比较重要的。

五、页面的最小宽度

min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个