文档源码 tv-wp.com

www.tv-wp.com.com | Wordpress中文视频教程文档源码

第6课 wordpress4.0制作网站分类图文列表
静态效果的源码：

html:
   <div class="tv_list">
    <ul> 
     <li ><span class="fr">2014-04-12</span>新闻标题新闻标题新闻标题新闻标题</li>
    <li ><span class="fr">2014-04-12</span>新闻标题新闻标题新闻标题新闻标题</li>
	<li ><span class="fr">2014-04-12</span>新闻标题新闻标题新闻标题新闻标题</li>
	<li ><span class="fr">2014-04-12</span>新闻标题新闻标题新闻标题新闻标题</li>
	<li ><span class="fr">2014-04-12</span>新闻标题新闻标题新闻标题新闻标题</li>
    </ul>
 </div>

------------------------------

<div class="tv_listmore">
    <ul> 
     <li ><a href="" class="img"><img src="grid.jpg" /></a>
	      <h4>新闻标题新闻标题新闻标题新闻标题</h4>
		  <p>新闻内容新闻内容新闻内容内容内容内容内容内容内容内容内容内容内容</p>
		  <p class="more"><a href="">更多>></a></p>
	 
	 </li>
    
<li ><a href="" class="img"><img src="grid.jpg" /></a>
	      <h4>新闻标题新闻标题新闻标题新闻标题</h4>
		  <p>新闻内容新闻内容新闻内容内容内容内容内容内容内容内容内容内容内容</p>
		  <p class="more"><a href="">更多>></a></p>
	 
	 </li>
	 <li ><a href="" class="img"><img src="grid.jpg" /></a>
	      <h4>新闻标题新闻标题新闻标题新闻标题</h4>
		  <p>新闻内容新闻内容新闻内容内容内容内容内容内容内容内容内容内容内容</p>
		  <p class="more"><a href="">更多>></a></p>
	 
	 </li>
    </ul>
 </div>
 
 
 ----------------------------------------

<div class="tv_grid">
    <ul> 
     <li ><a href="" class="img"><img src="grid.jpg" /></a>	      
		<a href="" class="title">标题标题标题标题</a>	 
	 </li>
 <li ><a href="" class="img"><img src="grid.jpg" /></a>	      
		<a href="" class="title">标题标题标题标题</a>	 
	 </li>
	  <li ><a href="" class="img"><img src="grid.jpg" /></a>	      
		<a href="" class="title">标题标题标题标题</a>	 
	 </li>
	  <li ><a href="" class="img"><img src="grid.jpg" /></a>	      
		<a href="" class="title">标题标题标题标题</a>	 
	 </li>
	  <li ><a href="" class="img"><img src="grid.jpg" /></a>	      
		<a href="" class="title">标题标题标题标题</a>	 
	 </li>
    </ul>
 </div>
 
	
	----------------
	css:
.fr{float:right; }
 
li{list-style: none;}
.tv_list {width: 600px; }
.tv_list *{padding:0; margin:0;}
.tv_list li{height: 25px; line-height:25px;overflow:hidden;  }

.tv_listmore {width: 600px; }
.tv_listmore *{padding:0; margin:0;font-size:14px; line-height:20px; }
.tv_listmore li{padding:10px;margin-bottom:10px;height: 120px;   }
.tv_listmore li .img{position:absolute; }
.tv_listmore li p,.tv_listmore li h4{padding-left:160px}
.tv_listmore li .more{text-align:right;  }

.tv_grid {width: 600px; }
.tv_grid *{padding:0; margin:0;font-size:14px; line-height:20px; }
.tv_grid li{float:left; display:inline; width: 150px;height: 150px;  }
.tv_grid li .title{text-align:center; padding:5px;display:block;text-decoration:none;color:blue  }

power by www.tv-wp.com 欢迎加入wordpress主题会员

www.tv-wp.com.com | Wordpress中文视频教程 文档源码

www.tv-wp.com.com | Wordpress中文视频教程文档源码