手機(jī)頁(yè)面制作_html/css

這是一張手機(jī)端的html5網(wǎng)頁(yè)，一般考慮適應(yīng)webkit內(nèi)核，還有就是需要設(shè)置meta標(biāo)記防止縮放、自適應(yīng)等，代碼如下：

寬度為設(shè)備寬度，初始化縮放比為1，最小縮放比為1，不能縮放。

由于看到背景顏色不是白色，所以設(shè)置body css樣式的background-color屬性讓背景整體統(tǒng)一，而且要考慮到有些瀏覽器自動(dòng)給body增加margin值，代碼如下：

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

公司標(biāo)題為垂直水平居中:

1、設(shè)置text-align為center；

2、設(shè)置line-height與div的height同高度。

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

margin-top:10px;

主要信息使用ul li布局，右邊具體信息使用右浮動(dòng)顯示：

 float: right; margin-right: 14px;

居中的話因?yàn)槎际俏淖郑越y(tǒng)一使用line-height和height等高。

下面的其他信息由于存在圖片，之前一直想用img實(shí)現(xiàn)，但發(fā)現(xiàn)垂直居中對(duì)齊存在很多問(wèn)題，后來(lái)?yè)Q了個(gè)方案，直接用div設(shè)置背景圖片的方式解決。

考慮到這些信息條存在點(diǎn)擊效果，這里好好想了margin-left和padding-left發(fā)現(xiàn)，如果使用margin-left的li點(diǎn)擊效果只是右半部分有點(diǎn)擊效果，左邊小部分由于偏移而顏色并沒(méi)有變，這并不是我們想要的效果。

于是還是使用了padding-left 的li,最后再在li中增加div來(lái)設(shè)置底部的邊框，具體代碼如下:

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

:not(:last-child)是出于細(xì)微美觀的考慮的，希望最后一個(gè)最好不要有這個(gè)邊框。

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

https://github.com/sisilai/pywork

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com