CSS+DIV网页培训

超然学生作品

联系我们

0371-67622838

超然设计学校微信号

机械设计、园林景观设计、平面设计、影视动画、动漫、网页UI设计开班了!欢迎大家! 超然十大金牌专业：平面设计师培训；影视动画、动漫设计师培训练、室内外效果图培训、网页设计师培训；园林景观设计师培训特色班(美术+电脑+设计理念)素描、色彩、四大构成（平面构成、色彩构成、立体构成、超然构成）强化班（知识+技术+能力）真实的项目实践教学：1 平面设计项目 2 室内外效果图设计项目 3 POP广告设计项目4 专业影视动画、动漫设计项目5 网页/UI设计项目 6、园林景观设计项目

CSS+DIV网页设计培训

CSS+DIV网页设计步骤

A、

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

B、页面布局图嵌套关系

•DIV结构如下：
│body {}　/*这是一个HTML元素*/
└#Container {}　/*页面层容器*/
├#Header {}　/*页面头部*/
├#Nav {}　/*导航主体*/　

•　　　　　├#PageBody {}　/*页面主体*/
│　├#Sidebar {}　/*侧边栏*/
│　└#MainBody {}　/*主体内容*/
└#Footer {}　/*页面底部*/

C、代码

index.htm 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>超然电脑培训div+css</title>

</head>

<body>

</body>

</html>

<body></body>标签对中写入DIV的基本结构，代码如下：

<div id="container">[color=#aaaaaa][/color]
<div id="Header">[color=#aaaaaa][/color]</div>

<div id=“Ｎav”>[color=#aaaaaa]<!—导航主体-->[/color]</div>
<div id="PageBody">[color=#aaaaaa][/color]
<div id="Sidebar">[color=#aaaaaa][/color]</div>
<div id="MainBody">[color=#aaaaaa][/color]</div>
</div>
<div id="Footer">[color=#aaaaaa][/color]</div>
</div>