Blogger Information
Blog 34
fans 0
comment 0
visits 26609
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图文混排简单案例
罗盼的博客
Original
931 people have browsed it

实例

<!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展示。

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments