当前位置：文档之家 › 第11章 网页样式(2)

第11章 网页样式(2)

  • 格式：pptx
  • 大小：2.56 MB
  • 文档页数：28

下载文档原格式

  / 28

合集下载

第11(2)模板的使用

第11(2)模板的使用

图10-90 网站首页效果
练习3 利用扩展插件制作网页日历
利用扩展插件
calendar.mxp和 alternate_table_rows .mxp在网页中创建一 个日历，效果如图所 示。其中 calendar.mxp插件用 来创建日历， alternate_table_rows .mxp插件用来实现表 格中行与行之间的背 景色交替显示。
2、使用模板的实际意义： (1)模板是一种用来制作具有相同风格页面的 “模子”，用户利用模板可以在短时间内设 计大量风格相同或相近的页面。 (2)可以提高工作效率和制作网页的速度。 (3)从模板创建的文档与该模板保持连接状态， 一次可以更新多个页面。 (一旦做好了模版，修改就非常容易。可以集 中时间调整内容和界面，或者任何时候单独 调整。 )
1、插入可编辑区 定义可编辑区域有两种方法。 一种是选择已有的一部分页面内容将它指定为 可编辑区域 另一种是在当前光标处插入一个空的可编辑区 域。 可编辑区域的命名规则：不可使用单引号、双引 号、尖括号(<>)、和与符号（&）
注意： 可将整个表格或某个单元格定义为可编辑区域， 不可同时指定几个单格为可编辑区域； 将层定义为可编辑区域时，用户可以改变层的 位置，将层上的内容定义为可编辑区域时，才 可以修改层上的内容。 2. 删除可编辑区域 如果已经将模板文件的一个区域定义为可编 辑区域，而现在想要再次锁定它，使其为不可 编辑区域，可执行“删除模板标记”操作。 （1）在文档或标签选择器中，选择想要更改的 可编辑区域。
11.5使用重复区域 在静态网页中应用较少，在动态网页中应用较 多；通常用于表格，包括重复区域和重复表格两 种重复区域模板对象。可在重复区域中复制任意 次数的指定区域，重复区域不是可编辑区域，要 想使之可编辑，必须在重复区域中插入可编辑区 域。 1.模板中创建重复区域 可以根据需要在基于模板的页面中复制任意次 数的模板部分。重复区域通常用于表格，也可以 为其他页面元素定义重复区域。 2.插入重复表格： 可以使用它创建包含重复行的表格格式的可编 辑区域，并可以定义表格属性和设置哪些表格单 元格可编辑。

div+css教案

div+css教案
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
5.1列表样式设置基础164
5。1.1设置列表项符号164
5.1。2定义项目的图片符号166
5.1.3列表的横竖转换167
5。2案例实战169
5.2.1设计新闻栏目169
5。2。2设计导航菜单173
5.2.3设计多级菜单177
5。2.4列表排版的应用182
设计高效的表格
教学课题
第7章使用CSS设计表单样式
□标准班
□合班
教学目的
认识表单样式
重点难点
掌握定义字体样式、边框样式、背景样式
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时)
7。1表单样式设置基础212
7.1.1表单基本结构212
7。1。2设置基本样式216
教学手段
教学过程
设计
（4学时）
6。1表格样式设置基础193
6.1。1设置表格颜色193
6.1.2设置表格边框194
6。2案例实战196
6。2.1美化表格197
6.2。2设计高效的表格200
6.2。3让表格更易用204
6.2。4表格布局207
机
房
操
作
课堂小结
（3分钟）
小结表格在CSS中如何运用
思考题、作业及其预习要求（2分钟）
10。3。2嵌套层叠顺序349
10。3.3CSS层叠框351
10.3。4CSS层叠常见问题354
10.4案例实战357
10。4。1画册式网页布局357

网页设计与制作教程第11章 光影世界前台页面

网页设计与制作教程第11章 光影世界前台页面
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
11.1 网站的传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。

网页设计与制作教学资料-项目九学习网页中的css样式

网页设计与制作教学资料-项目九学习网页中的css样式

