masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > teks badan

HTML布局_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:18:38
asal
1427 orang telah melayarinya

一、使用

元素布局 
<!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>
Salin selepas log masuk


二、使用

元素布局

<!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>
Salin selepas log masuk



Label berkaitan：
susun atur html
sumber：php.cn
Artikel sebelumnya：class命名的时候 item-group和item_group有什么区别？这里面有没有什么讲究？_html/css_WEB-ITnose Artikel seterusnya：css渐变/背景_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Apl React Saya tidak akan dimuatkan selepas mengubah suai tetapan proxy_pass nginx Saya mempunyai backend dan nginx ReactappNodeJS. Saya telah memperoleh sijil dan memasangn...
daripada 2024-04-05 11:53:10
0
1
316
Muat semula paksa adalah akibat daripada mengakses laluan tidak ditentukan atau halaman ralat dalam Next.js Mengakses laluan atau halaman ralat yang tidak ditentukan menyebabkan Next.js melakukan mu...
daripada 2024-04-05 08:32:46
0
1
400
protokol kotak dalam susun atur grid dalam css Saya mahu dua kotak pertama naik dengan lebar maksimum dan kotak kedua turun dengan lebar ...
daripada 2024-04-03 16:36:04
0
2
334
Buat susun atur kad yang pelbagai menggunakan grid tunggal atau Flex: panduan praktikal Saya cuba membuat susun atur kad responsif seperti dalam gambar. Apa yang saya lakukan pad...
daripada 2024-04-02 21:07:36
0
2
377
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved