首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》24.6.1 首页布局与设计

关灯直达底部

手机站点和PC站点上的查看有区别。PC站点屏幕大,可容纳信息多,访问速度快;而手机站点屏幕小,可容纳信息少,一般还使用手指进行点击。这就决定了手机网站中的文字图片不能做得太细,内容也不宜过多。

根据手机屏幕高大于宽的特点,网站首页采用“吕”形布局设计,上部分为横幅部分,下部分为导航栏目区,导航栏目又分为3栏,每栏并排两个图标,如图24-23所示。这样页面简洁,给人以层次清晰感,并能更好地突出主要内容。

图24-23 首页布局

横幅部分使用幻灯轮播的方式,宣传口号,这样可以吸引访问者的注意,加强宣传效果。

导航栏目中主要有以下功能。

1)关于我们:用于介绍单位内部的组织架构等信息。

2)最新动态:提供最新的新闻、活动等信息内容的发布。

3)政策法规:公布最新的政策法规资料等信息。

4)安全常识:提供生产、生活常用的安全知识。

5)官方微博:链接到腾讯微博,查看最新发布的动态信息。

6)社区留言:链接到兴趣部落,提供和网友的互动功能。

下面把横幅内容放到一个盒子中,其中定义一个宽度为3倍图片宽度的列表,用来存放3张用于展示横幅的图片,并将3张图片设置为表格单元格元素,用于特效中的滑动。其代码如下。


<p >    <p >    <ul >            <li >                <a onclick="return false;">                    <img src="img/banner3.jpg"  >                </a>            </li>            <li >                <a onclick="return false;">                    <img src="img/banner2.jpg"  >                </a>            </li>            <li >                <a onclick="return false;">                    <img src="img/banner1.jpg"  >                </a>            </li>        </ul>        <ol>            <li></li>            <li></li>            <li></li>        </ol>    </p></p>  

为了同一时刻只显示一张图片,需要将其他部分的单元格图片隐藏起来,同时对所有的元素都做相应的处理。横幅盒子的样式控制代码如下。


.box_swipe{    overflow:hidden;    position:relative;}.box_swipe ul{    -webkit-padding-start: 0px;}.box_swipe>ol{    height:20px;    position: relative;    z-index:10;    margin-top:-25px;    text-align:right;    padding-right:15px;    background-color:rgba(0,0,0,0.3);}.box_swipe>ol>li{    display:inline-block;    margin:5px 0;    width:8px;    height:8px;    background-color:#757575;    border-radius: 8px;}.box_swipe>ol>li.on{    background-color:#ffffff;}  

导航栏目列表则存放6个内容项,每个内容项都包括链接、图片及文字说明,相应代码如下。


<ul>    <li>        <a href="aboutus.html">        <figure>            <p>            <img src="img/11f296bbc0f83cbde8c02784bc3c73fa.gif">            </p>            <figcaption>关于我们</figcaption>        </figure>        </a>    </li>    <li>        <a href="latest.html">        <figure>            <p>            <img src="img/908746f5f33374115b975b7a515781bd.png">            </p>            <figcaption>最新动态</figcaption>        </figure>        </a>    </li>    <li>        <a href="laws.html">        <figure>            <p>            <img src="img/34c38e577f5e7787337fea161a0d761a.jpg">            </p>            <figcaption>政策法规</figcaption>        </figure>        </a>    </li>    <li>        <a href="safe.html">        <figure>            <p>            <img src="img/f47eabd4255e84ab792d5fe5f8e86698.jpg">            </p>            <figcaption>安全常识</figcaption>        </figure>        </a>    </li>    <li>        <a href="http:// t.qq.com/doucube">        <figure>            <p>            <img src="img/f93306140828edaa5f825d7cd2f09f0f.jpg">            </p>            <figcaption>官方微博</figcaption>        </figure>        </a>    </li>    <li>        <a href="http:// wx.wsq.qq.com/182998484">        <figure>            <p>            <img src="img/991df18911fce16072ac94e206b89bea.jpg">            </p>            <figcaption>社区留言</figcaption>        </figure>        </a>    </li></ul> 

每个元素占用50%的宽度,这样就形成了一排两列的效果,最终所有项共组成3排。相应的样式控制代码如下。


.list_ul{    margin:10px 5px;    overflow:hidden;}.list_ul a{    color:#666;    display:block;    background:#fff;    border:1px solid #efefef;    border-radius:8px;    -webkit-box-shadow:1px 2px 1px rgba(0,0,0,0.3);    padding:10px 0;    margin:5px;}.list_ul figcaption{    line-height: 30px;}.list_ul figure>p{    height:60px;    overflow:hidden;}.list_ul li{    display:inline-block;    width:50%;    float:left;    text-align:center;    -webkit-box-sizing:border-box;}.list_ul li img{    max-width:52px;    max-height:63px;}  

上述代码的最终实现效果就是一个首页,如图24-23所示。