（7）将“Add”的值设置为0，“Direction”的值设置为 125，“Strength”的值设置为5，如下图所示。
知识点链接
Add：设置是否重复显示“Blur”滤镜效 果，0表示不显示，1
Direction：设置模糊的方向，取值从0 开始，随取值的增大，模糊的方向沿顺时针 变动。
Strength：设置模糊的半径大小，单位 为像素，默认取值为5。
要创建一个漂亮的网页，掌 握设置CSS样式是必不可少的。 CSS样式可以实现网页中几乎所
有的样式效果。在本项目中，通 过3个工作任务向读者展示CSS样 式简介、创建CSS样式、设置CSS 样式、管理CSS样式、应用CSS高 级样式等知识。
任务一
使用不同方法创建个人网页样式
任务二
使用复制CSS样式快速制作网页
（5）在“CSS样式”面板中可以看到新创建好的样式表， 如上右图所示。
准备知识
1. 设置类型 2. 设置背景 3. 设置区块 4. 设置方框 …… 10. 删除CSS样式 11. 复制CSS样式
使用 复制 CSS样 式快 速制 作网
页
任务实施
小江是某网络公司的网站设计师，他需要对已经 建立的网站进行CSS样式设置。同时，还要能够快速 创建新的网页样式。
重点难点
重点 掌握创建CSS样式
难点
掌握CSS基本操作
重
点
难
点
（5）在“分类”列表中选择“扩展”选项，进入“扩展” 设置界面，如下图所示。
（6）在“扩展”设置界面中的“滤镜”下拉列表中选择 “DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”选项， 如下图所示。
（7）将“Color”的值设置为“#CCCCCC”，“OffX” 的值设置为3，“OffY”的值设置为3，“Positive”的值设 置为1，如下图所示。

2019-2020年人教统编《中文版网页制作实用教程》课件第11章幻灯片

2019-2020年人教统编《中文版网页制作实用教程》课件第11章幻灯片

4.4 编辑图像
在网页中插入图像后，需要设置图像属性和排列图像与文本之间的位置，这 将直接影响网页的整体效果。
设置图像属性 使用图ቤተ መጻሕፍቲ ባይዱ编辑器
4.4.1 设置图像属性
设置图片属性，主要包括设置图片的大小、对齐方式、边距等。
4.4.2 使用图像编辑器
图像编辑器，主要分为内部图像编辑器和外部图像编辑器。
4.1.2 插入文本
在Dreamweaver CS3中输入文本是非常简单的，其输入方式与其他文本处理 软件中的文本输入方式十分类似。
4.1.3 插入水平线和日期
水平线对于信息的组织很有用，在页面中，可以使用一条或多条水平线来可 视化分隔文本和对象，使用段落更加分明和更具层次感。在Dreamweaver CS3中，还可以插入日期对象，可以以任何格式插入当前的日期(可以包括时 间)，并且在每次保存文件时都会自动更新该日期。
认识“文本”插入栏 插入文本 插入水平线和日期
4.1.1 认识“文本”插入栏
使用“文本”工具栏，可以快速第插入各种类型的文本。单击插入栏上的 “文本”选项卡，打开“文本”插入栏，如图所示。
斜体 强调 块引用
标题
编号列表定义列表 定义说明 首字母缩写词
粗体 加强
段落 已编排格式
项目列表 列表项 定义术语 缩写 字符
4.3.1 网页中常见的图像格式
图像是网页中非常重要的内容。在Dreamweaver CS3中，可以在页面中插 入图像，并利用软件自带的功能设置各种图像效果，例如导航栏、链接和鼠标 经过效果等。
网页中常用的图像文件格式有JPEG(JPG)、GIF和PNG这3种。
4.3.2 在网页中插入图像
如果网页中的内容全是密密麻麻的文字，无论有多精彩的内容，都容易产 生厌烦感。所以任何精美的网页中可能没有文本，但不可能没有图像等多媒体 元素，这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色 不少，更重要是可以借此直观地向浏览者表达信息。

网页制作第11讲CSS样式表

网页制作第11讲CSS样式表

