实验四 Div+CSS网页布局

格式：doc
大小：265.00 KB
文档页数：10

下载文档原格式

div+css网页标准布局、经典布局

设置完图片的格式后，就可以存储了，这里选择到images的上一级目录就行了，ps会自动创建images目录并把图片文件放入，如果已存在，直接放入。在格式处选择仅限图像，如果选择html和图像，ps会自动生成一个表格式的网页，这个页面不是我们需要的，就不让它生成了；还有一个需要注意的地方就是选择所有用户切片，这样只把我们手动切割的图片保存下来，其它的就不保存了。保存后的图片如下所示，其中hot_bg.gif这张图片切割时没有隐藏上边的文字，一会儿在ps里再处理一下把文字抹掉。
从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的
header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：
<div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="nav">此处显示 id "nav" 的内容</div> <div id="maincontent"> <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> </div> <div id="footer">此处显示 id "footer" 的内容</div> </div>

css+div布局(实验报告)

实验六 CSS布局
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
掌握用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页面布局的使用方法_

}
#maindiv
{
width:740px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
#HeadDiv
{
width:740px;
background-image:url(images/logo-1.jpg);
height:80px;
text-align:right;
 ｜ 
<asp:HyperLinkID="HyperLink5"runat="server"NavigateUrl="#">产品</asp:HyperLink>
 ｜ 
<asp:HyperLinkID="HyperLink6"runat="server"NavigateUrl="#">联系我们</asp:HyperLink>
<asp:HyperLinkID="HyperLink3"runat="server"NavigateUrl="#">关于公司</asp:HyperLink>
 ｜ 
<asp:HyperLinkID="HyperLink4"runat="server"NavigateUrl="#">新闻</asp:HyperLink>
width:100%;
height:63px;

DIV+CSS网站布局

DIV+CSS网站布局第一节随着Web标准在国内的逐渐普及，以及很多业内人士的大力推行，很多网站已经开始重构。

Web标准提出将网页的内容与表现分离，同时要求HTML文档要具有良好的结构。

抛弃传统的表格布局方式，采用层(DIV)布局，并且使用层叠样式表（CSS）来实现页面的外观。

一、Web标准：是一系列标准的集合。

二、网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。

三、对应的标准也分三方面：a)结构化标准语言主要包括：XHTML 和XMLb)表现标准语言主要包括：CSSc)行为标准主要包括对象模型：(如W3C DOM)、ECMAScript等。

d)根据W3C DOM规范是一种W3C颁布的标准，用于对结构化文档建立对象模型，从而使用户可以通过程序语言（包括脚本）来控制其内部结构。

简单的理解，DOM解决了Netscaped的Javascript Microsoft Jscript之间的冲突，给予WEB设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。

四、采用标准的好处：a)文件下载与页面显示速度更快。

b)内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）。

c)用户能够通过样式选择定制自己的表现界面。

d)所有页面都能提供适于打印的版面。

五、采用标准对网民有者的好处如下：a)更少的代码和组件、容易维护。

b)带宽要求降低（代码更简洁），成本降低。

c)更容易被搜索引擎搜索到。

d)改版方便，不需要改变页面内容。

六、什么是内容、表现、结构和行为a)内容就是制作者放在页面内真正想要访问者浏览的信息，可以包含数据、文档或者图片等。

b)结构用结构将它格式化。

分成标题、正文和列表等。

易于阅读和理解。

c)表现：虽然定义了结构但是内容还是原来的样式没有改变。

例如，标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。

用CSSDIV开发技术实现网页布局

