实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<style>
.news img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
.title {
font-weight: bolder;
line-height: 12px;
}
.writer{
font-size: 12px;
line-height: 12px;
}
.news a{
text-decoration: none;
}
.news ul li{
list-style: none;
margin-top:40px;
width: 1000px;
}
.news ul li:hover{
background-color:lightgrey;
}
</style>
<title>图文混排</title>
</head>
<body>
<div class="news">
<ul>
<li><a href="http://news.ifeng.com/a/20180820/59894446_0.shtml?_zbs_firefox">
<img src="http://mybloger.com/3.gif"/>
<p class="title">《住建部再约谈5城：海口三亚房价涨幅前三》</p>
<p class="writer">发布人：马上升腾 浏览量：15200 日期：2018-08-20</p>
<p class="substance">据《人民日报》报道，8月17日，住房城乡建设部约谈了海口、三亚、烟台、宜昌、扬州五市政府主要负责同志。</p>
</a>
</li>
<li><a href="http://news.ifeng.com/a/20180816/59855625_0.shtml?_zbs_firefox#p=1">
<img src="http://mybloger.com/4.jpg"/>
<p class="title">《福建泉州湾开渔日》</p>
<p class="writer">发布人:人民日报 浏览量：2259 日期：2018-08-20</p>
<p class="substance">福建泉州，为期数月的福建沿海伏季休渔期正式结束，也是拖网渔船正式开海的时间。</p>
</a>
</li>
<li><a href="http://sports.ifeng.com/a/20180820/59895334_0.shtml?_zbs_firefox#p=1">
<img src="http://mybloger.com/5.jpg"/>
<p class="title">《历史第一人！德约2-0胜费德勒 包揽全部9站冠军》</p>
<p class="writer">发布人:和尚道士 浏览量：57980 日期：2018-08-20</p>
<p class="substance">2018年ATP辛辛那提网球大师赛男单决赛：德约科维奇2：0胜费德勒，小德集齐九站冠军成历史第一人。</p>
</a>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
感悟：HTML图文混排，在网站中非常的常见，本文中以一个小小的demo展示。