1.5．CSS样式构造
CSS样式构造主要有选
择器和申明两部分构成。选
择器是标识格式元素旳术语
（如 P、H1、类名或 ID）。
申明用于定义元素样式。申
明由两部分构成：属性（如 选择器
申明
font-size）和值（如10px）。
选择器
申明
右面旳图中，
body、.text、h1都是选择 选择器
器，介于括号 { } 之间旳全
• Fliph、FlipV滤镜：FlipH使对象产生水平翻转效果；FlipV使对象产生垂 直翻转效果。
• Glow滤镜：使对象旳外廓产生光晕效果，一般用于文本对象。 • Gray滤镜：使一种彩色图片旳彩色变为灰色调。 • Invert滤镜：使图片产生照片底片旳效果。 • Light滤镜：模拟灯光旳投射效果。 • Mask滤镜：利用一种对象在另一种对象上产生图像旳遮罩效果。 • Shadow：添加有渐进感旳阴影效果。 • X-ray：类似X光旳效果，使图片只显示其轮廓。
• 【导入】：导入方式将附加样式表旳CSS规则嵌入到目前网页旳HTML 代码中，而且在<head>…..</head>标签之间，犹如在代码视图编写CSS 规则一样。
假如附件样式表规则条目较多，一般采用【链接】方式，较为以便。
3、CSS滤镜
• 3.1 • 3.2 • 3.3
CSS滤镜旳类型 光晕字效果 图片翻转效果
• 经过CSS技术能够有效地对网页布局、字体、颜色、背景和其他对象旳显示效 果做精确旳控制。同步使用CSS能够防止页面中同类对象格式旳反复设置，提 升了工作效率，降低了页面旳承担 。
1.2．创建CSS样式
• 执行【窗口】/【CSS样式】命令，展开【CSS样式】面板， 在【CSS样式】面板中单击新建CSS规则按钮 ，打开【新 建CSS规则】对话框，在【选择器类别】中选择类型，然 后在【名称】选项框中输入名称，单击“拟定”按钮后打 开定义规则对话框，在【分类】列表中选择【类型】后设 置详细旳样式内容，如下图所示。

第11章 CSS3 动画及响应式