三、高级技巧
除了基本的布局实践技巧外，CSS DIV开发技术还提供了一些高级技巧，可以进一步提升网页布局的美感和效果。
1、背景图像
通过使用CSS的background-image属性，可以为网页元素添加背景图像，从而增加页面的视觉效果。此外，background-size、background-repeat和 background-position等属性还可以控制背景图像的大小、重复和位置等。
参考内容
随着互联网的快速发展，网页布局技术也在不断演进。在过去的几年里， DIV CSS布局技术成为了网页设计的主流。本次演示将介绍DIV CSS网页布局技术，包括其基本概念、优点、应用场景以及发展方向。
一、什么是DIV CSS布局技术？
DIV CSS布局技术是一种基于HTML和CSS的网页布局技术。它使用DIV标签和 CSS样式表来构建网页结构，实现网页元素的排版和样式设计。DIV CSS布局技术将网页分成若干个DIV块，每个块由一个或多个HTML元素组成，再通过CSS样式表来控制这些元素的排版、位置、颜色、字体等属性。
二、布局实践
在实践中，我们可以使用CSS DIV开发技术来实现各种复杂的网页布局。下面介绍几种常见的布局实践技巧：
1、浮动布局
浮动布局是早期实现网页布局的方法之一，通过设置浮动属性float，可以让元素左右浮动，从而实现在页面上的布局。例如，将侧边栏设置为浮动，使其浮动在页面主体内容的右侧。
在布局实践中，我们可以采用浮动布局将主体内容和侧边栏浮动在一起，同时使用定位布局将导航栏固定在页面的顶部。此外，我们还可以为网站添加背景图像，以提升页面的视觉效果。
通过分析实际案例，我们可以看到CSS DIV开发技术在网页布局中的重要性和广泛应用。在实际开发中，我们需要根据具体需求选择合适的布局技巧和方法，以提高网页的可用性和吸引力。

Div+CSS网站布局应用教程第4章 Div+CSS网页布局

4.1.1
什么是Div
Div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上是一个容器，例如使用<P>标签对象。 <p>文档内容</p> <P>标签作为一个容器，其中放入了内容。相同的，Div也是一个容器，能够放臵内容代码如下。 <div>文档内容</div>
4.1.2
插入Div
CSS的排版是一种比较新的排版理念，完全有别于传统的排版方式。它将页面首先在整体上进行<div>标签的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。
4.3.7
理解空白边叠加
空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边中的高度的较大者。当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。
自测4——控制网页元素之间的间距
自测4：控制网页元素之间的间距最终文件：光盘\最终文件\第4章\4-3-7.html 视频：光盘\视频\第4章\4-3-7.swf
CSS中，所有的页面元素都包含在一个矩形框内，这个矩形框就称为盒模型。盒模型描述了元素及其属性在页面布局中所占的空间大小，因此盒模型可以影响其他元素的位臵及大小。一般来说这些被占据的空间往往都比单纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数，来调节盒子的位臵。
4.3.2
CSS盒模型的要点
4.3.3
margin（边距）属性
margin属性用于设臵页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念。margin属性的语法格式如下。 margin: auto | length;

使用Div+CSS布局网页

第7章使用Div+CSS布局网页
• • • • Web标准概述认识Div Div+CSS布局简介使用Spry布局对象
7.1 Web标准概述
7.1.1 什么是Web标准
Web标准是由W3C（World Wide Web Consortium）和其他标准化组织制定的一套规范，包括HTML、 JavaScript及CSS等一系列标准，其目的在于创建一个统一的用于Web表现层的技术标准，以便能通过不同浏览器或终端设备（计算机、手机等）向用户展示信息内容。
7.4.2 Spry选项卡式面板
Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板中的“Spry选项卡式面板”即可将其插入。
7.4.3 Spry折叠式
Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板中的“Spry折叠式”即可将其插入。
7.2 认识Div
Div全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签。我们可以通过手动插入 div标签并对它们应用CSS样式来创建网页布局。
7.2.1 Div简介
Div是用来为HTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签<Div>和结束标签</Div>之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表格式化这个块来控制。
7.1.2 Web标准的构成
1．结构

DIV+CSS网页布局

《DIV+CSS布局基础》
传统Table布局
传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。
最终布局效果
height: 400px; width: 800px; padding:5px; background-color#FF9900; } #footer { width: 800px; height: 50px; padding:5px; background-color: #6699FF; }
HTML代码： <div id=“logo"> <a href="#" id="logolink"></a> </div> CSS代码 #logo{ height:80px;/*公共代码中没有定义高度，在这里定义*/ } #logolink{ display:block;/*将链接a转化成块状元素，这样才能显示出背景*/ width:180px; height:63px; background-image: url(../image/logo.jpg); background-repeat: no-repeat; margin-top:20px;/*设置a的顶部外边距为20像素，这样使其与浏览器顶部有段距离*/ }
制作导航条
1.设计垂直导航条
浮动(float)页面布局
【第一步整体布局与公共CSS定义】
页面主要分5大块，顶部的Logo、导航条 Nav、Banner、Content、Footer，如下图

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页面布局实例

