1 / 20
文档名称:

网页设计-页面布局篇(Css+Div).docx

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

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

分享

预览

网页设计-页面布局篇(Css+Div).docx

上传人:世界末末日 2022/7/3 文件大小:323 KB

下载得到文件列表

网页设计-页面布局篇(Css+Div).docx

文档介绍

文档介绍:信息服务学院--网络社--网页设计辅导
- 1 -
南京信息职业技术学院
网页设计-页面布局篇(Css+Div)
>>目录<<
第一步:规划网站,本教程将以图示为例构建网站; 第二步:创建 html 模板及文件目录等;y { margin: 0;
信息服务学院--网络社--网页设计辅导
- 4 -
南京信息职业技术学院
padding: 0;
}
第三步:将网站分为五个 div,网页基本布局的基础:
将“第一步”提到的五个部分都放入盒子中,在 html 文件中写入:
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
表现如下:
为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在 css 文件写入:
#main-nav { background: red; height: 50px;
}
#header { background: blue; height: 150px;
}
#sidebar-a { background: darkgreen;
}
#content { background: green;
}
#footer { background: orange; height: 66px;
}
信息服务学院--网络社--网页设计辅导
- 5 -
南京信息职业技术学院
表现如下:
第四步:网页布局与 div 浮动等:
浮动,首先让边框浮动到主要内容的右边。用 css 控制浮动:
#sidebar-a { float: right; width: 280px;
background: darkgreen;
}
表现如下:
往主要内容的盒子中写入一些文字。在 html 文件中写入:
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
信息服务学院--网络社--网页设计辅导
- 6 -
南京信息职业技术学院
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表现如下:
但是你可以看到主要内容的盒子占据了整个 page-container 的宽度,我们需要将#content 的右边界设为 280px。以使其不和边框发生冲突。
css 代码如下:
#content {
margin-right: 280px;
background: green;
}
同时往边框里写入一些文字。在 html 文件中写入:
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Mae cenas in lectus.
Donec in sapien in nibh ru