HTML布局_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

HTML布局_html/css_WEB-ITnose

Jun 24, 2016 am 11:18 AM

susun atur html

一、使用

元素布局
1
<!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

二、使用
元素布局
1
<!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

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 Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7128

9

Tutorial Java

1534

14

Tutorial Laravel

1256

25

Tutorial PHP

1205

29

Tutorial CakePHP

1153

46

Tunjukkan Lagi

Related knowledge

Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS Oct 20, 2023 pm 03:46 PM
Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS

Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS Oct 16, 2023 am 09:07 AM
Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS

Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur Oct 27, 2023 pm 03:24 PM
Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur

Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS Oct 18, 2023 am 08:42 AM
Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS

Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS Oct 20, 2023 am 09:54 AM
Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS

Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS Oct 25, 2023 am 10:42 AM
Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS

Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman Oct 19, 2023 am 08:40 AM
Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman

Cara membuat reka letak pemain muzik responsif menggunakan HTML dan CSS Oct 19, 2023 am 10:02 AM
Cara membuat reka letak pemain muzik responsif menggunakan HTML dan CSS

See all articles

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

Tentang kita Penafian Sitemap

© php.cn All rights reserved