制作个人网站首页的左边栏目（leftCol）
在leftCol中只包含相册一个栏目，命名为gallery。在相册中包含相册栏目的栏目标题，使用h4标签嵌套。相册中的相片使用一个无序列表嵌套。
制作个人网站首页的中间栏目（midCol）
在midCol中包含三个垂直排列的文章列表。这三个文章列表分别为“最新日志”、“最新留言”和“旅游日志”。
1．设置文章列表的位置 2．添加文章列表 3．设置文章列表的样式
制作个人网站首页的右边栏目（rightCol）
rightCol用于放置网页的导航，使用一个无序列表嵌入导航内容。
本实例讲解如何制作个人网站的首页。内容包括：分析个人网站首页的架构分块制作个人网站首页
个人网站首页构架分析
当网页设计师制作好个人网站的首页效果图，交给页面制作人员进行网页制作。页面制作人员只需要制作出与效果图一致并且兼容主流浏览器的标准页面即可。
分块制作个人网站首页
在对效果图进行分析得到页面结构图后，就可以进行分块制作网页。制作网页的主要遵循从总体到部分，从上部到下部的顺序。
制作个人网站首页的总体布局
制作个人网站首页首先从制作其总体布局开始，然后再细分到每个块区。本实例的页面分为左中右三部分，使用左中右浮动的布局方式。
1．建立网站文件夹 2．构建整体网页的结构 3．构建整体网页的布局
实现左中右浮动布局
1．实现左中右浮动布局 2．制作lefБайду номын сангаасCol容器的背景 3．设置midCol容器的背景图 4．设置rigthCol容器的背景图

实验4-2使用DIV+CSS布局网页

实验4-2 使用DIV+CSS布局网页参考P204图10-34实训二，使用Div+CSS布局网页使用Div+CSS布局学院教学成果申报网站网页，布局版式采用固定宽度且居中。

网页使用Div标签划分为若干模块，并采用CSS设置样式。

(1) 打开Dreamweaver，新建一个空白HTML，找到自己的文件夹，命名为chex10-2.html 并保存文件。

(2) 在网页中插入区块标签<div></div>，然后在该区块标签内再插入5对<div></div>，并命名如下。

