新闻文本案例

$$新闻文本案例$$

3.2.1 div样式布局

文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。

在head标签中，通过style标签加入样式。

基本格式：

格式:
<style>
    标签名{
        属性名:属性值;
    }
</style>

多个属性名格式：

<style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

07-新闻文本案例-效果演示和分析

08-新闻文本案例-样式控制演示

div的多样式：

一个属性名可以含有多个值，同时设置多样式。

格式:

<style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
</style>

【提示】

为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。

09-新闻文本案例-文本标签演示

3.2.2 文本标签

使用文本内容标签设置文字基本样式。

标签名	作用
p	表示文本的一个段落
h	表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线
li	表示列表里的条目。
ul	表示一个无序列表，可含多个元素，无编号显示。
ol	表示一个有序列表，通常渲染为有带编号的列表
em	表示文本着重，一般用斜体显示
strong	表示文本重要，一般用粗体显示
font	表示字体，可以设置样式（已过时）
i	表示斜体
b	表示加粗文本

重点演示li的不换行效果：

li{    display: inline; 		// 内联样式,有宽度,无高度}
li{    display: inline-block; 	// 内联样式,有宽度,有高度}

3.3 使用标签

1. 简单布局，使用div标签。
2. 文本样式，使用基本文本标签。

10-新闻文本案例-案例实现

实现步骤

1. 创建初始页面。
2. 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
3. 编辑正文。
   1. 使用h1标签加入标题。
   2. 使用em标签加入作者信息。
   3. 使用hr标签加入分割线。
   4. 使用h3标签加入副标题。
   5. 使用p标签加入正文。
   6. 使用ol标签，li标签加入列表信息。
   7. 使用strong标签，加入文字强调效果。