CSS+DIV页面布局实验

第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}

#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}

#header { height:100px; background:#6cf; margin-bottom:5px;}

#mainContent { height:300px; background:#cff;}

页面代码如下：

这是身体

效果下图显示：点击看大图

其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

第二个例子是告诉大家如何让页面居中，如何加上头部。这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright等内容。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}

#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}

#header { height:100px; background:#6cf; margin-bottom:5px;} #mainContent { height:300px; background:#cff; margin-bottom:5px;}

第２３卷第３期　电脑开发与应用　

巧用ＤＩＶ韧ＣＳＳ进行网页布局　山东工业职业学院建筑工程与信息系　巩建学　【摘　要１一般常用表格来进行网页的布局，这种布局模式可以不随显示器分辨率的调整而发生像层一样的漂移。还有一种非常好　用的网页布局的方法，用ＤＩＶ和ＣＳＳ样式来进行网页的排版　如果想学习网页标准设计那么一定要接触的一个知识点就是ＣＳＳ盒　子模式，这是ＤＩＶ排版的该心所在。　【关键词】ＤＩＶ，ＣＳＳ样式，盒子，网页布局，层，排版　传统的表格排版是通过大小不一的　表格以及表格嵌套来定位排版网页内容，　改用ＣＳＳ排版后，就是通过由ＣＳＳ定义　的大小不一的盒子和盒子的嵌套来编排　网页内容。用这种方式排版的网页代码简　洁，更新方便，而且能兼容更多的浏览器，　所以抛弃以前自己钟爱的表格排版也是　值得的，另外更重要的一点是ＣＳＳ排版网　页的优势远远不只这些。下面一起来感受　一下用ＣＳＳ盒子模式排版的优势。　ｌ关于ＣＳＳ盒子模式　首先来想一个问题：什么是ＣＳＳ的盒　子模式？为什么把ＣＳＳ叫做盒子？在网页　设计中常听到一些属性名如：内容　（ｃｏｎｔｅｎｔ）、填充（ｐａｄｄｉｎｇ）、边框　（ｂｏｒｄｅｒ）、边界（ｍａｒｇｉｎ），而ＣＳＳ盒子模　式都具备这些属性。　■＾ＲＯＩＮ进葬　置子之冀曲难膏　ＢＯＲＤＥＲ　Ａ　‘　ＰＡ。　Ｂ蕈竞谊予且妇簟吏尊　。　－Ｉ　’　、　＝。　ｆ　ｃＯ　ＴＥＨＴ内軎壤竟　盘子§曲抽晶　ｊ　ｒ　１　薹　－　薯　ｌ＿≮　０　

图１　ＣＳＳ盒子模式　ＣＳＳ盒子这些属性我们可以把它转　移到日常生活中的盒子上来理解。内容就　是盒子里装的东西；而填充就是怕盒子里　装的东西（贵重的）损坏而添加的泡沫或　者其他抗震的材料；边框就是盒子本身　了；至于边界则说明盒子摆放的时候不能　全部堆在一起，要留一定空隙保持通风，　同时也为了方便取出。在网页设计上，内　容常指文字、图片等元素，但是也可以是　小盒子（ＤＩＶ嵌套），与现实生活中盒子不　同的是，现实生活中的东西一般不能大于　盒子，否则盒子会被撑坏的，而ＣＳＳ盒子　具有弹性，里面的东西大过盒子本身最多　把它撑大，但它不会损坏。填充只有宽度　属性，可以理解为生活中盒子里的抗震辅　料厚度，而边框有大小和颜色之分，我们　又可以理解为生活中所见盒子的厚度以　及这个盒子是用什么颜色材料做成的，边　界就是该盒子与其他东西要保留多大距　离　用ＣＳＳ排版，应该先考虑的是页面内　容的语义和结构，因为一个强ＣＳＳ控制的　网页，等做好网页后，你还可以轻松地调　你想要的网页风格，况且ＣＳＳ排版的另外　一个目的是让代码易读，区块分明，强化　代码重用，所以结构很重要。如果用ＣＳＳ　实现不了的效果，一般用表格也是很难实　现的，因为ＣＳＳ的控制能力太强大，另外　值得说明的一点是用ＣＳＳ排版有一个很　实用的好处，如果是接单做网站的，如果　用了ＣＳＳ排版网页，做到后来客户有什么　不满意，特别是色调的话，那么改起来就　相当容易，甚至还可以定制几种风格的　ＣＳＳ文件供客户选择，又或者写一个程序　实现动态调用，让网站具有动态改变风格　的功能　２熟悉工作流程　ＤＩＶ＋ＣＳＳ设计思路是这样的：①用　ｄｉｖ来定义语义结构；②用ＣＳＳ来美化网　页，如加入背景、线条边框、对齐属性等；　③在这个ＣＳＳ定义的盒子内加上内容，　如文字、图片等（没有表现属性的标签），　下面一起来做一个实例加深对这个步骤　的理解。先看图２网页结果图。　

实训4 div+css综合运用

一、背景介绍

在Web开发领域，div和css是两个基础、重要的概念。div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。实训4中涉及到了div和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。

二、整体评估

在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。在评估过程中，我发现学习者需要注意以下几点：

1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。

2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。

3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。

4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。

三、文章撰写

在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。在整个过程中，我对div和css的重要性有了更深的理解。

div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。

在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。通过灵活运用不同的选择器、属性和值，我们可以轻松实现各种网页布局和效果的设计。在实践中不断调试和优化，也为我提供了更多的经验和技巧。实训4的综合运用对于我来说是一次很好的实践和学习机会，使我更深刻地认识到了div和css在网页设计中的重要地位和作用。

实训五 Div+CSS布局基础

主要内容：

本周需要完成的任务：

小组网站规划设计

时间：xxxx-xx-xx

一、网站定位

（请准确详细描述网站定位及网站主题）

（请准确详细分析网站的目标用户群，包括分析这些用户的需求、行为习惯、偏好、个性特点等。）

二、网站风格版式设计

（请根据网站定位，查阅几个（不少于3个）参考网站首页风格、版式，并给出参考网站的网站名称、网址、首页截图）

（请根据参考网站风格、版式，给出你们组自己的设计风格描述，包括对风格特点的描述和色调的选择，并画出版式图）

（版式图参考下图：）

三、网站栏目规划

（请根据网站定位、主题，设计导航条栏目，及二级子栏目，并以结构图的形式，清晰且详细地表现设计结果。可参考课本P10图1.7。）

四、文件目录结构

五、网站功能及内容设计

六、实现方式

七、网站的发布及维护

操作部分：Div标签及盒子模型

提示：请务必做好准备工作。

 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。

 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。

 将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。

 将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。

报告人 组长： 学号+姓名

成员： 学号+姓名 学号+姓名 1. 首先看一下HTML代码 标准模版中的代码。

"/TR/html4/loose.dtd">

示例网页

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

第二行，html的xmlns属性，是对命名空间的声明，固定写法，了解即可。