<div id="container"><div id="top"></div><div id="banner"></div><div id="nav"> </div><div id="main"></div><div id="bottom"></div></div>(3)第3.1步，参考P74-76的行内样式表输入CSS样式如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title></head><body style="background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;"> <div id="container" style="width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;"><div id="top" style="width:100%; height:84px; background:url(images/s02.jpg);"></div> <div id="banner" style="background:url(images/s04.jpg);height:182px;width:100%;"></div> <div id="nav" style="background:#BEB79E; margin:1px 22px 1px 14px; height:39px;"><ul style="list-style:none; margin:0px 30px; padding:0px;"><li style="float:left; padding:0px; margin:0px; text-align:center;"><a href="#">首页</a></li><li><a href="#">成果简介</a></li><li><a href="#">成果内容</a></li><li><a href="#">创新点</a></li><li><a href="#">推广及应用</a></li><li><a href="#">社会评价</a></li><li><a href="#">教学获奖</a></li><li><a href="#">教材专著</a></li><li><a href="#">教研论文</a></li><li><a href="#">视频材料</a></li><li><a href="#">其它</a></li></ul></div><div id="main" style="margin:10px 10px 10px 14px; height:auto; overflow:hidden;"></div> <div id="bottom" style="background:url(images/08.jpg) no-repeat; width:100%; padding:50px 0px 10px 0px;"></div></div></body></html>(3)第3.2步，参考P74-76的内部样式表，在<head></head>中输入CSS样式如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><style type="text/css">body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;} #container {width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;} </style></head><body><div id="container"><div id="top"></div><div id="banner"></div><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">成果简介</a></li><li><a href="#">成果内容</a></li><li><a href="#">创新点</a></li><li><a href="#">推广及应用</a></li><li><a href="#">社会评价</a></li><li><a href="#">教学获奖</a></li><li><a href="#">教材专著</a></li><li><a href="#">教研论文</a></li><li><a href="#">视频材料</a></li><li><a href="#">其它</a></li></ul></div><div id="main"></div><div id="bottom"></div></div></body></html>(3)第3.3步，参考P74-76的外部样式表，在<link></link>中链接外部CSS样式文件如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><link href="chex10-22.css" type="text/css" rel="stylesheet"></head><body><div id="container"><div id="top"></div><div id="banner"></div><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">成果简介</a></li><li><a href="#">成果内容</a></li><li><a href="#">创新点</a></li><li><a href="#">推广及应用</a></li><li><a href="#">社会评价</a></li><li><a href="#">教学获奖</a></li><li><a href="#">教材专著</a></li><li><a href="#">教研论文</a></li><li><a href="#">视频材料</a></li><li><a href="#">其它</a></li></ul></div><div id="main"></div><div id="bottom"></div></div></body></html>外部CSS样式文件chex10-22.css的内容如下：@charset "utf-8";body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;}#container{width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;}注意：标签选择器、类选择器(以小数点.开头)、id选择器(以井号#开头)(4)以第3.2步为例，接着在<div id="main"></div>中添加左、右各一对<div></div>，然后在<div id="left"></div>中插入3对<div></div>，在<div id="right"></div>中也插入3对<div></div>，并在<head></head>中增加相应CSS样式如下：<div id="left"><div id="info"></div><div style="clear:both; height:6px;"></div><div id="person"></div></div><div id="right"><div id="shotcut"><div> </div></div><div style=" clear:both; height:6px;"></div><div id="show"><div id="showinfo"></div></div></div>在<head></head>中增加相应CSS样式如下：#bottom p{ font-size:12px; line-height:22px; text-align:center; color:#666;}#left{ width:192px;height:auto; overflow:hidden; float:left;}#info{ width:190px;background:url(s07.jpg) no-repeat left top #efedec; border:1px solid #b4aead;height:auto;overflow:hidden;}#infoh1{height:38px;line-height:38px;width:100%;text-align:center;font-size:14px;font-weight:bold;color:#401500;}#person{ width:192px; background:url(s11.jpg); height:292px;}#person h1{ height:60px; line-height:60px; width:100%; text-align:center; font-size:14px; font-weight:bold; color:#401500;}#person p{ font-size:12px; line-height:18px; text-indent:2em; margin:6px;}#main a{ color:#ce0000; text-decoration:none;}#main a:hover{ color:#666;text-decoration:none;}#right{ margin:0px 6px; width:768px; float:left;}#shotcut{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#show{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#right h1{ height:36px; line-height:36px; width:748px; padding-left:20px; text-align:left; font-size:14px; font-weight:bold; color:#401500; border-bottom:1px solid #e1e1e1;background:#f5f4f4;}#shotcut div{ margin:6px;font-size:12px; line-height:22px;}#show div{ margin:16px; font-size:12px;height:auto; overflow:hidden;}#showinfo ul{ margin:0px; padding:0px; list-style:none;}#showinfo li{ float:left; width:182px; }#showinfo li img{ border:1px solid #d2beb4; padding:1px; width:165px; height:115px;}#showinfo p{ line-height:22px;text-align:center;}(5)分别输入文字和插入图片，主要代码如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><style type="text/css">*{ margin:0px; padding:0px;}body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;} #container {width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#nav a{ height:38px; width:82px; line-height:38px; display:block; text-decoration:none; color:#fff; font-size:14px; font-weight:bold;}#nav a:hover{ text-decoration:none; color:#831616;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#main a{ color:#ce0000; text-decoration:none;}#main a:hover{ color:#666;text-decoration:none;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;}#bottom p{ font-size:12px; line-height:22px; text-align:center; color:#666;}#left{ width:192px;height:auto; overflow:hidden; float:left;}#info{ width:190px;background:url(s07.jpg) no-repeat left top #efedec; border:1px solid #b4aead;height:auto;overflow:hidden;}#info h1{height:38px;line-height:38px;width:100%;text-align:center;font-size:14px;font-weight:bold;color:#401500;}.tinfo{ margin:6px; font-size:12px; width:176px;}.tinfo .tdleft{ line-height:18px; font-weight:bold; color:#222; text-align:right; width:50%;}.tinfo .tdright{ line-height:18px; color:#ce0000; text-align:left; width:50%;}.pimg{ margin:0 50px; border:1px solid #d2beb4;padding:1px;}#person{ width:192px; background:url(s11.jpg); height:292px;}#person h1{ height:60px; line-height:60px; width:100%; text-align:center;font-size:14px; font-weight:bold; color:#401500;}#person p{ font-size:12px; line-height:18px; text-indent:2em; margin:6px;}#right{ margin:0px 6px; width:768px; float:left;}#shotcut{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#show{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#right h1{ height:36px; line-height:36px; width:748px; padding-left:20px;text-align:left; font-size:14px; font-weight:bold; color:#401500;border-bottom:1px solid #e1e1e1;background:#f5f4f4;}#shotcut div{ margin:6px;font-size:12px; line-height:22px;}#show div{ margin:16px; font-size:12px;height:auto; overflow:hidden;}#showinfo ul{ margin:0px; padding:0px; list-style:none;}#showinfo li{ float:left; width:182px; }#showinfo li img{ border:1px solid #d2beb4; padding:1px; width:165px; height:115px;}#showinfo p{ line-height:22px;text-align:center;}/*二级页面*/#subnav{ height:auto; overflow:hidden; border:1px solid #e1e1e1; background:#dfdbce;}#subnav h2{ font-size:14px;font-weight:normal;height:32px;line-height:32px;padding-left:20px;} /*变化式表格*/.td_1{ line-height:24px; border-bottom:1px dotted #666666; padding-left:10px;font-size:12px; color:#000; }.td_2{ line-height:24px; border-bottom:1px dotted #666666; padding-left:10px;font-size:12px;color:#000;}.td_1 a{ text-decoration:none; color:#000;}.td_1 a:hover{ text-decoration:none; color:#ff0000;}.td_2 a{ text-decoration:none; color:#000;}.td_2 a:hover{ text-decoration:none; color:#ff0000;}</style></head><body><div id="container"><div id="top"></div><div id="banner"></div><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">成果简介</a></li><li><a href="#">成果内容</a></li><li><a href="#">创新点</a></li><li><a href="#">推广及应用</a></li><li><a href="#">社会评价</a></li><li><a href="#">教学获奖</a></li><li><a href="#">教材专著</a></li><li><a href="#">教研论文</a></li><li><a href="#">视频材料</a></li><li><a href="#">其它</a></li></ul></div><div id="main"><div id="left"><div id="info"><h1>成果信息</h1><table><tr><td></td><td></td></tr></table></div><div style="clear:both; height:6px;"></div><div id="person"><h1>项目负责人</h1><img></img><p>输入文字</p></div></div><div id="right"><div id="shotcut"><h1>成果简介</h1><div>输入文字</div></div><div style=" clear:both; height:6px;"></div><div id="show"><h1>成果展示</h1><div id="showinfo"><ul><li><img></img><p>成果名称</p></li></ul></div></div></div></div><div id="bottom"><p>版权所有</p><p>地址:</p></div></div></body></html>。

