pp电子

首先
，，我们来看这个效果图：

这也是在网站上很是见的一种效果。。。。剖析一下
，，主要是包括了文章的问题
，，图片及文章简介内容。。。。那么我们看若是用html来实现是怎么个实现方式呢？？？就是说若是只把这种效果做成静态模板是怎么实现的呢？？？

首先界说一个框架
，，然后先将问题写出来
，，再分下半部份左边图片和右边的文章简介写出来。。。。大致代码如下：

<div class="tpw">

   <h2><a href="#">歼15已举行地面滑跃腾飞试验</a></h2>

    <div class="q_tpm">

         <a class="pic" href="#" target="_blank"><img alt="" src="images/59633460.jpg" name="page_cnt_1" /></a>

            <p class="intro">歼15已于去年完成了首次陆上模拟滑跃腾飞…<a href="#" target="_blank">[详细]</a></p>

 </div>

</div>

不加任何CSS样式控制的情形
，，我们看到的效果,如下图：

我们为了能使它跟我们要的效果图一样
，，就要界说CSS来控制
，，样式如下：

<style>

.tpw{width:300px; }

.tpw h2{ font-size:14px; font-weight:bold;}

.tpw h2 a{ color:#369;}

.tpw h2 :hover{ color:#CC0000;text-decoration:none;}

.tpw .q_tpm{ padding:5px;}

.tpw .q_tpm a.pic{width:100px; float:left;}

.tpw .q_tpm p.intro{width:180px; float:right;}

.tpw .q_tpm p a{ color:#ff3300;}

.tpw .q_tpm p a:hover{text-decoration:none;}

</style>

接下来就是怎样将模板绑定到系统后台后通过标签的形式来挪用这种效果。。。。

和文章列表标签一样
，，主要多了挪用一个文章图片和简介。。。。

建设新标签
，，输入标署名称选择该标签要挪用的内容归属的模子和栏目
，，标签循环体中我们将以上html代码复制上去
，，如下图：

接着我们将这些假链接和问题
，，图片
，，内容简介换为标签字段即可。。。。设置后如下图所示：

生涯标签设置后回到模板内里将静态部份替换为标签
，，如下图：

刷新网页
，，我们看到最终效果如下图所示：