您現在的位置是:電腦技術吧?>? 故障問題 ??>??多列布局,多列等高布局??>??正文詳情

多列布局,多列等高布局

左冬卉2019-11-06 15:51:37 人圍觀
簡介css3flex多列布局當我用CSS寫了幾天的三列布局的時候,我突然想到了這樣一種方法,我覺得這太瘋狂了如果有什么問題,請給我一些建議當我需要編寫三列布局時,我通常選擇使用以下

幾天在用CSS寫三列布局的時候突然想到的這樣一個方法,這個想法自己都覺得有些瘋狂,如果其中有什么不對的地方請各位不吝指教。

當需要寫一個三列布局的時候,一般情況下我會選擇使用如下的DIV布局方式:

使用這樣的嵌套方式無疑可以使代碼出錯的概率減少很多,但同時這樣的布局也略顯復雜,對于后期的維護也略顯不便。

我們在布局導航時經常會使用到一個方法,那就是使用ul列表來進行布局,而導航可以形容為多列式的布局,既然如此,那么我們也就可以使用ul來進行頁面的多列布局。

這是一個固定寬度的布局,也就是說流動性不強,流動性的布局目前還沒有試驗過,等有時間了再試驗一下,下面貼上這個布局的代碼:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title使用UL進行多列布局/titlestyle type=text/css* {margin:0; padding:0;}body {width:100%;height:100%;background:#ddedfb;}#mainContent {width:600px;margin:10px auto;}#header,#footer {background:#8AC7FA;height:80px;clear:both;}#footer {clear:both;padding-top:10px;}#content {height:300px;margin:10px auto;}#content ul {list-style:none;height:100%;}#content ul li {width:150px;height:100%;background:#8AC7FA;float:left;}#content ul li#li2 {width:280px;margin:0 10px;}#content ul li#li2 ul li {width:270px;height:140px;margin:5px;background:#0581F0;}/style/headbodydiv id=mainContentdiv id=header這是頭部/divdiv id=contentulli這是左邊/lili id=li2ulli這是中間的上部/lili這是中間的下部/li/ul/lili這是右邊/li/ul/divdiv id=footer這是底部/div/div/body/html
這段代碼在IE7及FF3下都能正常顯示,其他瀏覽器未做測試,如果你有更好的方法不妨提出來。

版權聲明:本文由 左冬卉 整理編輯。

原標題:html多列布局,多列

轉載注明出處:http://www.dn9ww09s.icu/fault/11348.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本設置wifi 熱點,筆記本做wifi熱點設置

    筆記本設置wifi 熱點,筆記本做wifi熱點設置 相關圖片筆記本wifi怎么打開在21世紀,我相信每個人都非常熟悉WiFi,因為無論你去哪里都有WiFi不過,我不知道您是否知道如何設置WiFi熱點,而且筆記本設置WiFi熱點非常方便,可以用筆記本打開...

  • 企業命名參考,命名要求

    企業命名參考,命名要求 相關圖片商業綜合體命名參考它可以用于在XHTML中定義ID和類,主要用于在定義樣式時查看CSS因此,CSS命名僅供參考(1)頁面結構類容器:容器頁面標題:標題內容:內容/容器頁面正文:樓命名...

  • 顯示卡屬性怎么設置,怎么設置顯示屬性

    顯示卡屬性怎么設置,怎么設置顯示屬性 相關圖片電腦顯示屬性設置視頻卡作為計算機最基本的配置和最重要的附件之一,承擔著顯示圖形的輸出任務所以,可能會有很多朋友會有這樣一個問題,那就是,在哪里打開顯卡設置如何設置...

  • 手機用什么殺毒軟件比較好,手機殺毒軟件

    手機用什么殺毒軟件比較好,手機殺毒軟件 相關圖片360手機殺毒軟件手機殺毒軟件不僅可以保護手機的安全,還可以保護個人隱私那么哪個是最好的移動防病毒軟件呢現在有很多種移動殺毒軟件對于移動安全來說,如何選擇一款正確且易...

  • 網頁固定背景代碼,網頁背景透明代碼

    網頁固定背景代碼,網頁背景透明代碼 相關圖片html設置網頁背景圖片代碼網頁背景漸變是一種常用的效果下面使用的過濾器,當然在非ie中沒有效果。下面的電腦主機網小編分享一個CSS實現的頁面背景漸變效果代碼介紹,希望能給大...

  • 電腦沒聲音了怎么解決,電腦沒聲音一鍵恢復

    電腦沒聲音了怎么解決,電腦沒聲音一鍵恢復 相關圖片電腦靜音了怎么恢復聲音我們的大多數朋友都非常熟悉電腦的操作而一些用戶在使用電腦時會遇到電腦突然沒有聲音,聽不到音樂,不知道視頻中的人在說什么,也不能和別人的視頻聊...

  • 加快下載速度,如何加快下載速度

    加快下載速度,如何加快下載速度 相關圖片怎么讓手機下載速度變快關于[Dreamweaver skills],以下是Dreamweaver加快圖片下載速度的方法摘要,希望能給正在學習CSS的朋友一些幫助或建議如果網頁中圖片太逗游下載速度怎么加快...

  • usb連接電腦上網,怎么用usb連接電腦上網

    usb連接電腦上網,怎么用usb連接電腦上網 相關圖片電腦連接不上網絡我們現在上網越來越方便了移動和聯通的無線網絡已經覆蓋了許多領域但是當我們的電腦沒有網絡時,我們能用手機的流量來上網嗎答案是肯定的現在,小編會告訴你...

  • css樣式表的四種類型,三種css樣式表

    css樣式表的四種類型,三種css樣式表 相關圖片css四種樣式現在讓我們通過[介紹CSS]HTML來簡要介紹使用CSS樣式表的四種方法,希望能給您一些幫助或建議方法1:css1.htmlhtmlheadtitle內聯樣式(css樣式表規則...

  • 聯想筆記本怎么切換數字鍵盤,手提電腦數字鍵盤切換

    聯想筆記本怎么切換數字鍵盤,手提電腦數字鍵盤切換 相關圖片聯想筆記本小鍵盤切換隨著網絡的發展,筆記本的使用越來越廣泛它已成為工作和學習中不可缺少的必需品正因為如此,市場上的筆記本品牌越來越多在大學校園中,筆記本電腦的使用...

熱評文章

  • 臺式電腦什么配置好,中關村在線電腦組裝

    臺式電腦什么配置好,中關村在線電腦組裝 相關圖片電腦組裝無論是在家工作還是休閑,我們都已逐漸離不開電腦現在,選擇組裝這臺機器的用戶不在少數如何擁有一臺高配置的電腦是小白大多數人的煩惱,那么如何選擇一臺高配置的電...

  • nba2k,nba2k16

    nba2k,nba2k16 相關圖片nba2k下載Nba2k17手機版是一款籃球手機游戲科比退役了為了紀念科比,2k17將推出以科比為封面主題的傳奇收藏版,紀念這位老將的離世易建聯將再次回到NBA賽場,來到湖人nba2k20最新消息...

  • css邊框陰影,css邊框陰影效果

    css邊框陰影,css邊框陰影效果 相關圖片css陰影怎么做How to create multiple borders in CSS3: 0 0 0 2px 000, 0 0 0 3px 999, 0 0 0 9px#css圓形邊框...

  • bak文件查看器,微信bak文件查看器

    bak文件查看器,微信bak文件查看器 相關圖片什么軟件可以打開bak文件電腦上有很多文件格式,很多軟件都有自己的文件格式,比如文本文件的TXT,辦公文件的doc等等,有時候我們可以看到電腦上有一些后綴為Bak的文件,這些文件...

  • 指示器,舵角指示器

    指示器,舵角指示器 相關圖片技能指示器最近,我正在與我的團隊的小伙伴一起研究復雜的表單設計我碰巧看到這篇文章,很有啟發性所以我決定把它翻譯出來和你分享這是一篇在設計大型電子商務網站或復雜的在...

  • 電腦一直藍屏,電腦一直藍屏怎么辦

    電腦一直藍屏,電腦一直藍屏怎么辦 相關圖片電腦藍屏維修電腦對我們來說并不新鮮,甚至每個家庭都有一臺或多臺電腦可以用來玩游戲或工作但是,電腦使用很長時間后會出現一些問題,包括藍屏,這對一些需要使用電腦的人來...

  • cssrepeat,cssnorepeat

    cssrepeat,cssnorepeat 相關圖片css80px和0的作用是告訴你圖片在哪里默認情況下,如果不設置下面的數字,則圖片位于頁面的左上角,如下圖所示,第一個數字是x軸上的偏移量,即水平偏移量,正含義為正,translate ...

  • steam更新出錯,steam一直正在更新

    steam更新出錯,steam一直正在更新 相關圖片steam更新出現錯誤說到現在最大的游戲下載平臺,有必要提到steam但是,這個平臺經常需要更新更新程序。有時候玩家會遇到不成功的STEAM更新,這讓很多用戶非常苦惱。怎么辦現在,小...

  • css中text indent,html中indent

    css中text indent,html中indent 相關圖片css首行縮進段落縮進非常實用,用P標簽可以起到意想不到的效果CSS中段落縮進的定義是通過文本縮進來實現的其參數和用法如下:語法:文本縮進:允許值:長度或百分比初始值:0文本...

  • 如何安裝固態硬盤,安裝固態硬盤

    如何安裝固態硬盤,安裝固態硬盤 相關圖片臺式電腦固態硬盤怎么安裝固態硬盤和硬盤有什么區別固態硬盤的開機速度比普通硬盤快得多固態硬盤沒有成像,讀取延遲也很小因此,如果hdd仍然是固態的,它們就有優勢所以,一些...

關注微信

变脸官网查询