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

HTML布局_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:18:38
原創
1454 人瀏覽過

一、使用

元素布局 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <div id="container">        <div id="heading">头部</div>        <div id="content_menu">内容菜单</div>        <div id="content_body">内容主体</div>        <div id="footing">底部</div>    </div></body></html>
登入後複製


二、使用

元素布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>table布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <table width="100%" height="950px" style="background-color: darkgray">        <tr>            <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>        </tr>        <tr>            <td width="30%" height="80%" style="background-color:blue">左菜单</td>            <td width="70%" height="80%" style="background-color:blueviolet">主体</td>        </tr>        <tr>            <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>        </tr>    </table></body></html>
登入後複製



相關標籤：
html佈局
來源：php.cn
上一篇：class命名的时候 item-group和item_group有什么区别？这里面有没有什么讲究？_html/css_WEB-ITnose 下一篇：css渐变/背景_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用網格建立此特定設計：逐步指南 我正在嘗試創建一個類似於此圖像的佈局，我嘗試過使用此網格但無法實​​現。 <ulclass="container"><liclass=&quo...
來自於 2024-04-06 20:29:08
0
2
492
修改 nginx proxy_pass 設定後我的 React 應用程式無法載入 我有ReactappNodeJS後端和nginx。我已經獲得證書並透過Certbot安裝它。我的應用程式發出獲取和發布請求，但為此我需要設定proxy_pass設定。我的伺服器區塊...
來自於 2024-04-05 11:53:10
0
1
316
強制刷新是Next.js中存取未定義路徑或錯誤頁面的後果 存取未定義的路徑或錯誤頁面會導致Next.js進行硬刷新，從而導致我的上下文回到預設狀態（即儲存在userProfile狀態變數中的值變為null）我有一個佈局，使用{stuctu...
來自於 2024-04-05 08:32:46
0
1
400
css中網格佈局中的盒子協議 我希望前兩個框以最大寬度向上，第二個框以最大寬度向下，這是程式碼。這是CSS程式碼：/*StartServices*/.services{padding-top:var(--sec...
來自於 2024-04-03 16:36:04
0
2
334
使用單一網格或 Flex 建立多樣化的卡片佈局：實用指南 我正在嘗試製作如圖所示的響應式卡片佈局。目前我正在做的是分別為電腦、平板電腦和行動裝置建立佈局。然後在media查詢的幫助下，我將其他兩個視圖的顯示屬性設定為display:non...
來自於 2024-04-02 21:07:36
0
2
377
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板