最简单的divcss网页设计报告及其代码

最简单的divcss网页设计报告及其代码

实验六CSS布局

【实验目的】

掌握用CSS的布局。

【实验内容】

1、熟悉Dreamweaver软件的环境；

2、会使用CSS进行布局。

【实验步骤】

1. 打开Dreamweaver，新建HTML文件。在代码中body中插入一个DIV标签。然后选择标签，新建CSS规则，在新建的CSS规则中，对新建的规则进行设置。

2. 对背景项设置，可以设置背景色；对方框项设置，可以设置标签的宽，高，和浮动（左对齐，右对齐，居中，无），以及方框位置

的Padding和Margin进行设置；对边框设置，设置它的类型、宽度和颜色。这是一栏布局。

3. 二栏布局是在一栏布局的基础上再新建一个DIV标签。对新建的标签进行同样的设置，在设置方框的浮动时，选择不同的浮动，会出现不同的效果，如一个DIV标签设置为左对齐，另一个设为右对齐。这种效果还可以通过所建规则中的定位进行设置。

4. 嵌套布局。将第三个div嵌套在另一个div中。

【实验结果】

【实验心得和体会】

通过本次的实验，我熟练掌握了div布局技巧。能够完成简单的css+div布局。如上图。现在网页设计过程中基本都是使用css+div的格式进行布局。学会css+div对于网页设计来说有很重要的意义。

DIV+CSS网页设计实例教程 目录：

第一步：规划网站，本教程将以图示为例构建网站；

第二步：创建html模板及文件目录等；

第三步：将网站分为五个div，网页基本布局的基础；

第四步：网页布局与

第五步：网页主要框架之外的附加结构的布局与表现；

第六步：页面内的基本文本的样式

第七步：网站头部图标与

第八步：页脚信息

第九步：导航条的制作

第十步：解决

第一步：规划网站，本教程将以图示为例构建网站

div浮动等； (css)设置； logo部分的设计； (版权等)的表现设置； (较难)； IE浏览器的显示BUG； 1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图：

主要由五个部分构成：

1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px

2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px

3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content

4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on

5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px