您现在的位置: 365建站网 > 建站教程 > 微信公众平台开发 > 24.6.4内容页设计与实现

24.6.4内容页设计与实现

此节有 121 人学习过     参与评论

内容页面的设计主要包括两种形式,一种是生活类的内容介绍页面,一种是新闻类的内容介绍页面。两种介绍均以图文并茂的形式展示。生活类的页面配上相应场景的图片,而新闻类的则搭配新闻现场的图片介绍。
内容页最终是一个图文形式的展示页,生成一个这样的页面内容即可。
生活类的页面核心代码实现如下:

<div class="banner">
    <img src="img/anquanchangshi.jpg">
</div>
<div class="cardexplain">
    <ul class="round">
    <li>
    <h2>防地震须知</h2>
    <div class="text">
(1)保持镇定,切勿离开处身地方。<br>
(2)躲在桌子或坚固结构物下寻求掩护。<br>
(3)远离窗户、玻璃隔板、架或有悬挂物件处。<br>
(4)地震时不要躲在楼梯底下。<br>
(5)准备应付更多次余震。<br>
(6)如您的房屋受到损坏,请立即通知管理处。<br>
(7)切勿散播谣言或夸大的报告。  
</div>
    </li>
    </ul>
</div>

新闻类的页面核心代码实现如下:

<section class="news_article">
    <header>
        <h3 style="font-size:18px;">区安监局开展以“防治职业病,职业要健康”为主题的《职业病防治法》宣传活动</h3>
        <small class="gray">2014.04.28</small>
    </header>
    <article>
        <p>&nbsp; &nbsp; &nbsp; &nbsp;区安全监管局在《职业病防治法》宣传周活动期间,以推进职业卫生基础建设和职业卫生管理示范企业创建为契机,突出以“防治职业病,职业要健康”为主题,开展了形式多样宣传活动。针对辖区粉尘职业危害较严重的情况,把尘肺病防治作为宣传重点,工作人员深入粉尘、有机溶剂危害较严重的机械加工、家具制作等企业,开展有针对性的宣传,切实维护劳动者的健康权益。活动期间,区安全监管局联合经开区安监局安排工作人员48人次,深入园区企业进行宣传。共印制了宣传横幅15条、宣传展板40块、职业卫生告知牌3000块、宣传单10000余份、答疑解惑120余人次。<br></p>
<p style="text-align:center;">
            <img src="img/5image008.jpg" alt="">
        </p>
        <p>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;本次宣传活动得到了湖南省职业病防治院的大力支持,红网和湖南安全与防灾杂志社的记者也到现场进行了宣传采访
        </p>
    </article>
</section>

可以看出,这些页面的实现方式其实比较简单,内容介绍页面的实现效果如图24-26所示。

图24-26 内容页实现效果
如果要实现内容在后台的发布,则一般需要用到框架,例如ThinkPHP,用于文章的保存及管理,同时还需要一个编辑器,比如百度UEditor,用于编辑文章。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (121人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------
微信公众平台开发目录