手機頁面製作

標籤：

拿到設計圖使用markman標好尺寸、字型大小和顏色等，但是是什麼字型我還不知道如何判斷，估計還得問設計師吧！

這是一張手機端的html5網頁，一般考慮適應webkit核心，還有就是需要設定meta標記防止縮放、自適應等，代碼如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

寬度為裝置寬度，初始化縮放比為1，最小縮放比為1，不能縮放。

由於看到背景顏色不是白色，所以設定body css樣式的background-color屬性讓背景整體統一，而且要考慮到有些瀏覽器自動給body增加margin值，代碼如下：

        body {            background-color: #f2f2f2;            margin: 0;        }

 公司標題為垂直水平置中:

1、設定text-align為center；

2、設定line-height與div的height同高度。

距離文檔頂部留有間隙10px，使用：

margin-top:10px;

主要資訊使用ul li布局，右邊具體資訊使用右浮動顯示：

            float: right;            margin-right: 14px;

置中的話因為都是文字，所以統一使用line-height和height等高。

下面的其他資訊由於存在圖片，之前一直想用img實現，但發現垂直置中對齊存在很多問題，後來換了個方案，直接用div設定背景圖片的方式解決。

考慮到這些資訊條存在點擊效果，這裡好好想了margin-left和padding-left發現，如果使用margin-left的li點擊效果只是右半部分有點擊效果，左邊小部分由於位移而顏色並沒有變，這並不是我們想要的效果。

於是還是使用了padding-left 的li,最後再在li中增加div來設定底部的邊框，具體代碼如下:

        .other-info-list>li:not(:last-child)>div {            border-bottom: 1px solid #f2f2f2;        }

:not(:last-child)是出於細微美觀的考慮的，希望最後一個最好不要有這個邊框。

==========割：github代碼===========

https://github.com/sisilai/pywork

手機頁面製作