在網(wǎng)頁設(shè)計(jì)的領(lǐng)域，對(duì)于一些簡(jiǎn)單實(shí)用的頁面設(shè)計(jì)，往往是經(jīng)過時(shí)間的遷移仍然不會(huì)被淘汰，而圖文混搭式的cms頁面設(shè)計(jì)就是其中之一。之前就有使用無憂php虛擬主機(jī)的客戶聯(lián)系到無憂主機(jī)小編我，想要讓小編我?guī)兔υ趀mlog博客程序里設(shè)置一款簡(jiǎn)單的圖文混搭cms模板。所以下面無憂主機(jī)小編就來詳細(xì)介紹一下實(shí)現(xiàn)的方法。 首先我們找到模板文件log_list.php文件，然后用網(wǎng)頁編輯工具將其打開，修改兩處代碼實(shí)現(xiàn)縮略圖和摘要的效果，先找到下面的這一段代碼：

<?php foreach($logs as $value):?>

然后將其替換為下面的這一段代碼：

<?php foreach($logs as $value): 
preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $value['log_description'], $img);
$imgext = !empty($img[1]) ? $img[1][0] : '';
preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $value['content'], $img);
$imgsrc = !empty($img[1]) ? $img[1][0] : ''.TEMPLATE_URL.'/images/thumb.jpg';?>

接著找到下面的這一段代碼：

<?php echo $value['log_description']; ?>
<p class="tag"><?php blog_tag($value['logid']); ?></p>

并將其替換成下面的這一段代碼：

<div class="postinfo">
<a href="<?php echo $value['log_url']; ?>" title="<?php echo $value['log_title']; ?>">
<img title="<?php echo $value['log_title']; ?>" src="<?php if($imgext):{ echo $imgext;} 
else:{ echo $imgsrc;} endif;?>" alt="<?php echo $value['log_title']; ?>" target="_blank"></a>
<?php echo extractHtmlData($value['content'],200);?>
</div>

上面這些代碼的修改主要是完成圖文混搭式的頁面大體效果，下面還需要通過css樣式的設(shè)置進(jìn)一步完成頁面的布局和排版。 接下來我們找到main.css文件將其打開，在“#contentleft .count{ text-align:right; font-size:12px;}”這一行代碼的下面添加兩個(gè)屬性，用來定義class標(biāo)簽的postinfo屬性，以及postinfo底下的圖片的屬性：

#contentleft .postinfo{margin:1px;overflow: hidden;}
#contentleft .postinfo img{float:left; width:160px; height:100px;margin-right:6px}

然后刪除“

#contentleft .tag {color:#A97965; font-size:12px; margin:0px 0px 0px 0px;}

”這行代碼，最后保存數(shù)好據(jù)，在網(wǎng)站后臺(tái)更新一下緩存就可以實(shí)現(xiàn)簡(jiǎn)單的圖文混搭cms模板效果了。 無憂主機(jī)相關(guān)文章推薦閱讀： EMLOG怎么控制側(cè)邊欄日志標(biāo)題字?jǐn)?shù)的方法 DOCCMS常用的標(biāo)簽介紹 DOCCMS( 稻殼CMS)怎么把圖片上傳的限制調(diào)節(jié)到更大的

本文地址：http://www.gle-technology.com/others/21534.html

上一篇: emlog淺談靜態(tài)化插件功能和使用方法
下一篇: ecshop程序在網(wǎng)站后臺(tái)刪除后的商品還可以還原嗎