•
0% {background: red; left: 0px; top: 0px;}
•
25% {background: yellow; left: 200px; top: 0px;}
•
50% {background: blue; left: 200px; top: 200px;}
•
75% {background: green; left: 0px; top: 200px;}
11.5 响应式简介（响应式布局的优缺点）
响应式布局的优点 面对不同分辨率设备灵活性强, 能够快捷解决多设备显示适应问
题，根据不同的显示器调整设计最适合用户浏览习惯的页面。 响应式布局的缺点
兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时 间加长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果， 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
3
规定动画何时开始。默认是 0。
3
规定动画被播放的次数。默认是 1。
3
规定动画是否在下一周期逆向地播放。默认 3 是 "normal"。
规定动画是否正在运行或暂停。默认是
3
"running"。
规定对象动画时间之外的状态。
3
11.4 CSS动画实例
• <!DOCTYPE html>
• <html>
• <head>
•
<style>
•
div {
•
width: 100px;
•
height: 100px;
•
background: red;

网页设计与制作第11章

ul.inside {list-style-position: inside;} /*将列表修饰符定义在列表之内*/ ul.outside {list-style-position: outside;} /*将列表修饰符定义在列表之外*/ li {border:1px solid green;} /*为了便于观察效果，增加边框*/
11.1 列表控制
11.1.3 列表项位置
list-style-position属性用于设置在何处放置列表项标记，其属性值只有 两个关键词outside（外部）和inside（内部）。使用outside属性值后，列 表项标记被放置在文本以外，环绕文本且不根据标记对齐；使用inside属性 值后，列表项目标记放置在文本以内，像是插入在列表项内容最前面的行内 元素一样。
11.2 纵向列表模式的导航菜单
应用Web标准进行网页制作时，通常使用<ul>无序列表标签来构建菜 单，其中纵向列表模式的导航菜单又是应用的比较广泛的一种。
11.3 二级纵向列表模式的导航菜单
在实际应用中，虽然CSS样式能够实现二级导航菜单，但是这里并不 推荐采用这种方式。其原因在于，CSS样式存在的意义是为页面外在表现 服务，而不是为页面行为服务。包含二级导航的菜单需要根据行为显示或隐 藏菜单的二级内容，这种显示或隐藏的行为应该使用JavaScript等脚本语言 来完成。
<ul> <li><a href="#">这里能够正常显示列表图片</a></li> </ul> <ul class="img_error"> <li><a href="#">这里由于应用了错误的图片URL，导致图片不能 正确显示</a></li> </ul> <ul class="none"> <li><a href="#">这里将列表图片属性设置为none，所以没有图片 显示</a></li> </ul>

网页设计与制作——Dreamweaver CS5标准教程第11章 CSS样式

ห้องสมุดไป่ตู้
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：

1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性

第11章使用层


➢ 宽和高：指定使用[插入][层]创建的层的默认宽度和 高度（以像素为单位）。
➢ 背景颜色：指定默认的背景颜色。从颜色选择器中选择 需要的颜色即可。
➢ 背景图像：指定默认的背景图像。单击 按钮可在计 算机上查找图像文件。
➢ 嵌套：选中
复选框可指定从现有层边界内的某
点开始绘制的层是否应该是嵌套层。在绘制层时，按住
➢ inherit：该项表示继承其父层的可见性。 ➢ visible：该项表示显示层及其内容，而与父层无关。 ➢ hidden：该项表示隐藏层及其内容，而与父层无关。
（9）在“背景图像”文本框中设置背景图像 的路径。 （10）在“背景颜色”项中设置层的背景颜色。
（11）在“类”下拉列表框中选择层的样式 （如在页面中对层进行了CSS样式设置）。
第十一课 使用层
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
课前导读
➢基础知识 ➢重点知识 ➢提高知识
基础知识
层的创建、属性设置 方法。
重点知识
层的显示/隐藏、层 名称的改变及层的叠 放顺序的改变方法。
提高知识
层与表格的相互转 换方法。
课堂讲解
➢层的创建 ➢层的基本操作 ➢重设层的大小 ➢层的属性设置 ➢层的高级操作 ➢层与表格的相互转换
层的创建
➢层的创建 ➢设置层首选参数 ➢嵌套层的创建
层在网页的定位中使用非常广泛，也十分方便。 但用层设计的网页在不同分辨率的显示器上显示 时会出现错位现象，不能准确定位。因此层常作 为附属工具配合表格、框架等技术来对网页进行 设 计 。 Dreamweaver 可 以 方 便 地 在 页 面 上 创 建 层并精确地将层进行定位，还可以创建嵌套层。
（9）在“背景颜色”文本框中输入所选图层要 应用的颜色代码，或从色块中选取。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

在z轴上叠加的层， 相当于z-index:2
网站制作流程 网站制作流程
1 2
• 美工或网页设计师 • 设计界面
• 前端工程师 • 切图，制作静态页面，实现交互效果 • 软件工程师 • 实现网站功能，并将功能与界面整合 • 测试工程师 • 测试网站性能与功能后，交付用户使用
3 4
总结
CSS的基本语法结构由哪几部分构成？ CSS的三种基本选择器是什么？ 至少说出CSS中5种用于美化网页元素的属性。 可用于创建横向多列布局的属性是什么？ 使用DIV+CSS布局的优势是什么？
属性值 visible hidden 说明 默认值。内容不会被修剪，会呈现在盒子之外 内容会被修剪，并且其余内容是不可见的
scroll
auto
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
语法
overflow:属性值;
讲解：overflow属性 overflow属性的妙用
• 设置边框样 式 ）属性，外边距使用（
设置盒子模型内边距使用（ ）属性。
盒子模型属性 margin属性除了可以设置盒子与盒子之间的间距外，还 能用于什么？
实现网页自动居中布局
实现关键点
div宽度固定
将默认内边距初始化为0 body { margin:0;} #content { width:760px; margin:0 auto;
margin属性的左右外边距 值为auto
固定宽度div自动居中
}
盒子模型尺寸 盒子模型尺寸如何计算？
盒子模型尺寸=border-width + padding + margin + 内容尺寸（宽度/高度）
内容的宽度或高度
该盒子模型中， border宽度为0
列表属性 在CSS中，可以用于设置列表样式的属性有哪些？它们的 作用分别是什么？
进行复杂的元素定位
浮于页面之上的提示框 浮动广告
消息提示框
第23页/共69页
position属性 relative(相对定位)
偏移参照基准 设置方式
• 设置1个或多个子块
自身原位置
• 根据指定偏移量进行偏移 • 仍旧处于标准文档流中 • 对父块及兄弟块无影响 相对原位置，垂直下 移30px
相对原位置，水平右 移30px
近的，已经定位 浏览器窗口 2.设置偏移量方向： 的祖先元素 浏览器窗口
演示示例：绝对定位
z-index属性 在CSS中，z-index属性的作用是什么？
用于调整定位时重叠块的上、下位置
Z-index属性控制元素堆叠时，有什么特点。 位于x-y轴的页面，
相当于z-index:0 当z-index:-1时，图 片位于x-y轴的页 面之下 在z轴上叠加的层， 相当于z-index:1
演示示例：相对定位
position属性 absolute(绝对定位)
偏移参照基准 设置方式
1.未设置偏移量方向： 距离绝对定位较 保持在原位
• • 仅子块绝对定位，设一个偏移量 父块相对定位，子块绝对定位 仅设置1个子块
• 设置偏移量方向，按指定偏移量偏移 根据指定偏移量进行偏移 • 脱离了标准文档流 • 不会对相邻块造成影响
浮动属性 如何实现左右两侧的列交换位置？
clear属性
在CSS中，clear属性的作用是什么？
清除浮动影响，扩展盒子高度
清除浮动盒子对周围文字的影响时，应将clear:both设置 在文字相关的样式中
overflow属性
overflow属性
用于处理盒子中的内容溢出 属性值：关键字
使span标签块状显示
span{display:block;} div{display:inline;}
使div标签行内显示
解决IE6、IE7中浮动导致的双倍边距
在同时设置了float属性和margin属性（仅左右边 距）的元素中，设置display:inline;
position属性 为什么需要position属性
浮动属性 浮动法布局
运用float属性创建横向多列布局的特性 width属性结合overflow属性清除浮动 增加子层内容，结构不受影响 关键代码
清除浮动
#container{ width:760px; overflow:hidden; } #left{ float:left; } #right{ float:left; margin-left:20px; } 使垂直排列的块级元素横向排列 设置两个盒子之间的间距
第10章 网页样式（2）
理论部分
盒子模型
盒子模型
网页布局的基础 与生活中的盒子相似
纸盒
填充部分
盒内物品
纸盒外围间隙
盒子模型 盒子模型属性
边框(border)
元素内容
内边距(padding)
外边距(margin)
盒子模型
盒子模型平面结构图
盒子模型属性的共同点
顺时针分为：上右下左4 个方向 3个属性都可以分别设置 各个方向属性值
left
• 浮动至容器的最 左侧 • 直到接触容器为 止
right
• 浮动至容器的最 右侧 • 直到接触容器为 止
none
• 不浮动
语法
float:属性值;
浮动属性 浮动的特点
左浮动时，与之相邻的元素，会紧挨着其右侧排列 右浮动时，与之相邻的元素，会紧挨着其左侧排列
盒子-1右浮动 盒子-1左浮动
list-style
• 简写属性， 设置所有 分量样式
list-style-type
• 设置列表项标志 的类型
list-styleimage
• 将图像设置为列 表项标志
list-styleposition
• 设置列表中列表 项标志的位置
使用list-style-image属性设置列表项图标，会产生浏览 器兼容性问题，解决方法如下：
用于指定HTML标签的显示方式 属性值：关键字
属性值 block inline none 说明 将元素显示为块级元素，该元素前后会带有换行符 默认。元素会被显示为行内元素，该元素前后没有换行符 该元素不会被显示
语法
display:属性值;
display属性 display属性应用
块级元素与行内元素的互相转换 示例
盒子-2紧贴其左显示 盒子-2紧贴其右显示
浮动属性 浮动的特点
同时有左浮动和右浮动的元素时，与之相邻的元素，会填满两者 之间的间隙
浮动属性
浮动特性
使元素紧挨着容器左侧或右侧，相邻元素紧挨其显示
未设置尺寸的块级元素，设置了浮动之后，其尺寸会根据其内部 元素大小自适应
同时有左浮动和右浮动元素时，与其相邻的元素会填满两者之间 的间隙
标准文档流包括块级元素(block) 和行内元素(inline)
display属性的作用:指定HTML 标签的显示方式
<p>关于喜欢的理由，其实，很简单。西双版纳是 生我养我的故乡，那里有我至亲至爱的人，是我 无论浪迹何方，都会记得归去的乐土...</p> </body>
display属性 display属性
结合width属性
清除浮动影响 扩展盒子高度
关键代码
overቤተ መጻሕፍቲ ባይዱlow:hidden; width:100%;
演示示例：overflow属性
第19页/共69页
display属性 为什么需要display
<body>
按标签顺序排版—标准文档流
<h3>我最喜欢的城市</h3>
<ul> <li>西双版纳</li> <li>西安</li> <li>苏州</li> </ul>
3个属性都可以同时设置4
个方向属性值 3个属性都占据空间
盒子模型 盒子模型三维立体结构图
第二层
第一层
第五层 第四层
第三层
盒子模型属性 边框属性有几个分量属性？它们的作用分别是什么？
bordercolor
• 设置边框颜 色
borderwidth
• 设置边框粗 细
borderstyle
将list-style-type属性的值设为none 使用background属性为<li>标签设置背景图像
float属性 为什么需要float属性？
定位网页元素
定位[更多活动]
创建横向多列布局
横向三列布局
横向两列布局
浮动属性 float属性
定义元素的浮动方向 属性值：关键字