手机站点和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所示。