DIV+CSS标准化网页布局(pdf 6页)

基础模块任务单项目名称DIV+CSS标准化网页布局学时6班级省中职师资计算机应用与技术培训班学员姓名段石箭所在组号6项目成绩94实训设备电脑实训场地实验楼308日期7.29员工任务用DIV+CSS制作网页——《雨的随想》品读任务目的学会用DIV+CSS制作网页。

一、DIV网页作品:1、网页截图2、div结构（代码）<div id="all"><div id="top"></div><div id="center"><div id="center_left"><ul class="p1"><li>三词经</li><li>凡事感激</li><li>一颗露珠折射的光</li><li>青春</li><li>父亲</li><li>＜机会＞之感</li></ul></div><div id="center_right"><p class="p2"><span class="p3">一、《雨的随想》品读</span><img src="Images/GIRL.jpg" width="247"height="317"align="right"/></p><p class="p2">王国维有云："一切景语皆情语"。

DIVCSS网页布局技巧实例

DIVCSS网页布局技巧实例提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟~~DIV+CSS网页布局技巧实例3:设置层的透明度有时候我们需要用到层的透明度，把下边的背景透出来，如下图：这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS,NO,NO,既然我们是CSS布局教程，那么就尽量用CSS来解决问题！filter:alpha(opacity=70);opacity:0.7;提示：可以先修改部分代码后再运行使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。

