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