网页设计05

第四章 盒子模型

4.3.2 <div>与<span>标记
1.<div>标记
（1）定义
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
（2）用法
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
(3)注：
a.大多数的HTML标记都可以嵌套在

标记中， <div>中还可以嵌套多层 <div>
b. <div>标记最大的意义在于和浮动属性float配合，实现网页的布局
c. <div>可以替代块级元素如 <h>、 <p>
2. <span>标记
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
(4)两者区别
在使用CSS排版的页面中， <div>与 <span>是两个常用的标记。利用这两个标记，加上CSS对其式样的控制，可以很方便的实现各种效果。
<div>与 <span>标记的区别在于 <div>是一个块级（block-level）元素，它周围的元素会自动换行，而 <span>仅仅是一个行内元素（inline-elements），在它的前后不会自动换行。 <span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用 <span>元素。
此外， <span>标记可以包含于 <div>标记之中，成为 <div>标记的子元素，反之则不成立。
4.3.3元素的转换
display属性对元素的类型进行转换
inline:此元素将显示为行内元素（行内元素默认的display属性值）
block:此元素将显示为块元素（块元素默认的display属性值）
inline-block:此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但该元素不能独占一行
none：此元素将被屏蔽，不显示，也不占页面空间，相当于该元素不存在
4.4块元素垂直外边距的合并
4.4.1相邻块元素垂直外边距的合并
当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top
实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外边距的合并（margin 塌陷现象）
解决办法：可以给其中的一个元素设置垂直方向上的 marign 值来解决这种问题
4.4.2 嵌套块元素垂直外边距的合并现象
对于两个嵌套关系的块元素，如果父元素没有上内边距（padding）或边框（border），父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
需要注意的是如果只给子元素在垂直方向上设置外边距，子级元素和父级元素在垂直方向上都会移动
解决办法：为父元素设置上边框；为父元素设置上内边距；为父元素设置 overflow:hidden 样式属性
也可让元素脱离标准文档流，例如：浮动、固定、绝对定位等
4.5阶段案例-----制作音乐盒

第五章 列表标记

5.1.1无序列表ul

<ul>

<li>无序标签</li>
<li>无序标签</li>
<li>无序标签</li>

</ul>

符号样式：disc、circle、square、none
5.1.2有序列表ol

 <ol>

<li>有序标签</li>
<li>有序标签</li>
<li>有序标签</li>

</ol>

5.1.3定义列表dl

<dl>

`<dt>`定义列表项</dt>
`<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
...

</dl>

<dd></dd>用于描述<dt></dt>，<dt>和<dd>是同级标签。不能嵌套在对方里面。
<dl><dt><dd>三个必须组合使用。
5.1.4列表的嵌套应用
5.2CSS控制列表样式
5.2.1 list-style-type属性

5.2.2list-style-image属性
其取值为图像的url
5.2.3list-style-position属性
inside：列表项目符号位于列表文本内
outside：列表项目符号位于列表文本外
5.2.4list-style属性
list-style：列表项目符号 列表项目符号的位置 列表项目符号;
5.3超链接标记
5.3.1创建超链接
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于制定目标连接的url地址，当为标记应用href时它就具有的超链接的功能

target：用于指定连接页面的打开方式，其取值有-self和-blank两种。

5.3.2锚点连接
为了提高信息的检索速度，HTML提供了一种特殊的连接–锚点链接

5.4链接伪类控制超链接

值得一提的是，在实际工作中，通常只需要使用 a:link a:visited a:hover 定义未访问，访问后，和鼠标悬停时的链接样式。

5.5制作新闻列表

5.5.1分析效果图

1.结构分析
2.样式分析
5.5.2制作页面结构

5.5.3定义css样式
1.定义基础样式
2.整体控制新闻列表
3.制作标题部分
4.整体控制列表内容
5.控制列表项
6.css控制链接文本