实验报告1-DIV+CSS网页设计

合集下载

css实验报告

西安郵電學院网络技术基础——internet和网页设计课内实验报告书院系名称：继职学院实验题目：css学生姓名：杨晓玉专业名称：计算机网络技术班级：0902学号：3094202025 时间：2011年5月12日指导教师：朱辉网页设计实验报告css一、实验目的熟练掌握css的常用属性，并应用在设计中。

使得网页设计内容更加丰富二、实验内容1)了解CSS的属性2)使用不同的方法（HTML属性，JavaScript，CSS）为页面底版设置颜色3)在不同位置设置CSS（直接写在控件中，另外设置样式表），取得相同的结果4)修改控件中字体的尺寸和颜色5)利用CSS设置菜单（展开和隐藏效果）三、设计与实现过程1.用html设置页面底板颜色：<html><head><title>使用BODY属性设置页面颜色</title></head><body bgcolor="#FF0000"”>页面颜色为红色</body></html>2、用JavaScript设置页面底板颜色：<html><head><title>使用JavaScript设置页面颜色</title></head><body><script language=”javascript”>document.bgColor = “FF0000”;</script>页面颜色为红色</body></html>3、用CSS设置页面底板颜色：<html><head><title>使用CSS设置页面颜色</title></head><body style=”background-color: #ff0000;”>页面颜色为红色</body></html>以上三种设置效果均为如下所示：4、在不同位置设置css；（1）在控件中：<html><head><title>使用CSS设置页面颜色</title></head><body style=”background-color: #ff0000;”>CSS直接写在控件属性中</body></html>（2）另外设置样式表：Style-name{Background-color:#00FF00}5、修改控件中字体的尺寸和颜色：<html><head><title>默认控件中字体的尺寸和颜色</title></head><body><font size=20>姓名：</font><input type=”textfield” value=”杨晓玉”> </body> </html>设置前：<html><head><title>修改控件中字体的尺寸和颜色</title><style>input{font-size: 20;color: #00ff00;font-family: 宋体;font-weight: bold;}</style></head><body><font size=20>姓名：</font><input type="textfield" value="杨晓玉"> </body></html>设置后：6、设置控件属性：设置前：（<font size="+2">姓名;</font>）设置后：（<style type="text/css">.STYLE1 {font-family: "宋体";font-size: 20px;}<style>input{font-size: 20;color: #00ff00;font-family: 宋体;font-weight: bold; }</style></style>）7、隐藏：展开：四、设计技巧及体会利用css来设置使得编辑更加简单，不会有繁琐的代码，使得设置更加方便用div+css也有许多好处使得设计简单方便，节省资源实验设计的效果与每一部分的属性设计关系很大，要熟练掌握设计步骤与过程才能达到所要求的效果。

用DIV+CSS实现网页布局及网站设计

学号：1407010222 姓名：叶亮班级：14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。

3. 掌握用DIV+CSS实现网页布局及网站设计。

二、实验内容1. 插入CSS样式表2. 建立DIV标签3. 构建网站主要内容三、源程序<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>我的推荐</title><style type="text/css">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》    华夏历史上最强大帝国的崛起与没落。

实训4 div+css综合运用

实训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的熟练掌握意味着更自由地实现网页设计的愿景。

CSS实习报告范文

CSS实习报告范文一、实习背景我在家互联网企业进行为期两个月的实习期间主要从事前端开发工作。

在这期间，我主要负责网站页面的样式设计与布局，使用CSS完成网站的整体美化和优化。

二、实习内容1.页面样式设计根据产品需求和UI设计师提供的设计稿，我使用CSS进行页面样式设计。

首先，我使用HTML制作页面的基本结构，然后使用CSS添加样式，包括颜色、字体、边框、背景等。

根据UI设计师提供的设计稿，我将页面的样式与设计稿尽量保持一致，以达到美化页面的效果。

2.页面布局在进行页面布局时，我使用了CSS的盒模型和浮动布局等技术。

通过设置不同元素的宽度、高度、外边距和内边距等属性，我能够灵活地调整页面的布局。

同时，为了适应不同屏幕大小的设备，我还使用了响应式布局，使页面在不同设备上能够呈现出最佳的效果。

3.样式优化在完成页面的样式设计和布局之后，我对页面进行了优化。