c缩写的主要规则请参看《常用c缩写语法总结》，c缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。

盒尺寸通常有下面四种书写方法:property:value1;表示所有边都是一个值value1；property:value1value2;表示top和bottom的值是value1,right和left的值是value2property:value1value2value3;表示top的值是value1，right和left 的值是value2，bottom的值是value3property:value1value2value3value4;四个值依次表示top,right,bottom,left方便的记忆方法是顺时针，上右下左。

具体应用在margin和padding的例子如下：margin:1em02em0.5em;边框(border)边框的属性如下：border-width:1p某;border-tyle:olid;border-color:#000;可以缩写为一句：border:1p某olid#000;语法是border:widthtylecolor;背景(Background)背景的属性如下：background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fi某ed;background-poition:00;可以缩写为一句：background:#f00url(background.gif)no-repeatfi某ed00;语法是background:colorimagerepeatattachmentpoition;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color:tranparentimage:nonerepeat:repeatattachment:crollpoition:0%0%字体(font)字体的属性如下：font-tyle:italic;font-variant:mall-cap;font-weight:bold;font-ize:1em;line-height:140%;font-family:"LucidaGrande",an-erif;可以缩写为一句：font:italicmall-capbold1em/140%"LucidaGrande",an-erif;注意，如果你缩写字体定义，至少要定义font-ize和font-family 两个值。

用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 个外部文件中，或几个文件，有可能相当

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

实验四 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则是内部距离。

text-align:center文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。

background:#FFF设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。

background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。

top/right/bottom/left/center用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用background:url('bg.gif') 20px 100px;表示X座标为20像素，Y座标为100像素的精确定位；repeat/no-repeat/repeat-x/repeat-y分别表示填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

height / width / color分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

4、如何使页面居中？大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#container中使用了以下属性：margin:0 auto;按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。

如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。

通过margin:auto我们就可以轻易地使层自动居中了。

5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。

当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。

在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：样式说明：a:link,a:visited {font-size:12px;text-decoration:none;}a:hover {}这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。

#container {width:800px;margin:10px auto}指定整个页面的显示区域。

width:800px指定宽度为800像素，这里根据实际所需设定。

margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。

上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。

二、设计首页布局根据上面的规划，先设计页面布局，然后再填充内容。

步骤如下：（1）新建站点“mysite”，新建一个HTML文件，命名为“index.html”。

在“文档”面板中把“标题”项的“无标题文档”改为“页面布局”。

保存网页（制作网页时一定要时常记着保存网页，否则一旦出现问题，前功尽弃！）。

（2）页面层容器。

选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div标签，在弹出的对话框中命名Div的ID为“Container”。

单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:800px指定宽度为800像素，这里根据实际所需设定。

margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。

对层的margin属性的左右边距设置为auto可以让层居中显示。

border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（3）页面头部。

选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“Header”。

单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:780px;height:100px;margin:10px;表示上下左右边距为10px。

background:#FFCC99border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（4）页面主体。

选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“PageBody”。

单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:780px;height:400px;margin:10px;表示上下左右边距为10px。

background: #CCFF00border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（5）左边条。

选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div标签，在弹出的对话框中命名Div的ID为“SideBar”。

单击“新建CSS规则”按钮，以ID为规则名称新建样式：float: left;width:280px;height:380px;margin:10px;表示上下左右边距为10px。

选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“MainBody”。

单击“新建CSS规则”按钮，以ID为规则名称新建样式：float: right;width:450px;height:380px;margin:10px;表示上下左右边距为10px。