主頁(yè) > 知識(shí)庫(kù) > 非常好的CSS基本布局16例

非常好的CSS基本布局16例

熱門(mén)標(biāo)簽:呼叫中心市場(chǎng)需求 銀行業(yè)務(wù) 服務(wù)器配置 網(wǎng)站文章發(fā)布 檢查注冊(cè)表項(xiàng) 智能手機(jī) 鐵路電話系統(tǒng) 美圖手機(jī)

單行單列

單行單列1:采用float浮在左上角,固定寬度。

#content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

單行單列2:固定在左上角,固定寬度,采用的是絕對(duì)(absolute)定位。

#content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

單行單列3:固定在左上角,不固定寬度,采用百分比(%)定義寬度來(lái)自適應(yīng)頁(yè)面。

單行單列4(推薦):固定寬度,采用在body樣式中定義居中屬性(text-align: center;)實(shí)現(xiàn)適應(yīng)頁(yè)面自動(dòng)居中。

單行兩列

單行兩列1:兩列都固定寬度。第一列浮在左上角,第二列浮在第一列右邊。

單行兩列2:兩列都百分比寬度,但不滿屏。第一列固定在左上角,第二列浮在第一列右邊。

單行兩列3:兩列都百分比寬度,滿屏。兩列都采用絕對(duì)定位。

單行兩列4:兩列都百分比寬度,滿屏。第一列浮在左上角,第二列浮在右上角。

單行兩列5:兩列都百分比寬度,滿屏。第一列浮在左上角,第二列浮在第一列右邊。

單行三列

單行三列1:左右列都絕對(duì)定位(右列定位在右上)。左列和右列固定寬度,中間列自適應(yīng)頁(yè)面。

單行三列2:左列定位在左上,右列定位在右上,中間列浮在左列右面。左列和右列固定寬度,中間列自適應(yīng)頁(yè)面。

單行三列3:三列都絕對(duì)定位。左列和右列固定寬度,中間列根據(jù)內(nèi)容自適應(yīng)。

單行三列4(推薦):類似樣式2,只是將margin: 20px屬性增加在body樣式中,解決了中間列在Netscape6.0中置頂?shù)膯?wèn)題。

單行三列5:左右列絕對(duì)定位,中間列自適應(yīng)。寬度滿屏。

頂行三列

頂行三列1(推薦):頂行自適應(yīng)頁(yè)面寬度。左右列絕對(duì)定位,中間列自適應(yīng)頁(yè)面。

  • 頂行三列2:寬度滿屏

標(biāo)簽:河南 沈陽(yáng) 滄州 長(zhǎng)治 新疆 上海 紅河 樂(lè)山

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《非常好的CSS基本布局16例》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266