手機頁面製作

拿到設計圖使用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