站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
KesionCMS V8/图片文章标签
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
{{KesionCMS V8 top}} 首先,我们来看这个效果图: [[Image:V8tpwz1.png|center]] 这也是在[[网站]]上非常见的一种效果。分析一下,主要是包括了文章的标题,图片及文章简介内容。那么我们看如果用[[html]]来实现是怎么个实现方式呢?就是说如果只把这种效果做成静态[[模板]]是怎么实现的呢? 首先定义一个框架,然后先将标题写出来,再分下半部份左边图片和右边的文章简介写出来。大致代码如下: <pre> <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> </pre> 不加任何[[CSS]]样式控制的情况,我们看到的效果,如下图: [[Image:V8tpwz2.png|center]] 我们为了能使它跟我们要的效果图一样,就要定义CSS来控制,样式如下: <pre> <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> </pre> 接下来就是如何将模板绑定到系统后台后通过标签的形式来调用这种效果。 和文章列表标签一样,主要多了调用一个文章图片和简介。 创建新标签,输入标签名称选择该标签要调用的内容归属的模型和栏目,标签循环体中我们将以上html代码复制上去,如下图: [[Image:V8tpwz3.png|center|900px]] 接着我们将这些假[[链接]]和标题,图片,内容简介换为标签字段即可。设置后如下图所示: [[Image:V8tpwz4.png|center|900px]] 保存标签设置后回到模板里面将静态部份替换为标签,如下图: [[Image:V8tpwz5.png|center]] 刷新网页,我们看到最终效果如下图所示: [[Image:V8tpwz6.png|center]] == 参考来源 == *http://www.kesion.com/help/ {{KesionCMS V8}} [[category:KesionCMS V8使用手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:KesionCMS V8
(
编辑
)
模板:KesionCMS V8 top
(
编辑
)