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

寬度為設備寬度，初始化縮放比為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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com