1 / 9
文档名称:

实验DivCSS网页布局.doc

格式:doc   大小:163KB   页数:9页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

文档介绍:.
实验九Div+CSS网页布局
、站点规划
DIV+CSS
在网页制作中,有许多的术语,例如: HTML CSS DIV等等。下面我们就开始一步一步使用
进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画岀来。
■ Th log.conn.cn
bs:i*
fl***
-:q.J
丄峙•理町
-:• n " im^ f
氧二世阵i
[磁*<辽—|
-> *7 ■ < =i Uitri
i*rt> A i H
址勺削Wi HflWIlitl*
.r • ^llli ;A*-A llkipjn Fl!
«* fi . / > + ■* 叮* 八 r
-.Fh 的
屯。叫Rii・匚
!>riK H i 齐®
CSi". * * v
礼齡IN応 HX1EW丹
# ■„ 4> '珂E JH*## FT!
:・ Qi; •卜 '.^T 'j? i'w t:・
■SICK:1 2 3 4 Jl |T 耐-也 - i
■曲匚"押顶:宀1
密 }r F H A rifE

下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分
为以下几个部分:


Header 层
SideBar 层
Main Body 层
PageBody 层





Footer 层
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了
body{}
^container {} tfHeader (}
ffPageBody {}
舲 {}

#MainBcdy 0





^Footer 0
DIV结构如下:
I body {} /*这是一个HTML元素,具体我就不说明了 */
^Container {} /* 页面层容器 */
P#Header {} /* 页面头部 */
-#PageBody {} /* 页面主体 */
I P#Sidebar {} /* 侧边栏 */
I L#MainBody {} /* 主体内容 */
L#Footer {} /* 页面底部 */
至此,页面布局与规划已经完成,接下来我们要做的就是开始书写 HTML弋码和CSS
接下来我们在桌面新建一个文件夹,命名为“ DIV+CSS页面布局”,在文件夹下新建两个空的记事本 文档,输入以下内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />




这是XHTM

分享好友

预览全文

实验DivCSS网页布局.doc

上传人:guoxiachuanyue008 2021/9/20 文件大小:163 KB

下载得到文件列表

实验DivCSS网页布局.doc

相关文档