HTML布局重点 已看_第1页
HTML布局重点 已看_第2页
HTML布局重点 已看_第3页
HTML布局重点 已看_第4页
HTML布局重点 已看_第5页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、亲自试一试 - 实例使用 元素的网页布局如何使用 元素添加布局。使用 元素的网页布局如何使用 元素添加布局。网站布局大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。可以使用 或者 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!HTML 布局 - 使用 元素div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局:实例div#containerwidth:500pxdiv#header background

2、-color:#99bbbb;div#menu background-color:#ffff99; height:200px; width:100px; float:left;div#content background-color:#EEEEEE; height:200px; width:400px; float:left;div#footer background-color:#99bbbb; clear:both; text-align:center; h1 margin-bottom:0;h2 margin-bottom:0; font-size:14px;ul margin:0;li

3、 list-style:none;Main Title of Web PageMenuHTMLCSSJavaScriptContent goes hereCopyright W3S亲自试一试上面的 HTML 代码会产生如下结果:HTML 布局 - 使用表格使用 HTML 标签是创建布局的一种简单的方式。可以使用 或者 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!下面的例子使用三行两列的表格 - 第一和最后一行使用 colspa

4、n 属性来横跨两列:实例 Main Title of Web Page MenuHTMLCSSJavaScriptContent goes hereCopyright W3S亲自试一试上面的 HTML 代码会产生以下结果:HTML 布局 - 有用的提示提示:使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。如需学习更多有关 CSS 的知识,请访问我们的 CSS 教程。提示:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论