Correction status:Uncorrected
Teacher's comments:
<!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展示。