实例
运用已学的一些标签和css样式，进行简单的页面布局。主要用到了文本和图片标签，文本样式控制属性等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重磅新闻</title>
<style type="text/css">
div {
width: 600px;
margin: auto;
text-align: center;
}
h4, p {
text-align: left;
}
.left {
display: inline-block;
text-align: left;
}
span {
text-align: left;
}
</style>
</head>
<body>
<div>
<h2 align="left">黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h2>
<span class="left">2015-08-18 来源搜狐娱乐</span>
<a href="">黄小明</a>
<h4>原标题：黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h4>
<img src="../images/pao.jpg" width="600" alt="">
<p>黄小明（资料图）</p>
<span class="left">(来源：财新报)</span>
<p>1、普通文档流
即就是根据块级元素的标签在HTML里的顺序，从上至下，依次排开。行内元素在一行中水平排列的。
行元素（行内元素）:在水平方向上修改水品尺寸(padding，margin，border)，能产生相应的效果，垂直方向上对行元素的高度是毫无影响的。
因此，行内元素直接定义width和height是没有意义的，行元素的宽高是靠内容撑起来的。
但是，可以通过设置line-height，来规定行元素的高度；
同样，可以通过对行元素设置display属性，转化为块元素，display：block</p>
<p>1、普通文档流
即就是根据块级元素的标签在HTML里的顺序，从上至下，依次排开。行内元素在一行中水平排列的。
行元素（行内元素）:在水平方向上修改水品尺寸(padding，margin，border)，能产生相应的效果，垂直方向上对行元素的高度是毫无影响的。
因此，行内元素直接定义width和height是没有意义的，行元素的宽高是靠内容撑起来的。
但是，可以通过设置line-height，来规定行元素的高度；</p>
<p>一大堆文字</p>
<p>一大堆文字</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![O}6)[FHOYLHXE6W$P]JU$NA.png](https://img.php.cn//upload/image/563/507/904/1534687692326092.png "1534687692326092.png")
总结：文本样式是不是都是包裹在块元素里面进行的，比如直接sapn然后属性控制是不行的？得空了多试下，对后面布局也可以加深理解。上面的简单布局还没有达到预期效果