首先，我对CSS代码进行了压缩，去除了多余的空格和换行符，减小了文件的大小，提高了页面加载速度。

其次，我使用了CSS Sprites技术，将多个小图标合并成一个大图，并通过CSS的background-position属性来显示不同的图标，减少了请求次数，提高了页面加载速度。

此外，我还使用了CSS3的动画效果，为页面增添了一些交互效果，提升了用户体验。

三、实习总结通过这次实习，我对CSS的应用有了更深入的了解。

我学会了如何使用CSS实现页面的样式设计和布局，以及如何通过优化CSS代码提高页面的加载速度。

在实习期间，我充分发挥了自己的创造力和想象力，将UI设计师的设计稿转化成了实际可见的页面效果。

我还学到了很多与团队合作的技巧，通过与产品经理、UI设计师和后端开发人员的密切合作，我能够更好地理解团队的需求，并与他们紧密配合，共同完成项目。

通过这次实习，我不仅学到了很多关于CSS的知识和技巧，还提升了自己的团队合作能力和问题解决能力。

在未来的工作中，我将继续努力学习，不断提升自己的技术能力和专业水平，为企业的发展做出更大的贡献。

HTML学习--DIV+CSS布局实验

实验DIV+CSS布局
1
1)了解页面常用布局结构；
2)掌握DIV的使用方法；
3)掌握DIV+CSS布局的基本方法；
4)熟练编制符合W3C标准的XHTML文档。
2
1)将实验三中完成的网站页面，修订成为符合W3C标准的XHTML文档；
2)采用DIV+CSS将实验三的页面重新布局；
3)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域即可；
5.3
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。
5.2
自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
<meta content="css练习,西北工业大学,web,软件与微电子学院" name="keywords" />

网页设计实验报告范文

实验名称：网页设计基础实验实验时间：2021年X月X日实验地点：XX大学计算机实验室实验目的：1. 熟悉网页设计的基本工具和软件；2. 掌握HTML、CSS的基本语法和常用标签；3. 学会使用网页设计软件进行页面布局和美化；4. 提高网页设计与制作的能力。

实验内容：1. 网页设计工具及软件的介绍；2. HTML和CSS的基本语法及常用标签；3. 网页布局与美化的实践；4. 网页交互功能的实现。

实验过程：一、网页设计工具及软件的介绍1. Dreamweaver：一款专业的网页设计软件，支持可视化操作，能够方便地进行网页设计和编辑。

2. Sublime Text：一款轻量级的代码编辑器，支持多种编程语言，具有丰富的插件和扩展功能。

3. Notepad++：一款免费的代码编辑器，界面简洁，功能强大，支持多语言编程。

二、HTML和CSS的基本语法及常用标签1. HTML（HyperText Markup Language）：超文本标记语言，是网页内容的主要载体。

2. CSS（Cascading Style Sheets）：层叠样式表，用于控制网页的样式和布局。

（1）HTML基本语法：- 网页结构：由HTML标签组成，标签之间可以嵌套使用。

- 常用标签：- `<html>`：定义整个HTML文档。

- `<head>`：包含文档的元信息，如标题、字符编码等。

- `<title>`：定义网页标题。

- `<body>`：包含网页的主体内容。

- `<h1>`至`<h6>`：定义标题级别，`<h1>`为最高级别。

- `<p>`：定义段落。

- `<a>`：定义超链接。

- `<img>`：定义图片。

（2）CSS基本语法：- 选择器：用于选择HTML元素。

- 属性：用于设置元素的样式。

- 常用属性：- `color`：设置文字颜色。

有关DIV,CSS,Jquery计算机专业毕业实习日记

有关DIV,CSS,Jquery计算机专业毕业实习日记一天即将过去了，你有什么总结呢？不妨坐下来好好写写日记吧。

你所见过的日记应该是什么样的？以下是小编收集整理的有关DIV,CSS,Jquery计算机专业毕业实习日记，仅供参考，大家一起来看看吧。

计算机专业毕业实习日记1在这次的网站建设过程中，我发现自己对于知识不能灵活运用，不能巧妙地结合起来，对代码的不熟悉，这更加是一个大问题。

建站过程中会遇到代码出错，代码位置写错之类的问题，当测试的时候出现了错误但是不能看懂出错原因，只能靠网上搜索。

