手機站點和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所示。