社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > DIV+CSS布局示例_html/css_WEB-ITnose

DIV+CSS布局示例_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布： 2016-06-24 12:30:40
原創
1168 人瀏覽過

第一种:左菜单右边内容自动变宽的布局

Code

Code


    

    
banner

    
nav

    

    

    

    

    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符v


再宽也不会自动换行了

    

    

    

    menu
    

    

       

    foot
    

    

 

第二种，页宽度固定，分栏显示内容

 

Code


    

    

    
header

    
banner

    

    

    

    

    
Left

    

    

    

    Right
    

    

    

    
Right

    

    

    

    
    

 

 

相關標籤：
DIV+CSS布局示例
來源：php.cn
上一篇：纯DIV+CSS实现圆角！_html/css_WEB-ITnose 下一篇：div css 常用技巧_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用單一網格或 Flex 建立多樣化的卡片佈局：實用指南 我正在嘗試製作如圖所示的響應式卡片佈局。目前我正在做的是分別為電腦、平板電腦和行動裝置建立佈局。然後在media查詢的幫助下，我將其他兩個視圖的顯示屬性設定為display:non...
來自於 2024-04-02 21:07:36
0
2
377
嘗試溢位 HTML <pre><code> 標籤而非換行時，Flex 間距會被破壞 我將CSS應用到precode選擇器，以便製作樣式程式碼區塊，就像您在GitHub或其他地方看到的那樣。我使用Flexbox進行佈局，並且在“框”div內並排有兩個“面板”div，...
來自於 2024-04-01 12:22:06
0
1
296
CSS 可以顯示網格線嗎？ 我開始學習CSS的網格佈局。在理想的情況下，我將能夠設置一個div多個網格框，並將我的元素精確地放置在其中，在需要時提供疊加（有點像在Illustrator中使用粘在網格上）。如果...
來自於 2024-03-31 20:38:21
0
2
395
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板