经常因为一个细小的步骤而出错，做动态网页的时候会遇到更多类似的问题，通常都会花费我很多时间来解决出错原因。

因为不知道出错原因，当请教老师或是同学的时候才恍然大悟，原来是这么简单的。

人往往都是这样，没有经历过的话，永远都不知道事情到底是怎么一个样子，是真的那么难，还是并非如此，所以，不管怎么样，即使是自己完全陌生的事情，只要有机会，都一定要去尝试，努力去做好。

因为没有经验，那么就需要做更多的准备工作。

另外就是不要害怕失败，只要用心去做就可以了。

等到熟练了，那么成功将是水到渠成的事情。

比如我的第一次做那些不起眼的小事时，虽然我做得不够好，但经历了就是好的。

计算机专业毕业实习日记2因为技术部特殊原因，星期六都是轮休，恰好2月11日元宵节到我值班，早上坐车到公司都是一路顺畅，每个人都在家过节，虽然我人在公司，但是心情也跟他们一样，带着元宵节的喜气心情，和着烟花爆竹的声音继续工作。

工作虽没有空闲，但是毕业设计还是要做的，这周又继上周的工作继续向下写。

前面的路还很漫长，需要不断的努力和奋斗才能真正地走好。

计算机专业毕业实习日记3俗话说的好一年之季在于春，一天之季在于晨，又是一个星期的'开始，早上起来呼吸着窗外的新鲜空气，来到厂里开始新的工作，将上个星期的零件图把他装配起来，我以为本来是很简单的事，不过事实并不是想象中的那样的简单，在装配过程中出现了许多问题，这下可把我个弄荤了，都不知道该从何下手，比如说在装配的过程中出现尺寸的不一样，出现很大的间隙等等其他的许多问题。

div和css

河南城建学院计算机学院《网页编程》实验报告班级姓名：学号：实验日期： 2014 年 11 月 03 日软件环境： Windows 、ie一、实验目的1、掌握web标准和网站重构；2、掌握css选择器分类；3、掌握css应用；4、掌握div元素的定位。

二、实验内容1、结合web标准实现网页设计；2、应用内部样式表和外部样式表到网页；3、结合div和css实现页面美化。

三、运行结果截图及代码清单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><link href="Untitled-5.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style type="text/css">body {background-image: url(t010dd639f9b629de6f.jpg);background-repeat: no-repeat;font-size: 14px;font-family: "宋体";}.才 {font-weight: bold;}如果有来生我要做一棵树，站成永恒，没有悲欢的姿势。

CSS+DIV页面布局实验

width:226px;
border: 1px solid red;
float: left;
margin-top: 15px;
}
.special{
width: 1226px;
height: 438px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
background-color:yellow;
margin-right: auto;
margin-left: auto;
}
.product{
height: 420px;
width:1226px;
margin-right: auto;
margin-left: auto;
border: solid red;
width: 1226px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
}
.p5{
height: 150px;
width: 798px;
border: 1px solid red;
float: left;
}
.p6{
height: 150px;
float: left;
}
.special>.shop1{
height: 380px;
width: 232.5px;
border: 1px solid red;
margin-left:15px;
float: left;
}
.special>.shop2{
height: 58px;

实验四DivCSS网页布局

实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。

下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。

有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局及规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的布局了。

关于以上CSS的说明：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。

网页制作实验报告(18篇)

网页制作实验报告（18篇）篇1：网页制作实验报告一、实验目的及要求：本实例的目的是通过设置css样式创建表格的虚线边框。

二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装windows xp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。

三、实验原理通过设置css样式创建表格的虚线边框。

四、实验方法与步骤1) 在网页中创建一个表格。

2) 在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。

3) 在弹出的对话框中进行设置，完成后单击“确定”按钮。

五、实验结果六、讨论与结论对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。

对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。

这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。

篇2：网页制作实验报告一、实验目的及要求：本实例的目的是创建锚点链接。

二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装windows xp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。

三、实验原理创建锚点链接。

四、实验方法与步骤1) 在页面中插入1行4列的表格，并在各单元格中输入导航文字。

