网页设计与制作5

---

盒子模型

<div>与<span>标记
1.

标记
定义

<div> 可定义文档中的分区或节（division/section）。`<div>` 标签可以把文档分割为独立的、不同的部分。
用法

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。
注：
a.

大多数的HTML标记都可以嵌套在<div>

```css
标记中，<div>中还可以嵌套多层<div>
b.<div>标记最大的意义在于和浮动属性float配合，实现网页的布局
c.<div>可以替代块级元素如<h>、<p>
2.<span>标记
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

(4)两者区别

```css
在使用CSS排版的页面中，<div>与<span>是两个常用的标记。利用这两个标记，加上CSS对其式样的控制，可以很方便的实现各种效果。
<div>与<span>标记的区别在于<div>是一个块级（block-level）元素，它周围的元素会自动换行，而<span>仅仅是一个行内元素（inline-elements），在它的前后不会自动换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用<span>元素。
此外，<span>标记可以包含于<div>标记之中，成为<div>标记的子元素，反之则不成立。

元素的转换
display属性对元素的类型进行转换
inline:此元素将显示为行内元素（行内元素默认的display属性值）
block:此元素将显示为块元素（块元素默认的display属性值）
inline-block:此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但该元素不能独占一行
none：此元素将被屏蔽，不显示，也不占页面空间，相当于该元素不存在
块元素垂直外边距的合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top
实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外边距的合并（margin 塌陷现象）
解决办法：可以给其中的一个元素设置垂直方向上的 marign 值来解决这种问题
嵌套块元素垂直外边距的合并现象
对于两个嵌套关系的块元素，如果父元素没有上内边距（padding）或边框（border），父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
需要注意的是如果只给子元素在垂直方向上设置外边距，子级元素和父级元素在垂直方向上都会移动
解决办法：为父元素设置上边框；为父元素设置上内边距；为父元素设置 overflow:hidden 样式属性
也可让元素脱离标准文档流，例如：浮动、固定、绝对定位等
阶段案例-----制作音乐盒
列表标记

无序列表ul

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

</ul>
1
符号样式：disc、circle、square、none
5.1.2有序列表ol

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

</ol>
1

5.1.3定义列表dl

<dl>
1
`<dt>`定义列表项</dt>
`<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
...
1
2
3
4
5
6
7
</dl>
1
<dd></dd>用于描述<dt></dt>，<dt>和<dd>是同级标签。不能嵌套在对方里面。
<dl><dt><dd>三个必须组合使用。

有序列表的一些属性如下：

列表的嵌套应用
CSS控制列表样式
list-style-type属性

list-style-image属性
其取值为图像的url
list-style-position属性
inside：列表项目符号位于列表文本内
outside：列表项目符号位于列表文本外
list-style属性
list-style：列表项目符号 列表项目符号的位置 列表项目符号;
超链接标记
创建超链接

<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控制链接文本