2) 分别选中各单元格的`文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。

前端设计作品实验报告(3篇)

第1篇一、实验背景随着互联网技术的飞速发展，前端设计在用户体验和视觉效果上扮演着越来越重要的角色。

为了提高自身的前端设计能力，我选择进行了一次前端设计作品的实验。

本次实验旨在通过实际操作，掌握前端设计的基本流程，提升设计作品的质量，并锻炼自己的创新能力。

二、实验目的1. 熟悉前端设计的基本流程和工具。

2. 提高设计作品的视觉效果和用户体验。

3. 培养创新思维，提升个人设计水平。

三、实验内容1. 需求分析在开始设计之前，首先要明确设计的目的和需求。

本次设计作品的目标是为一家初创公司打造一个简洁、高效、美观的官方网站。

通过对公司业务、目标用户和行业趋势的分析，确定了以下设计要点：- 突出公司特色和核心竞争力。

- 提供清晰的导航和内容结构。

- 优化页面加载速度和用户体验。

2. 原型设计根据需求分析，我使用Axure RP软件制作了网站的原型图。

在原型设计中，我注重以下几个方面：- 页面布局：采用响应式设计，适应不同设备尺寸。

- 导航结构：简洁明了，方便用户快速找到所需内容。

- 内容排版：合理利用空间，突出重点信息。

- 色彩搭配：选用符合公司品牌形象的色彩，提升视觉效果。

3. 界面设计在原型设计的基础上，我开始进行界面设计。

以下是界面设计的具体步骤：- 确定视觉风格：根据公司品牌形象，确定网站的整体视觉风格。

- 设计图标和图片：制作符合风格的图标和图片，提升页面美观度。

- 设计按钮和表单：优化按钮和表单的交互设计，提高用户体验。

4. 前端开发在完成界面设计后，我开始进行前端开发。

以下是开发过程中的关键步骤：- HTML结构：根据原型图，编写清晰的HTML结构。

- CSS样式：利用CSS3实现页面样式，优化页面布局和视觉效果。

- JavaScript交互：编写JavaScript代码，实现页面交互功能。

- 资源优化：对图片、视频等资源进行压缩和优化，提高页面加载速度。

5. 测试与优化在前端开发完成后，我对网站进行了全面测试，包括：- 功能测试：确保所有功能正常运行。

用DIV+CSS技术的WEB页面布局实践

</style>
6
西华大学数学与计算机学院专业实习报告
2.2.6 材料-3.html 排版后的页面截图
3 设计环境
Iis5.0/6.0 DreamWearver IE 浏览器
7
动态网页设计专业实习
4 DIV+CSS 技术和传统表格技术的优缺点比较
CSS 网页布局的意义体现在如下方面：一、使页面载入得更快由于将大部分页面代码写在了 CSS 当中，使得页面体积容量变得更小。相对于表格
8
西华大学数学与计算机学院专业实习报告
复杂，甚至比较庞大，如果 CSS 文件调用出现异常，那么整个网站将变得惨不忍睹。三、虽然说 DIV+CSS 解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用
出现异常，比如火狐浏览器，在 IE 中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS 还没有实现所有浏览器的统一兼容。
1
动态网页设计专业实习
2 技术路线主要要求与主要功能（或需求分析）
2.1 要求
将材料-1.html、材料-2.html、材料-3.html 用 DIV+CSS 技术对应排版成材料-1
样式.jpg、材料-2 样式.jpg、材料-3 样式.jpg 所示的页面布局形式。
2.2 实现
2.2.1 材料-1.html 排版的 CSS 代码
嵌套的方式，DIV+CSS 将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。三、修改设计时更有效率由于使用了 DIV+CSS 制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到 CSS 里找到相应的 ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。四、保持视觉的一致性 DIV+CSS 最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用 DIV+CSS 的制作方法，将所有页面，或所有区域统一用 CSS 文件控制，就避免了不同区域或不同页面体现出的效果偏差。五、更好地被搜索引擎收录由于将大部分的 HTML 代码和内容样式写入了 CSS 文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。六、对浏览者和浏览器更具亲和力我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS 在这方面更具优势。由于 CSS 富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。说了这么多 CSS 网页布局的意义与优点，同时也不能轻视 CSS 网页布局的副作用：一、DIV+CSS 尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。二、CSS 网站制作的设计元素通常放在 1 个外部文件中，或几个文件，有可能相当